过渡与变形
此代码运用了transition属性、transform属性以及2D变形来实现过渡及变形效果
html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>过渡和变形</title>
<link rel="stylesheet" type="text/css" href="效果样式.css">
</head>
<body>
<div class="box">
<div class="pic">
shape
<div class="b">
<img src="1.jpg" width="150" height="150"/>
</div>
</div>
<div class="pic">
displacement
<div class="b">
<img src="2.jpg" width="150" height="150"/>
</div>
</div>
<div class="pic">
position
<div class="b">
<img src="3.jpg" width="150" height="150"/>
</div>
</div>
<div class="pic">
color
<div class="b">
<img src="4.jpg" width="150" height="150"/>
</div>
</div>
</div>
</body>
</html>
css效果代码：
.box{
width:800px;
height:250px;
background-color: #000000;
margin:100px auto;
}
.box .pic{
width:160px;
height:200px;
margin-left: 30px;
margin-top: 30px;
font-size:12px;
color:white;
text-align: center;
float:left;
}
.box .pic .b{
width:150px;
height: 150px;
margin-top: 10px;
border:5px solid white;
border-radius:5px;
}
.box .pic .b img{
width:150px;
height:150px;
}
.box .pic:nth-child(1) .b:hover{
border-radius:50%;
}
.box .pic .b{
width:150px;
height:150px;
margin-top: 10px;
border:5px solid white;
border-radius:5px;
transition:all 0.5s;
}
.box .pic .b img{
width:150px;
height:150px;
transition: all 0.5s;
}
.box .pic:nth-child(2) .b img:hover{
transform: scale(2);
}
.box .pic .b{
width:150px;
height: 150px;
margin-top: 10px;
border:5px solid white;
border-radius:5px;
transition:all 0.5s;
overflow: hidden;
}
.box .pic:nth-child(3) .b:hover{
transform:rotate(20deg);
}
.box .pic:nth-child(4) .b img:hover{
filter:grayscale(100%)
}
.box .pic .b:hover{
box-shadow:0px 0px 40px plum;
}
效果图：
754
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
