开发工具与关键技术: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> |