CSS3實現自訂“W”形運行軌跡效果執行個體

來源:互聯網
上載者:User
整理文檔,搜刮出一個CSS3效果:“W”形運行軌跡執行個體的代碼,稍微整理精簡一下做下分享。

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style type="text/css">        *{            margin: 0;            padding:0;        }        #p{            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><p id="p">    <span id="span">w</span></p></body></html>
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.