css旋转动画效果的简单实现示例详解
程序员文章站
2022-04-01 14:23:26
...
我们可以通过css来做出动画效果,下面我为大家演示的是p的旋转,颜色过渡的动画
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title></title> <style> a{ text-align:center; line-height:100px; transition:all 2s; width:100px; height:100px; background:pink; float:left; border-radius:50%; } a:hover{ transition:all 2s; background:red; transform-origin:50 100; transform:rotate(360deg); border-radius:50%; } </style> </head> <body> <h1>请将鼠标移动到下面的矩形上:</h1> <a> 两秒旋转360 </a> </body> </html>
效果自己测试,很绚丽哦!
以上这篇关于css旋转动画效果的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持PHP中文网。
更多css旋转动画效果的简单实现示例详解相关文章请关注PHP中文网!
上一篇: 深入JavaScript之DOM应用
下一篇: h5自定义audio的解析