日常總結 --- 視訊播放按鈕

設計

需求： 視訊播放按鈕居中，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;
        }
    }
}