玩命牛的成长记录
登陆
2080次阅读
精灵按钮特效案例

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

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元哦！
评论请先登录

联系人：李先生     联系电话：13581641192     电子邮件：channingbreeze@163.com     QQ：396417401     微信号：xin874058

友情链接：欣欣网站制作

Copyright © 2015 calfnote.com All Rights Reserved | 京ICP备15008048号-1