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. OI数学知识清单

    OI常用的数学知识总结 本文持续更新…… 总结一下OI中的玄学知识 先列个单子,(from秦神 数论 模意义下的基本运算和欧拉定理 筛素数和判定素数欧几里得算法及其扩展[finish] 数论函数和莫比 ...

  2. seminar information (Email template)

      The following is an email example of seminar information   **************** Dear all, It is a plea ...

  3. 【[Offer收割]编程练习赛12 A】歌德巴赫猜想

    [题目链接]:http://hihocoder.com/problemset/problem/1493 [题意] [题解] 枚举P从2..n/2 如果P是质数且N-P也是质数; 则输出P和N-P就好; ...

  4. [繁华模拟赛]Evensgn 剪树枝

    Evensgn 剪树枝 题目 繁华中学有一棵苹果树.苹果树有 n 个节点(也就是苹果),n − 1 条边(也就 是树枝).调皮的 Evensgn 爬到苹果树上.他发现这棵苹果树上的苹果有两种:一 种是 ...

  5. SecureCRT的设置和美化

    一  . SecureCRT 7.1  的 安装     http://liufei888.blog.51cto.com/2625545/1306231 1.下载注册机SecureCRT.v.6.7. ...

  6. hdu_1056_HangOver_201311071354

    HangOver Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total S ...

  7. C - 剪花布条

    一块花布条,里面有些图案,另有一块直接可用的小饰条,里面也有一些图案.对于给定的花布条和小饰条,计算一下能从花布条中尽可能剪出几块小饰条来呢?  Input输入中含有一些数据,分别是成对出现的花布条和 ...

  8. 络谷 P2865 [USACO06NOV]路障Roadblocks

    P2865 [USACO06NOV]路障Roadblocks 题目描述 Bessie has moved to a small farm and sometimes enjoys returning ...

  9. jQuery和CSS3炫酷button点击波特效

    这是一款效果很炫酷的jQuery和CSS3炫酷button点击波特效.该特效当用户在菜单button上点击的时候.从鼠标点击的点開始,会有一道光波以改点为原点向外辐射的动画效果,很绚丽. 在线演示:h ...

  10. Oracle数据库导出导入

    需求为将数据库A中的数据导出为*.dmp文件.然后将*.dmp文件导入到数据库B. 1.导出数据库A     在cmd窗体输入下面命令: 导出所有数据库 exp username/password@数 ...