CSS3 动画-- 鼠标移上去,div 会旋转、放大、移动
2024-09-05 07:38:45
<!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:#000;
}
/*效果一: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>
最新文章
- web开发调试神器——fiddler的使用
- 解读ASP.NET 5 &; MVC6系列(17):MVC中的其他新特性
- spring data mongodb 配置遇到的几个问题
- UVa10023手动开大数平方算法
- Sql Server 主从数据库配置
- Sql中的union和union all的讲解
- USACO3.44Raucous Rockers
- Ajax提交打开新窗口,浏览器拦截处理
- 学习手机游戏开发的两个方向 Cocos2d-x 和 Unity 3D/2D,哪个前景更好?
- Redis系列整理
- 用pc浏览器打开手机页面
- POJ 2676 Sudoku(深搜)
- JSON.parse()和JSON.stringify()的解析与用途
- nohup 和 &;的含义
- mysql新建用户在本地无法登录
- Bug : Cannot evaluate ...toString()
- alter system set events相关知识
- Mongodb添加副本及修改优先级
- SQL Server拾遗
- java工具类-交易码
热门文章
- Chapter 20: Diagnostics
- What&#39;s the difference between HEAD, working tree and index, in Git?
- JFreeChart教程(二)(转)
- js验证form表单示例
- mac系统下命令编译android ndk项目
- 并不对劲的bzoj3932: [CQOI2015]任务查询系统
- 【HAOI 2006】 受欢迎的牛
- 如何编写linux下nand flash驱动-4
- UI:简单的SQL语句
- mac上 mysql 突然无法启动的问题