html样式:
<!-- 上一张 -->
<div id="last">
<div class="bar" id="bar1"></div>
<div class="bar" id="bar2"></div>
</div>
<!-- 下一张 -->
<div id="next">
<div class="bar" id="bar3"></div>
<div class="bar" id="bar4"></div>
</div>
css样式:(注:缺少父元素的相对定位)
#last,
#next {
width: 40px;
height: 40px;
/* background-color: white; */
border-radius: 50%;
position: absolute;
top: calc(50% - 40px / 2);
/* border: 1px solid black; */
transition: all .5s;
}
#last {
left: 20px;
}
#next {
right: 20px;
}
.bar {
width: 4px;
height: 20px;
background-color: red;
transition: all .5s;
}
#bar1 {
/* 设置元素变形的原点,默认是50% 50% 围绕中心点变化 */
transform-origin: 0 100%;
/* transform 定义元素以什么样的状态改变、变化
rotate 旋转 围绕Z轴旋转 deg度数 */
transform: rotateZ(30deg);
margin-left: 12px;
}
#bar2 {
margin-left: 12px;
transform-origin: 0 0;
transform: rotateZ(-30deg);
}
#bar3 {
transform-origin: 100% 100%;
transform: rotate(-30deg);
margin-left: 25px;
}
#bar4 {
transform-origin: 100% 0;
transform: rotate(30deg);
margin-left: 25px;
}
#last:hover #bar1 {
transform: rotateZ(45deg);
background-color: purple;
}
#last:hover #bar2 {
transform: rotateZ(-45deg);
background-color: purple;
}
#next:hover #bar3 {
transform: rotateZ(-45deg);
background-color: purple;
}
#next:hover #bar4 {
transform: rotateZ(45deg);
background-color: purple;
}
#last:hover {
background-color: white;
}
#next:hover {
background-color: white;
}