医院网站建设方案,百度搜索量,设计建设网站公司,平度做网站[css] 手写一个使用css3旋转硬币的效果
两种实现方式#xff1a;1、animationkeyframes 2、transition#xff1a;
//第一种实现方式
style typetext/css .around{ width:200px; height:200px; background:orange; /*圆形的话看不出效果#xff0c;所以…[css] 手写一个使用css3旋转硬币的效果
两种实现方式1、animationkeyframes 2、transition
//第一种实现方式
style typetext/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 typetext/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 个人简介
我是歌谣欢迎和大家一起交流前后端知识。放弃很容易 但坚持一定很酷。欢迎大家一起讨论
主目录
与歌谣一起通关前端面试题
