纯Div+Css制作的漂亮点击按钮和关闭按钮
纯Div+Css制作的漂亮点击按钮和关闭按钮,单击点击按钮也有效果.这些都不是图片.
值得注意三点:
1.其中,主要使用了rotate.它能让文字旋转角度
2.还有radius,做圆角专用,很好用的属性.给想我这样的人省去了作图的时间.
3.W3C标准中对CSS3的transition这是样描述的:"CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。"
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 span{ 8 display: inline-block; 9 font-size: 40px; 10 font-weight: 700; 11 line-height: 40px; 12 text-shadow: 0 1px 2px rgba(0,0,0,.1); 13 -o-transform: rotate(45deg); 14 -moz-transform: rotate(45deg); 15 -webkit-transform: rotate(45deg); 16 -ms-transform: rotate(45deg); 17 } 18 button{ 19 font-size: 24px; 20 letter-spacing: 15px; 21 cursor: pointer; 22 width: 300px; 23 height: 44px; 24 margin-top: 25px; 25 padding: 0; 26 background: #ef4300; 27 -moz-border-radius: 6px; 28 -webkit-border-radius: 6px; 29 border-radius: 6px; 30 border: 1px solid #ff730e; 31 -moz-box-shadow: 0 15px 30px 0 rgba(255,255,255,.25) inset, 32 0 2px 7px 0 rgba(0,0,0,.2); 33 -webkit-box-shadow: 0 15px 30px 0 rgba(255,255,255,.25) inset, 34 0 2px 7px 0 rgba(0,0,0,.2); 35 box-shadow: 0 15px 30px 0 rgba(255,255,255,.25) inset, 36 0 2px 7px 0 rgba(0,0,0,.2); 37 font-family: 'PT Sans', Helvetica, Arial, sans-serif; 38 font-weight: 700; 39 color: #fff; 40 text-shadow: 0 1px 2px rgba(0,0,0,.1); 41 -o-transition: all .2s; 42 -moz-transition: all .2s; 43 -webkit-transition: all .2s; 44 -ms-transition: all .2s; 45 } 46 button:hover { 47 -moz-box-shadow: 0 15px 30px 0 rgba(255,255,255,.15) inset,0 2px 7px 0 rgba(0,0,0,.2); 48 -webkit-box-shadow: 0 15px 30px 0 rgba(255,255,255,.15) inset,0 2px 7px 0 rgba(0,0,0,.2); 49 box-shadow: 0 15px 30px 0 rgba(255,255,255,.15) inset,0 2px 7px 0 rgba(0,0,0,.2); 50 } 51 </style> 52 <script type="text/javascript" src="js/jquery-2.1.1.js"></script> 53 <script type="text/javascript"> 54 $("button").click(function(){ 55 alert("nihao!"); 56 57 }); 58 </script> 59 </head> 60 <body> 61 <span>+</span><br/> 62 <button>点击</button> 63 </body> 64 </html>