用纯CSS和DIV绘制播放按钮样式

QC班长

于 2023-06-29 11:00:30 发布

阅读量1k

点赞数

分类专栏： Web前端-CSS Web前端-Html JavaEE-Web前台文章标签： css 前端用DIV绘制播放按钮用纯CSS绘制播放按钮 react.js

本文链接：https://blog.csdn.net/qq_35624642/article/details/131452028

版权

JavaEE-Web前台同时被 3 个专栏收录

93 篇文章

订阅专栏

Web前端-Html

46 篇文章

订阅专栏

Web前端-CSS

31 篇文章

订阅专栏

文章介绍了如何在前端实现视频监控播放的功能，具体展示了HTML结构和CSS样式代码。使用了渐变背景和边框创建了一个精致的播放按钮，适用于大屏项目，设计稿基于1920x1080px的分辨率，并使用vh单位进行尺寸定义。

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

最近在做前端的视屏监控播放对接，前端弄了个播放按钮，记录下，效果如图所示：

HTML代码：

<div className="box">
  <div className="one" >
       <div className="two">
            <div className="three">
               <div className="four"/>
            </div>
       </div>
       <span className='name'>QC班长威武</span>
  </div>
</div>

CSS代码：因为是大屏的项目，所以像素单位是vh的，对应的是1920x1080px的设计稿，请根据需要换成px或者其他单位。


      .box {
        margin-top: -5vh;
        width: 100%;
        height: 14vh;
        background: linear-gradient(180deg, #192b52, #000000);
        border-radius: 2vh;
      }

      .one {
        margin: 5vh auto;
        height: auto;
        padding-top: 2.5vh;
        cursor: pointer;
      }

      .two {
        margin: auto;
        width: 10vh;
        height: 8vh;
        border: 1vh solid #52b5fa;
        background: linear-gradient(350deg, #1e7eee, #081464);
        border-radius: 2vh;
        padding-top: 1vh;
      }

      .three {
        margin: auto;
        width: 4.2vh;
        height: 4vh;
        border-radius: 1vh;
        background: #4b8df8;
        padding-top: 0.5vh;
        padding-left: 0.5vh;
      }

      .four {
        margin: auto;
        width: 0;
        height: 0;
        border: 1.5vh solid #000;
        border-left: 2vh solid #000;
        border-right: none;
        border-top-color: transparent;
        border-bottom-color: transparent;
      }
      .name{
        color: #ffffff;
      }