猿问

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

如何动态画出椭圆

一根竖线慢慢转动，最后画成一个椭圆的效果，求大神贴出代码，不胜感激！

https://img2.mukewang.com/5be540ea0001c5e602240225.jpg

白板的微信
浏览 703回答 1
1回答

人到中年有点甜

<!DOCTYPE html><html><head> &nbsp;&nbsp;&nbsp;&nbsp;<meta&nbsp;charset="UTF-8"> &nbsp;&nbsp;&nbsp;&nbsp;<title></title> &nbsp;&nbsp;&nbsp;&nbsp;<style> &nbsp;&nbsp;&nbsp;&nbsp;*{&nbsp;margin:&nbsp;0;&nbsp;padding:&nbsp;0;&nbsp;list-style:&nbsp;none;}&nbsp;&nbsp;&nbsp;&nbsp;.box{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:200px;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;200px;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-radius:&nbsp;50%;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;20px&nbsp;solid&nbsp;red;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;animation:&nbsp;bounce-down&nbsp;1.2s&nbsp;linear&nbsp;infinite; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;@-webkit-keyframes&nbsp;bounce-down&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;25%&nbsp;{-webkit-transform:&nbsp;rotateX(-90deg);} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;50%{-webkit-transform:&nbsp;rotateX(-60deg);} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;75%&nbsp;{-webkit-transform:&nbsp;rotateX(-30deg);} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;100%{-webkit-transform:&nbsp;rotateX(0deg);} &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;</style> &nbsp;&nbsp;&nbsp;&nbsp;</head><body> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="box"></div></body></html>简单写一个希望可以帮到你
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript