版权声明:欢迎转载,转载请注明出处 https://blog.csdn.net/Nate__River/article/details/81987562
设计
需求: 视频播放按钮居中,hover时样式变化
结构
.video_open {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 86px;
height: 86px;
cursor: pointer;
&::before {
content: "";
border-radius: 50%;
width: 100%;
height: 100%;
display: block;
background-color: #fff;
opacity: 0.5;
position: absolute;
border: 2px solid white;
}
&::after {
content: "";
position: absolute;
left: 43%;
top: 38%;
display: block;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 27px solid white;
}
&:hover {
&:before {
opacity: 0.6;
}
&:after {
border-left: 27px solid #4b6fff;
}
}
}