300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 前端学习笔记 - 用CSS实现一个背景色为红色 半径为200px的圆 并设置不停的上下移动动画

前端学习笔记 - 用CSS实现一个背景色为红色 半径为200px的圆 并设置不停的上下移动动画

时间:2019-06-11 13:23:55

相关推荐

前端学习笔记 - 用CSS实现一个背景色为红色 半径为200px的圆 并设置不停的上下移动动画

返回目录

一、DOM

<body><div class="box"></div></body>

二、CSS

<style>.box {width: 200px;height: 200px;background-color: red;border-radius: 50%;position: relative;left: 0;top: 0;animation: move 2s linear infinite;}/*此方式为动画方式,使用的是定位的top属性还可以设置transform: translateY();margin-top*/@keyframes move {form {top: 0;}50% {top: 100px;}to {top: 0;}}</style>

三、结果

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。