广东 广州     专业、实战网络营销、淘宝电商、设计培训教程中心
2018年新春学费优惠及放假通知!
新川教育-专业的网络营销培训机构
网络营销培训咨询提示
面授+在线教育+视频课程销售一体化.
网络营销选择培训班
HTML5+CSS3网页实例:制作网页播放器按钮

来源:新川教育 阅读数:2026
添加时间:2012-12-1   类别:网页设计教程

 

最近开始学习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>

      友情链接

  1. 学校简介
  2. 资料下载
  3. 开班信息
  4. 学员作品
  5. 学校图片
  6. 师资介绍
  7. 资料下载
  1. 工作推荐
  2. CAD培训
  3. 平面设计
  4. 室内设计
  5. 办公文秘
  6. 文秘教程
  7. 美术培训
  8. site map

地址: 广州市番禺区市桥街桥东路63号银座中心7楼全层(番禺中医院旁边,百德中心斜对面)   电话: 020-84829690   咨询QQ:522961923  点击这里给我发消息
Copyright 2005-2020广州新川教育 All rights reserved.粤ICP备11014454号-6