手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >关于css旋转动画效果的简单实现
关于css旋转动画效果的简单实现
摘要:我们可以通过css来做出动画效果,下面我为大家演示的是div的旋转,颜色过渡的动画XML/HTMLCode复制内容到剪贴板a{text-al...

我们可以通过css来做出动画效果,下面我为大家演示的是div的旋转,颜色过渡的动画

XML/HTML Code复制内容到剪贴板 <!DOCTYPEhtml> <htmllang="zh-cmn-Hans"> <head> <metacharset="utf-8"/> <title></title> <style> a{ text-align:center; line-height:100px; transition:all2s; width:100px; height:100px; background:pink; float:left; border-radius:50%; } a:hover{ transition:all2s; background:red; transform-origin:50100; transform:rotate(360deg); border-radius:50%; } </style> </head> <body> <h1>请将鼠标移动到下面的矩形上:</h1> <a> 两秒旋转360 </a> </body> </html>

效果自己测试,很绚丽哦!

以上这篇关于css旋转动画效果的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持查字典教程网。

【关于css旋转动画效果的简单实现】相关文章:

CSS条状图表形式的实现方法

鼠标经过图标动画效果

CSS产生的特殊效果

关于DIVCSS浮动float的兼容

html-css设置标签样式不起作用的2点原因

让div旋转一定的角度方法

如何让文字滚动后自动停止效果示例

使用CSS框架布局的缺点和优点

css自动换行的技巧

关于CSS语法基础(2)

精品推荐
分类导航