904次阅读
精灵按钮特效案例

既然欣欣这么喜欢精灵按钮,先来个精灵按钮的效果,这个效果大概是一个颜色渐变加上一个外边框的旋风效果,先睹为快:

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特效,网页一下子就能够高大上很多了。

如果您觉得此教程不错,想支持一下,您可以通过支付宝扫码给我们一点,不要超过100元哦!
评论请先登录