<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>过渡与变形</title>
<style type="text/css">
#box{
width: 570px;
height: 160px;
background: black;
}
div[id^=one]{
text-align: center;
font-family: "微软雅黑";
color: white;
font-size:10px;
display:inline-block;
margin: 10px 45px 10px 62px;
}
div[id^=p]{
width: 100px;
height: 100px;
border-radius: 4px;
border:solid 4px white;
display: inline-block;
margin-left: 25px;
}
#p1{
background-image: url(A.jfif);
background-size: 100px;
transition: 2s ease;
}
#p1:hover{
width: 100px;
height: 100px;
border-radius: 50%;
border:solid 4px white;
box-shadow: gray 11px 7px 9px;
1 }
#p2{
background-image: url(B.jfif);
background-size: 100px;
transition: 2s ease;
}
#p2:hover{
border-radius: 4px;
border:solid 4px white;
transform: scale(1.3);
box-shadow: gray 11px 7px 9px;
}
#p3{
background-image: url(C.jfif);
background-size: 100px;
transition: 2s ease;
}
#p3:hover{
width: 100px;
height: 100px;
transform:rotate(270deg);
border:solid 4px white;
box-shadow: gray 11px 7px 9px;
}
#p4{
background-image: url(D.jfif);
background-size: 100px;
transition: 2s ease;
}
#p4:hover{
width: 100px;
height: 100px;
opacity: 0.3;
border:solid 4px white;
box-shadow: gray 11px 7px 9px;
}
</style>
</head>
<body>
<div id="box">
<div>
<div id="one1">photo</div>
<div id="one2">photo</div>
<div id="one3">photo</div>
<div id="one4">photo</div>
</div>
<div id="p1"></div>
<div id="p2"></div>
<div id="p3"></div>
<div id="p4"></div>
</div>
</body>
</html>
过渡与变形
最新推荐文章于 2022-08-02 10:52:39 发布
1058
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
