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

最新推荐文章于 2024-10-07 18:38:46 发布

帕尼尼0_0

最新推荐文章于 2024-10-07 18:38:46 发布

阅读量911

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Nate__River/article/details/81987562

工作总结专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使视频播放按钮在页面上居中的CSS布局技巧，并详细解释了如何通过伪元素实现hover状态下的样式变化效果，包括背景颜色和边框颜色的调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

设计

需求：视频播放按钮居中，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;
        }
    }
}