css蜂窝样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>蜂窝</title>
<style>
.boxFw{
width:800px;
margin: 0 auto;
padding: 0;
}
.boxFw>li{
width: 130px;
height: 74px;
background-color: #2722226b;
float: left;
list-style-type: none;
margin: 40px 10px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
img{
width: 40%;
height: 70%;
margin: 0 auto;
display: flex;
border-radius: 60%;
z-index: 1;
border: 2px solid #ccc;
}
.boxFw>li::before{
content: '';
width: 130px;
height: 74px;
position: absolute;
top: 0px;
left: 0px;
background-color: #3e35358f;
transform: rotate(60deg);
}
.boxFw>li::after{
content: '';
width: 130px;
height: 74px;
position: absolute;
top: 0px;
left: 0px;
background-color: #3e35358f;
transform: rotate(120deg);
-webkit-transform: rotate(120deg);
}
.active{
transform: rotate(360deg) scale(1.2);
transition: 1s;
-webkit-transition: 1s;
-o-transition: 1s;
}
.activewremove{
transform: rotate(0deg) scale(1);
transition: 1s;
-webkit-transition: 1s;
-o-transition: 1s;
}
</style>
</head>
<body>
<ul class='boxFw'>
<li><img src="./img/1.jpg" alt=""></li>
<li><img src="./img/2.jpg" alt=""></li>
<li><img src="./img/3.jpg" alt=""></li>
<li><img src="./img/4.jpg" alt=""></li>
<li><img src="./img/5.jpg" alt=""></li>
<li style="margin-left: 85px;"><img src="./img/6.jpg" alt=""></li>
<li><img src="./img/7.jpg" alt=""></li>
<li><img src="./img/8.jpg" alt=""></li>
<li><img src="./img/9.jpg" alt=""></li>
<li><img src="./img/10.jpg" alt=""></li>
<li><img src="./img/11.jpg" alt=""></li>
<li><img src="./img/12.jpg" alt=""></li>
<li><img src="./img/13.jpg" alt=""></li>
<li><img src="./img/14.jpg" alt=""></li>
</ul>
</body>
<script>
var eleme = document.getElementsByTagName("img")
for(var i=0;i<eleme.length;i++){
eleme[i].onmouseover = function () {
this.classList.add("active")
this.classList.remove("activewremove")
};
eleme[i].onmouseout = function () {
this.classList.add("activewremove")
this.classList.remove("active")
};
}
</script>
</html>
