CSS3效果:自定义“W”形运行轨迹实例

整理文档,搜刮出一个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”形运行轨迹实例