CSS3效果：自定义W形运行轨迹实例

前端  /  管理员 发布于 7年前   165

整理文档，搜刮出一个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动画：5种预载动画效果实例
    下一条：
    详解CSS3中字体平滑处理和抗锯齿渲染

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客