HTML5+CSS3制作网页播放器按钮

2022-06-12发布者：ylm大小：下载：0

文件大小:

软件介绍

<!DOCTYPE>

<html>

<head>

        <meta charset="utf-8" />

    <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>

版权声明：

1 本站所有资源（含游戏）均是软件作者、开发商投稿，任何涉及商业盈利目的均不得使用，否则产生的一切后果将由您自己承担！

2 本站将不对任何资源负法律责任，所有资源请在下载后24小时内删除。

3 若有关在线投稿、无法下载等问题，请与本站客服人员联系。

4 如侵犯了您的版权、商标等，请立刻联系我们并具体说明情况后，本站将尽快处理删除，联系QQ:2499894784