过渡与变形的综合运用
原创
效果图：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过渡与变形的综合应用</title>
<style type="text/css">
body{
background-color: black;
}
.box1,.box2,.box3,.box4{
width: 250px;
height: 250px;
text-align: center;
color: white;
float: left;
margin: 100px 20px;
}
.box1 div,.box2 div,.box3 div,.box4 div{
width: 150px;
height: 150px;
border: 5px solid white;
overflow: hidden;
margin: 20px auto;
border-radius: 10px;
transition: all 1.5s linear;
}
.box1 div{
background-image: url(images/1.jpg);
background-size: 100% 100%;
}
.box2 div{
background-image: url(images/2.jpg);
background-size: 100% 100%; /*先使背景图片完全覆盖盒子，设置初始大小*/
background-repeat: no-repeat;
}
.box3 div{
background-image: url(images/3.jpg);
background-size: 100% 100%;
}
.box4 div{
background-image: url(images/4.jpg);
background-size: 100% 100%;
}
.box1 div:hover{
border-radius:50%;
box-shadow: 0 0 10px white;
}
.box2 div:hover{
background-size: 200% 240%;/*放大2倍*/
box-shadow: 0 0 10px white;
}
.box3 div:hover{
transform: rotate(360deg);
box-shadow: 0 0 10px white;
}
.box4 div:hover{
filter:grayscale(1); /*滤镜属性*/
box-shadow: 0 0 10px white;
}
</style>
</head>
<body>
<div class="box1">
<span>SHAPE</span>
<div></div>
</div>
<div class="box2">
<span>DISPLACEMENT</span>
<div></div>
</div>
<div class="box3">
<span>POSITION</span>
<div></div>
</div>
<div class="box4">
<span>COLOR</span>
<div></div>
</div>
</body>
</html>
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录