HTML5+CSS3制作網(wǎng)頁播放器按鈕

2022-06-12發(fā)布者：ylm大?。?/span> 下載：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>

版權(quán)聲明：

1 本站所有資源（含游戲）均是軟件作者、開發(fā)商投稿，任何涉及商業(yè)盈利目的均不得使用，否則產(chǎn)生的一切后果將由您自己承擔(dān)！

2 本站將不對(duì)任何資源負(fù)法律責(zé)任，所有資源請(qǐng)?jiān)谙螺d后24小時(shí)內(nèi)刪除。

3 若有關(guān)在線投稿、無法下載等問題，請(qǐng)與本站客服人員聯(lián)系。

4 如侵犯了您的版權(quán)、商標(biāo)等，請(qǐng)立刻聯(lián)系我們并具體說明情況后，本站將盡快處理刪除，聯(lián)系QQ:2499894784