首页 > 代码库 > 前端特效（css3）
前端特效（css3）
1、点击图片变大特效 代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
.t1{
width:100%;
max-width:440px;
height:250px;
cursor: pointer; /*食指图标*/
transition: all 0.6s;
}
.t1:hover{
transform: scale(1.2);
}
</style>
<body>
<div>
<img class=" img-responsive t1" src="http://www.mamicode.com/img/Cementing Manifolds.png" />
</div>
</body>
2、图片旋转特效 代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div,img,body{
margin: 0;
padding: 0;
}
.box{
height: 150px;
width:300px;
margin: 0 auto;
border:2px solid red;
padding: 20px;
}
.box:hover img{
transform: rotate(45deg); /* css3技术 */
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
img{
margin: 0 auto;
display: block;
transition: all 0.6s ease-in-out;
-webkit-transition:0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
height: 150px;
width:300px;
}
</style>
</head>
<body>
<div class="box">
<img src="http://www.mamicode.com/img/aa.jpg" />
</div>
</body>
</html>
总结：cursor: pointer; 表示食指图标；transform css3特效 可查看http://www.w3school.com.cn/css3/css3_3dtransform.asp 可实现2D旋转和3D旋转
Chrome 25 以及更早的版本，需要前缀 -webkit-
前端特效（css3）