html页面：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css动画</title>
<link rel="stylesheet" type="text/css" href="css动画.css">
</head>
<body>
<div id="d1"></div>
</body>
</html>

Css代码：

*{
padding: 0px;
margin:0px;
}
#d1{
width: 200px;
height: 200px;
background-color: #E47373;
position: absolute;
box-shadow: 2px;

transform:translate(30px,30px);
transform:skew(-30deg,20deg);
/*全部平滑过渡一秒匀速*/
transition: all 1s linear;
background-color: #84AE86;
border-radius: 100%;
animation: donghua 10s 1 linear;
/*兼容性处理
-ms-transform:;
-o-transform:;
-moz-transform:;
-webkit-transform:;*/
}
@keyframes donghua{
0%{
top: 10px;
left: 100px;
}
25%{
top: 100px;
right: 20px;
}
50%{
top: 300px;
left: 300px;
}
75%{
top: 10px;
right: 100px;
}
100%{
top: 300px;
left: 400px;
}
}

Css小动画的更多相关文章

  1. CSS3-实现单选框radio的小动画

    在微信上看到一个教程文,觉得制作的小动画还是很有意思的,自己也试验了一下.一开始动画怎么都不执行(我用的HB),因为内置浏览器对css3的不兼容.加上各种浏览器前缀后就好了.但是旋转那个效果,在HB里 ...

  2. 如何制作网页小动画？——gif or png

    一.场景与动画 为了拉动网站氛围,或者吸引用户浏览焦点,需要使用一些小动画.这种动画不是(gif)单纯的重复,而是需要需要一些控制和交互,比如在动画完成后打开一个对话框.动画有几个基本要素(时间控制, ...

  3. css小细节罗列

    有空时候把一些常见可能不是每个人都知道的css小细节总结了下,共勉. 1.line-height 众多周知,line-height是行高的意思,我们时常会使用类似line-height:24px;这样 ...

  4. 利用jQuery实现用户名片小动画

    我爱撸码,撸码使我感到快乐!大家好,我是Counter.下面给大家介绍利用jQuery实现的小动画,非常的简便,如果有原生js操作的话,那么就不止这么多行了.至于CSS,个人觉得,这边CSS布局也蛮重 ...

  5. 前端动画小记---bilibili ( ゜-゜)つロ客户下载小动画

    逛哔哩哔哩 ( ゜-゜)つロPC版的时候看到一个蛮有意思的动画,指导用户去下载客户端,于是摸索实现了一个. 原动画效果 可以看到,一个静止的小电视人,当鼠标移动到电视人身上时,电视人慢慢变身成为一个小 ...

  6. 利用@keyframe及animation做一个页面Loading时的小动画

    前言 利用@keyframe规则和animation常用属性做一个页面Loading时的小动画. 1  @keyframe规则简介 @keyframes定义关键帧,即动画每一帧执行什么. 要使用关键帧 ...

  7. 【CSS】352- 有趣的CSS弹跳动画

    点击上方"前端自习课"关注,学习起来~ 这是只用了一个div来做的小动画,纯粹利用CSS3的animation来完成,就像是一个正方形在地上弹跳,碰到地面的时候尖角还会压缩变圆,阴 ...

  8. jquery实现一些小动画二

    jquery实现一些小动画二 jquery实现拖拽功能 <!DOCTYPE html> <html lang="en"> <head> < ...

  9. jquery实现一些小动画一

    jquery实现小动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

随机推荐

  1. uva 133(The Dole Queue UVA - 133)

    一道比较难想的模拟题,用了队列等东西,发现还是挺难做的,索性直接看了刘汝佳的代码,发现还是刘汝佳厉害! 代码本身难度并不是很大,主要还是p=(p+n+d-1)%n+1;这一句有些难度,实际上经过自己的 ...

  2. 【转载】xShell5 利用 sftp 在本地和服务器之间传输文件

    sftp是Secure File TransferProtocol的缩写,安全文件传送协议.可以为传输文件提供一种安全的加密方法.sftp与 ftp有着几乎一样的语法和功能.SFTP为 SSH的一部分 ...

  3. 爬虫系列(九) xpath的基本使用

    一.xpath 简介 究竟什么是 xpath 呢?简单来说,xpath 就是一种在 XML 文档中查找信息的语言 而 XML 文档就是由一系列节点构成的树,例如,下面是一份简单的 XML 文档: &l ...

  4. Linux - docker基础

    目录 Linux - docker基础 docker的概念 docker安装流程 docker基本命令学习 docker 的 hello docker 运行一个ubuntu容器 Docker与Cent ...

  5. ES6-babel转码

    关于BaBel转码 有人问我babel的功能以及执行的过程和配置,在网上查阅了大量的资料~收集到这些~有错请指出,及时修改. ------------------------------------- ...

  6. 使用git bash向github远程仓库提交代码

    1.登录github,创建仓库. 2.切换到要提交的文件目录下. 3.打开git bash 3.1.初始化仓库 git init 3.2.将本地仓库与远程仓库关联 git remote add ori ...

  7. nyoj_71_独木舟上的旅行_201312122051

    独木舟上的旅行 时间限制:3000 ms  |           内存限制:65535 KB 难度:2   描述 进行一次独木舟的旅行活动,独木舟可以在港口租到,并且之间没有区别.一条独木舟最多只能 ...

  8. mongodb之备份

    前言 数据库的备份非常重要 备份方式 使用Mongodb自带的运维管理工具(Ops Manager) 需要单独部署,比较麻烦和复杂 通过文件系统快照 Linux需要LVM支持需要开启journal日志 ...

  9. Android平台Airplay的实现方法

    Airplay属于局域网内异构设备之间分享多媒体数据的一种通信协议.Airplay设备有客户端和服务器之分,一般将小屏IOS设备实现为Airplay客户端,大屏幕设备实现为Airplay服务器.即iP ...

  10. HDU 4534

    AC自动机+状态DP. 虽然很明显的AC自动机+状态DP题,但要分析问题上还是欠缺一点了.一直在犹豫枚举每一个字符选或不选的状态会不会超时,以为会达到状态有2^n,但其实根本没有.因为有很多状态是可以 ...