开发工具与关键技术：DW、css3
作者：#33
撰写时间：撰写时间：2019年05月28日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
黑色的锤子匀速向下下落（过程3秒）到达地面，出现波澜圈（3秒结束）。
源代码：
| <div class="chuizi"></div> <div class="bolan"></div> |
Css代码：
| <style> body {background-color: #fff; } div { margin: 175px auto; } 锤子绑定动画的名称：chui 完成动画时间：3s; 动画匀速运动：infinite 规定动画的速度曲线：animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。您能够在该函数中使用自己的值，也可以预定义的值 .chuizi {position: relative; width: 50px; height: 65px; top: 0px; margin: 0 auto; background: #000; border-radius: 20px; animation-name: chui; animation-timing-function: cubic-bezier(1,0,.91,.19); animation-duration: 3s; animation-iteration-count: infinite; } .chuizi:before { content: ""; position: absolute; width: 150px; height: 20px; border-radius: 10px; background: #000; top: 23px; right: 0px; } 波澜圈绑定动画名称：quan 动画时间：3s 动画匀速运动：infinite 动画圆角效果：动画过程中200px变化到400px呈现圆形 大圈： .bolan { position: relative; opacity: 0; top: 0; width: 2px; height: 1px; border: 3px solid #000; border-radius: 400px / 200px; animation-name: quan; animation-delay: 3s; animation-duration: 3s; animation-iteration-count: infinite; } 小圈： 动画绑定名称：quan-2 .bolan:after { content: ""; position: absolute; opacity: 0; top: -5px; left: -5px; width: 2px; height: 1px; border: 3px solid #000; border-radius: 600px / 300px; animation-name: quan-2; animation-duration: 3s; animation-iteration-count: infinite; } @ keyframes quan { from {opacity: 1; } to { width: 600px; height: 300px; border-width: 1px; top: -100px; opacity: 0; } } @ keyframes quan-2 { 0% { opacity: 1; } 50% { opacity: 0; } 100% { width: 200px; height: 100px; border-width: 1px; top: 100px; left: 190px;} } @ keyframes chui {to { top: 190px; }} </style> |