Posted in HTML / CSS onMarch 29, 2017
整理文档,搜刮出一个CSS3效果:“W”形运行轨迹实例的代码,稍微整理精简一下做下分享。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding:0; } #div{ width:900px; height:400px; border:2px solid black; margin: 100px auto; } #span{ float:left; display: block; font-size: 100px; width: 100px; height: 100px; line-height: 80px; text-align: center; border-radius: 50%; background: radial-gradient(blue,green); animation: move 4s ease 0s infinite alternate; } @keyframes move { 0%{ transform: translate(0px,0px); } 25%{ transform: translate(200px,300px); } 50%{ transform: translate(400px,0px); } 75%{ transform: translate(600px,300px); } 100%{ transform: translate(800px,0px); } } </style> </head> <body> <div id="div"> <span id="span">w</span> </div> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。
CSS3效果:自定义“W”形运行轨迹实例
- Author -
WEB前端工程师--钱成声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@