CSS实现三角形的播放器按钮图标

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE>
<html>
<head>
        <meta charset="utf-8" />
<title>CSS实现三角形的播放器按钮</title>
    <style>
                body{
                        background:#000;
                }
                header{
                        font-family:"MicroSoft YaHei";
                        font-size:30px;
                        color:#990000;
                }
                .circle{
                        width:120px;
                        height:120px;
                        -webkit-border-radius:60px;
                        -moz-border-radius:60px;
                        border-radius:60px;
                        border:2px #FFF solid;
                        float:left;
                        margin:10px;
                        cursor:pointer;
                }
                
                .circle:hover,.circle1:hover{
                        -webkit-box-shadow:rgba(255,255,255,0.6) 0 0 15px;
                        -moz-box-shadow:rgba(255,255,255,0.6) 0 0 15px;
                        box-shadow:rgba(255,255,255,0.6) 0 0 15px;        
                }
                
                .circle1{
                        width:140px;
                        height:140px;
                        -webkit-border-radius:70px;
                        -moz-border-radius:70px;
                        border-radius:70px;
                        border:2px #FFF solid;
                        float:left;
                        cursor:pointer;
                }
                
                .triangleRight{
                        width: 0;
                        height: 0;
                        border-left: 60px solid #FFF;
                        border-top: 30px solid transparent;
                     border-bottom: 30px solid transparent;
                        -webkit-transform:scale(0.6,1.2);
                        -moz-transform:scale(0.6,1.2);
                        transform:scale(0.6,1.2);
                }
                .next1{
                        margin:30px -10px 0 20px;
                        float:left;
                }
                .next2{
                        margin:30px 0 0 -20px;
                        float:left;
                }
                
                .triangleleft{
                        width: 0;
                        height: 0;
                        border-Right: 60px solid #FFF;
                        border-top: 30px solid transparent;
                     border-bottom: 30px solid transparent;
                        -webkit-transform:scale(0.6,1.2);
                        -moz-transform:scale(0.6,1.2);
                        transform:scale(0.6,1.2);
                }
                .pre1{
                        margin:30px -10px 0 10px;
                        float:left;
                }
                .pre2{
                        margin:30px 0 0 -20px;
                        float:left;
                }
                
                .pause{
                        width:20px;
                        height:80px;
                        background:#FFF;
                        float:left;        
                }
                .pause1{
                        margin:30px 10px 0 40px;
                }
                .pause2{
                        margin:30px 10px 0 10px;
                }
    </style>
</head>
<body>
<header>播放器按钮</header><section>
            <div class="circle">
                <div class="triangleLeft pre1"></div>
            <div class="triangleLeft pre2"></div>
        </div>
        <div class="circle1">
                <div class="pause pause1"></div>
            <div class="pause pause2"></div>
        </div>
        <div class="circle">
                <div class="triangleRight next1"></div>
            <div class="triangleRight next2"></div>
        </div>
</section>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

CSS实现三角形的播放器按钮图标

分类

CSS3

描述

CSS实现三角形的播放器按钮效果，看惯了长的、方的效果，用CSS实现播放器中的快进、快退效果，看上去很平常，实际是高手才能完成这么一个动作，研究前端设计的Fans们，有必要参考一下这种效果的实现哦。