[css] 手写一个使用css3旋转硬币的效果

两种实现方式：1、animation+keyframes 2、transition：
//第一种实现方式
<style type="text/css"> .around{ width:200px; height:200px; background:orange; /*圆形的话看不出效果，所以这里border-radius没有取50%*/ border-radius:40%; transform:rotate(0deg); animation:move 3s ease; } @Keyframes move{ 0%{ transform:rotate(0deg); } 50%{ transform:rotate(360deg); } 100%{ transform:rotate(0deg); } } </style>

//第二种实现方式
<style type="text/css"> .around{ width:200px; height:200px; background:orange; /*圆形的话看不出效果，所以这里border-radius没有取50%*/ border-radius:40%; transform:rotate(0deg); transition:transform 3s linear; } .around:hover{ transform:rotate(360deg); } </style> 

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

标签：css3,rotate,0deg,transform,radius,手写,border,css,200px
来源： https://blog.csdn.net/weixin_43392489/article/details/113762842