CSS3动画(360度旋转、旋转放大、放大、移动)
来源:互联网 发布:淘宝正义哥奶粉高仿 编辑:程序博客网 时间:2024/05/20 16:13
CSS3动画(360度旋转、旋转放大、放大、移动)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div{ width:120px; height:120px; line-height:120px; margin: 20px; background-color: #5cb85c; float: left; font-size: 12px; text-align: center; color:orangered; } /*效果一:360°旋转 修改rotate(旋转度数)*/ .img1 { transition: All 0.4s ease-in-out; -webkit-transition: All 0.4s ease-in-out; -moz-transition: All 0.4s ease-in-out; -o-transition: All 0.4s ease-in-out; } .img1:hover { transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); } /*效果二:放大 修改scale(放大的值)*/ .img2 { transition: All 0.4s ease-in-out; -webkit-transition: All 0.4s ease-in-out; -moz-transition: All 0.4s ease-in-out; -o-transition: All 0.4s ease-in-out; } .img2:hover { transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); } /*效果三:旋转放大 修改rotate(旋转度数) scale(放大值)*/ .img3 { transition: All 0.4s ease-in-out; -webkit-transition: All 0.4s ease-in-out; -moz-transition: All 0.4s ease-in-out; -o-transition: All 0.4s ease-in-out; } .img3:hover { transform: rotate(360deg) scale(1.2); -webkit-transform: rotate(360deg) scale(1.2); -moz-transform: rotate(360deg) scale(1.2); -o-transform: rotate(360deg) scale(1.2); -ms-transform: rotate(360deg) scale(1.2); } /*效果四:上下左右移动 修改translate(x轴,y轴)*/ .img4 { transition: All 0.4s ease-in-out; -webkit-transition: All 0.4s ease-in-out; -moz-transition: All 0.4s ease-in-out; -o-transition: All 0.4s ease-in-out; } .img4:hover { transform: translate(0, -10px); -webkit-transform: translate(0, -10px); -moz-transform: translate(0, -10px); -o-transform: translate(0, -10px); -ms-transform: translate(0, -10px); } </style></head><body><div class="img1">效果一:360°旋转 </div><div class="img2">效果二:放大</div><div class="img3">效果三:旋转放大</div><div class="img4">效果四:上下左右移动 </div></body></html>
点击查看效果
阅读全文
0 0
- CSS3动画(360度旋转、旋转放大、放大、移动)
- CSS3动画(360度旋转、旋转放大、放大、移动)(转)
- [转载]CSS3动画(360度旋转、旋转放大、放大、移动)
- CSS3 常用四个动画(旋转、放大、旋转放大、移动)
- CSS3 常用四个动画(旋转、放大、旋转放大、移动)
- Css动画(360度旋转、旋转放大、放大、浮动)
- 【转载】CSS3 常用四个动画(旋转、放大、旋转放大、移动)
- css3旋转、放大
- css3 动画之 2D旋转 3D旋转 放大
- 控件移动,放大,缩小,旋转
- 放大、缩小、旋转、开始动画
- 利用CSS3实现图片旋转放大特效
- ios 图片旋转放大加移动
- ---Transform---放大缩小旋转
- animaldemo放大 旋转
- 简单的旋转,放大,缩小 (HTML5)
- Unity3D 学习教程 9 旋转 放大 移动 物体
- IOS代码添加控件,控件移动,放大,缩小,旋转
- Color Length UVA
- qt 实现画树功能
- IDEA使用maven的进行mybatis的逆向工程
- MySQL数据库引擎详解
- JAVA设计模式总结
- CSS3动画(360度旋转、旋转放大、放大、移动)
- unity学习——协程的停止StopCoroutine
- 八皇后问题的解和动态演示过程
- “一致性”架构设计
- 深度学习caffe平台-----视觉层(Vision Layers)参数及参数详解
- Intellij idea控制台中文乱码问题
- 第29篇 杂文-写给自己
- 第30篇 移动端响应式布局页面实现
- 第32篇 里约奥运会