实战网络营销、淘宝电商、设计培训教程中心
课程试听
新川教育-专业的网络营销培训机构
庆五一,特大优惠,一年仅一次!
三种教学方式任选:面授+在线教育+视频教学.
HTML5+CSS3网页实例:制作网页播放器按钮

来源:新川教育 阅读数:2110
添加时间: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. 师资介绍
  8. 工作推荐
  1. PS培训
  2. CAD培训
  3. 室内设计
  4. 办公文秘
  5. 美术培训
  6. SEO课程
  7. 联系方式
  8. site map

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