猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

一个动画效果

https://img3.mukewang.com/5befd2d00001bddf04400072.jpg

这个动画效果怎么写

慕勒3428872
浏览 506回答 1
1回答

慕森王

<style>&nbsp; &nbsp; #an{&nbsp; &nbsp; &nbsp; &nbsp; width: 100px;&nbsp; &nbsp; &nbsp; &nbsp; height: 100px;&nbsp; &nbsp; &nbsp; &nbsp; background-color: #0a628f;&nbsp; &nbsp; &nbsp; &nbsp; border-radius: 50%;&nbsp; &nbsp; &nbsp; &nbsp; animation: myfirst 5s;&nbsp; &nbsp; &nbsp; &nbsp; animation-iteration-count:infinite;&nbsp; &nbsp; }&nbsp; &nbsp; @keyframes myfirst&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; from {background: yellow;}&nbsp; &nbsp; &nbsp; &nbsp; 50%{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #000a28;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -webkit-transform: translate(200px);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -moz-transform: translate(200px);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -ms-transform: translate(200px);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -o-transform: translate(200px);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: translate(200px);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 200px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 20px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; to {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -webkit-transform: translate(300px);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -moz-transform: translate(300px);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -ms-transform: translate(300px);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -o-transform: translate(300px);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: translate(300px);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 200px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 130px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 20px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }</style><body>&nbsp; <div id="an"></div></body>
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript