CSS3+HTML5網頁制作實例:網頁播放器

2024-07-11 09:02:07

字體：大中小

來源：轉載

供稿：網友

武林網(m.survivalescaperooms.com)文章簡介：CSS3繪制簡單的播放器按鈕.

相關文章：HTML5和css3實例:制作HTML5網頁視頻播放器

最近開始學習html5+css3,練習下css3，繪制了幾個播放器的按鈕，有什么更好的建議，望大家指出……

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