日常总结 --- 视频播放按钮

版权声明：欢迎转载，转载请注明出处 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;
        }
    }
}