CSS3+HTML5学习笔记二-绘制播放器按钮

最新推荐文章于 2021-08-06 21:05:21 发布

abcd3699

最新推荐文章于 2021-08-06 21:05:21 发布

阅读量313

点赞数

原文链接：http://www.cnblogs.com/love17914/archive/2012/05/09/2492133.html

版权

每天学一点点Html5+Css3,慢慢积累经验，从基础做起。下面主要介绍一下绘制简单的播放器按钮；

首先，看看当DIV的宽度和高度都为0的时候，设置边框成了什么样子？

代码如下：

 1 <!DOCTYPE>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <style>
 6         .border{
 7             width:0;
 8             height:0;
 9             border-bottom:100px #F00 solid;
10             border-top:100px #00F solid;
11             border-left:100px #063 solid;
12             border-right:100px #30C solid;
13         }
14     </style>
15 </head>
16 <body>
17 <div class="border"></div>   
18 </body>
19 </html>

运行效果图如下：

那么，从这张图中我们可以看出点什么么？

如果去掉其中的三个边框，我们是不是就可以绘制出三角形呢?答案是肯定的。一下代码就可以绘制出一个三角形：

 1 <!DOCTYPE>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <style>
 6         .border{
 7             width:0;
 8             height:0;
 9             border-bottom:100px #F00 solid;
10             border-left:100px transparent solid;
11             border-right:100px transparent solid;
12         }
13     </style>
14 </head>
15 <body>
16 <div class="border"></div>   
17 </body>
18 </html>

效果：

现在绘制出播放器的按钮就简单了，结合学习笔记一种的一些技巧，稍微变通一下上面绘制三角形的代码，很容易就可以画出最后的播放器按钮了。

代码如下：

  1 <!DOCTYPE>
  2 <html>
  3 <head>
  4     <meta charset="utf-8" />
  5     <style>
  6         body{
  7             background:#000;
  8         }
  9         header{
 10             font-family:"MicroSoft YaHei";
 11             font-size:30px;
 12             color:#990000;
 13         }
 14         .circle{
 15             width:120px;
 16             height:120px;
 17             -webkit-border-radius:60px;
 18             -moz-border-radius:60px;
 19             border-radius:60px;
 20             border:2px #FFF solid;
 21             float:left;
 22             margin:10px;
 23             cursor:pointer;
 24         }
 25         
 26         .circle:hover,.circle1:hover{
 27             -webkit-box-shadow:rgba(255,255,255,0.6) 0 0 15px;
 28             -moz-box-shadow:rgba(255,255,255,0.6) 0 0 15px;
 29             box-shadow:rgba(255,255,255,0.6) 0 0 15px;    
 30         }
 31         
 32         .circle1{
 33             width:140px;
 34             height:140px;
 35             -webkit-border-radius:70px;
 36             -moz-border-radius:70px;
 37             border-radius:70px;
 38             border:2px #FFF solid;
 39             float:left;
 40             cursor:pointer;
 41         }
 42         
 43         .triangleRight{
 44             width: 0;
 45             height: 0;
 46             border-left: 60px solid #FFF;
 47             border-top: 30px solid transparent;
 48              border-bottom: 30px solid transparent;
 49             -webkit-transform:scale(0.6,1.2);
 50             -moz-transform:scale(0.6,1.2);
 51             transform:scale(0.6,1.2);
 52         }
 53         .next1{
 54             margin:30px -10px 0 20px;
 55             float:left;
 56         }
 57         .next2{
 58             margin:30px 0 0 -20px;
 59             float:left;
 60         }
 61         
 62         .triangleleft{
 63             width: 0;
 64             height: 0;
 65             border-Right: 60px solid #FFF;
 66             border-top: 30px solid transparent;
 67              border-bottom: 30px solid transparent;
 68             -webkit-transform:scale(0.6,1.2);
 69             -moz-transform:scale(0.6,1.2);
 70             transform:scale(0.6,1.2);
 71         }
 72         .pre1{
 73             margin:30px -10px 0 10px;
 74             float:left;
 75         }
 76         .pre2{
 77             margin:30px 0 0 -20px;
 78             float:left;
 79         }
 80         
 81         .pause{
 82             width:20px;
 83             height:80px;
 84             background:#FFF;
 85             float:left;    
 86         }
 87         .pause1{
 88             margin:30px 10px 0 40px;
 89         }
 90         .pause2{
 91             margin:30px 10px 0 10px;
 92         }
 93     </style>
 94 </head>
 95 <body>
 96 <header>播放器按钮</header><section>
 97         <div class="circle">
 98             <div class="triangleLeft pre1"></div>
 99             <div class="triangleLeft pre2"></div>
100         </div>
101         <div class="circle1">
102             <div class="pause pause1"></div>
103             <div class="pause pause2"></div>
104         </div>
105         <div class="circle">
106             <div class="triangleRight next1"></div>
107             <div class="triangleRight next2"></div>
108         </div>
109 </section>
110 </body>
111 </html>

效果：

总结：这个简单的实例主要应用了利用边框绘制三角形，稍微变换，比如改变边框的宽度或者div的尺寸，就可以绘制出其他的一些基本的图形。此外，还利用了CSS3中的圆角，阴影，图形变换。

转载于:https://www.cnblogs.com/love17914/archive/2012/05/09/2492133.html

abcd3699

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS3+HTML5学习笔记二-绘制播放器按钮

每天学一点点Html5+Css3,慢慢积累经验，从基础做起。下面主要介绍一下绘制简单的播放器按钮；首先，看看当DIV的宽度和高度都为0的时候，设置边框成了什么样子？代码如下： 1 <!DOCTYPE> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 ...
复制链接

扫一扫