Css动画(360度旋转、旋转放大、放大、浮动)
来源:互联网 发布:田亮跳水水平 知乎 编辑:程序博客网 时间:2024/05/24 06:07
<!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;
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);
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);
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);
<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
- Css动画(360度旋转、旋转放大、放大、浮动)
- CSS3动画(360度旋转、旋转放大、放大、移动)
- CSS3动画(360度旋转、旋转放大、放大、移动)(转)
- [转载]CSS3动画(360度旋转、旋转放大、放大、移动)
- CSS3 常用四个动画(旋转、放大、旋转放大、移动)
- CSS3 常用四个动画(旋转、放大、旋转放大、移动)
- 放大、缩小、旋转、开始动画
- 【转载】CSS3 常用四个动画(旋转、放大、旋转放大、移动)
- css3 动画之 2D旋转 3D旋转 放大
- css3旋转、放大
- ---Transform---放大缩小旋转
- animaldemo放大 旋转
- 简单的旋转,放大,缩小 (HTML5)
- Android动画——放大、缩小、旋转、平移、组合
- android 旋转,放大,缩小图片
- picturebox放大、缩小、旋转、拖拽
- silverlight图片旋转、放大、缩小
- 旋转后图片放大变形
- Linux的字符串截取
- Oracle 10g RAC 启动与关闭
- 第 2 章 算法
- OpenGL ES例子
- node.js使用(五):网站访问、搭建服务器及留言功能的实现
- Css动画(360度旋转、旋转放大、放大、浮动)
- Android JNI 防二次打包应用签名检测
- 三栏布局
- Java的char数据类型存储一个中文字符
- js作用域问题一步步透彻理解
- 在WAMP中添加其他版本的PHP
- myeclipse中创建的servlet的doGet方法
- 未闻花名
- android studio使用遇见的常见问题