既然欣欣这么喜欢精灵按钮,先来个精灵按钮的效果,这个效果大概是一个颜色渐变加上一个外边框的旋风效果,先睹为快:
html:
<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>精灵</title> <link href="style.css" rel="stylesheet" /> </head> <body> <h1>What do you want?</h1> <ul> <li> <div class="wrapper"> <a href="#">Love</a> <div class="line left"></div> <div class="line top"></div> <div class="line right"></div> <div class="line bottom"></div> </div> </li> <li> <div class="wrapper"> <a href="#">Success</a> <div class="line left"></div> <div class="line top"></div> <div class="line right"></div> <div class="line bottom"></div> </div> </li> <li> <div class="wrapper"> <a href="#">Fortune</a> <div class="line left"></div> <div class="line top"></div> <div class="line right"></div> <div class="line bottom"></div> </div> </li> <li> <div class="wrapper"> <a href="#">Health</a> <div class="line left"></div> <div class="line top"></div> <div class="line right"></div> <div class="line bottom"></div> </div> </li> </ul> </body>check the result
css:
body { background-color : black; } h1 { color : white; } ul { margin : 0px; padding : 0px; } li { width : 250px; height : 150px; float : left; margin-left : 50px; list-style-type : none; text-align : center; background-color : pink; } .wrapper { width : 80px; height : 30px; margin : 0px auto; margin-top : 50px; position : relative; } a { width : 100%; height : 100%; display : block; border : 3px solid white; text-decoration : none; line-height : 30px; font-size : 20px; color : black; border-radius : 2px; transition : all 0.2s linear 0s; -ms-transition : all 0.2s linear 0s; -moz-transition : all 0.2s linear 0s; -webkit-transition : all 0.2s linear 0s; -o-transition : all 0.2s linear 0s; } a:hover { color : black; background-color : white; } .line { position : absolute; background-color : white; transition : all 0.2s ease-in 0s; -ms-transition : all 0.2s ease-in 0s; -moz-transition : all 0.2s ease-in 0s; -webkit-transition : all 0.2s ease-in 0s; -o-transition : all 0.2s ease-in 0s; opacity : 0; } a:hover ~ .line { opacity : 1; } .left, .right { width : 3px; height : 30px; } .top, .bottom { width : 80px; height : 3px; } .left { left : 0px; top : -30px; } a:hover ~ .left { top : 0px; } .right { left : 83px; top : 36px; } a:hover ~ .right { top : 0px; } .top { left : 86px; top : 0px; } a:hover ~ .top { left : 0px; } .bottom { left : -80px; top : 33px; } a:hover ~ .bottom { left : 0px; }
既然之前学过了,这里就只讲讲思路,背景的变化是非常简单的,设置a的transition,然后在a:hover的时候给一个变化就行。四根线就是四个div,绝对定位设置好初始位置,初始透明度为0,然后a:hover的时候,移动位置,同时透明度变为1,就完成了这个效果。这里面的主要知识点有定位和transition,当然还有你丰富的想象力。
好了,看下一个效果,这个效果是我们经常看到的,一个盒子,当鼠标放上去的时候,就有一个东西升上来,其实实现也很简单:
html:
<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>精灵</title> <link href="style.css" rel="stylesheet" /> </head> <body> <ul> <li><div>Love</div></li> <li><div>Fortune</div></li> <li><div>Health</div></li> <li><div>Success</div></li> </ul> </body>check the result
css:
ul { margin : 0px; padding : 0px; } li { width : 100px; height : 100px; list-style-type : none; position : relative; background-color : pink; margin : 10px; float : left; overflow : hidden; cursor : pointer; } div { width : 100px; height : 100px; background-color : #dddddd; text-align : center; position : absolute; top : 80px; left : 0px; transition : all 0.2s linear 0s; -ms-transition : all 0.2s linear 0s; -moz-transition : all 0.2s linear 0s; -webkit-transition : all 0.2s linear 0s; -o-transition : all 0.2s linear 0s; } li:hover div { top : 0px; }
这里用到了overflow:hidden,将超出li的部分隐藏,然后通过div的top属性来让盒子升起。案例较简单,大家可以自己看代码。
再来一个例子,就是一个圆圈,鼠标放上去的时候会旋转360度并放大,看看代码:
html:
<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>精灵</title> <link href="style.css" rel="stylesheet" /> </head> <body> <ul> <li>Love</li> <li>Fortune</li> <li>Health</li> <li>Success</li> </ul> </body>check the result
css:
ul { margin : 0px; padding : 0px; } li { width : 100px; height : 100px; list-style-type : none; position : relative; background-color : pink; margin : 10px; float : left; border-radius : 50px; text-align : center; line-height : 100px; cursor : pointer; transition : all 0.2s linear 0s; -ms-transition : all 0.2s linear 0s; -moz-transition : all 0.2s linear 0s; -webkit-transition : all 0.2s linear 0s; -o-transition : all 0.2s linear 0s; } li:hover { transform: rotate(360deg) scale(1.1, 1.1); -ms-transform: rotate(360deg) scale(1.1, 1.1); -moz-transform: rotate(360deg) scale(1.1, 1.1); -webkit-transform: rotate(360deg) scale(1.1, 1.1); -o-transform: rotate(360deg) scale(1.1, 1.1); }
这个效果在一些网站上也经常看见,其实就是用transform加上transition来实现的,看看代码吧,很简单就能实现。
最后一个效果是翻页的效果,当鼠标放上去的时候,box就向后转了:
html:
<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>精灵</title> <link href="style.css" rel="stylesheet" /> </head> <body> <div class="wrap"> <div class="front div">front</div> <div class="back div">back</div> </div> </body>check the result
css:
.wrap { width : 100px; height : 100px; margin : 0px auto; margin-top : 100px; position : relative; transition : all 0.2s linear 0s; -ms-transition : all 0.2s linear 0s; -moz-transition : all 0.2s linear 0s; -webkit-transition : all 0.2s linear 0s; -o-transition : all 0.2s linear 0s; } .div { width : 100%; height : 100%; position : absolute; top : 0px; left : 0px; transition : all 0.2s linear 0s; -ms-transition : all 0.2s linear 0s; -moz-transition : all 0.2s linear 0s; -webkit-transition : all 0.2s linear 0s; -o-transition : all 0.2s linear 0s; } .front { background-color : pink; } .back { background-color : yellow; opacity : 0; transform : rotateY(180deg); -webkit-transform : rotateY(180deg); -moz-transform : rotateY(180deg); -o-transform : rotateY(180deg); -ms-transform : rotateY(180deg); } .wrap:hover .front { opacity : 0; transform : rotateY(180deg); -webkit-transform : rotateY(180deg); -moz-transform : rotateY(180deg); -o-transform : rotateY(180deg); -ms-transform : rotateY(180deg); } .wrap:hover .back { opacity : 1; transform : rotateY(0deg); -webkit-transform : rotateY(0deg); -moz-transform : rotateY(0deg); -o-transform : rotateY(0deg); -ms-transform : rotateY(0deg); }
这里用到了transform中的rotateY,它可以让元素按照Y轴旋转,那么这个例子就很简单了。初始状态,让back绕Y轴转180度,藏起来,hover的时候,front绕Y轴转180度,同时消失,back绕Y轴恢复0度,同时显示。
这四个例子都是可以用在网页中制作特效的很实用的例子,用了CSS3特效,网页一下子就能够高大上很多了。