css3光弧扩散效果代码实例

2018-6-2 15:23| 发布者: antzone| 查看: 448| 评论: 0|来自: 蚂蚁部落

分享一段代码实例,它实现了光弧扩散的效果。

下面就详细介绍一下它的实现过程。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.box {
  margin: 100px;
}
li {
  float: left;
  width: 50px;
  height: 50px;
  margin-right: 100px;
}
.box  span {
  width: 100px;
  height: 100px;
  margin: 12px;
  display: block;
  border-radius: 50%;
  background: linear-gradient(red, blue);
  transition: 1s all ease;
}
a:before {
  border: 12px solid #A8E957;
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 62px;
  opacity: 0;
}
li:hover span {
  transform: rotateZ(360deg);
}
li:hover a:before {
  animation: warn 1s ease;
}
@keyframes warn {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  20% {
    transform: scale(1);
    opacity: 0.6;
  }
  40% {
    transform: scale(1.2);
    opacity: 0.4;
  }
  60% {
    transform: scale(1.4);
    opacity: 0.2;
  }
  80% {
    transform: scale(1.6);
    opacity: 0.1;
  }
  100% {
    transform: scale(1.8);
    opacity: 0.0;
  }
}
</style>
</head>
<body>
<div class="box">
  <ul>
    <li><a href="#"><span></span></a></li>
    <li><a href="#"><span></span></a></li>
  </ul>
</div>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

[CSS] 纯文本查看 复制代码
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

进行简单的初始化操作,比较粗暴;在网络上有很多比较好的初始化代码。

[CSS] 纯文本查看 复制代码
.box {
  margin: 100px;
}

设置box元素的外边距。

[CSS] 纯文本查看 复制代码
li {
  float: left;
  width: 50px;
  height: 50px;
  margin-right: 100px;
}

设置li元素的一些相关样式属性。

[CSS] 纯文本查看 复制代码
.box  span {
  width: 100px;
  height: 100px;
  margin: 12px;
  display: block;
  border-radius: 50%;
  background: linear-gradient(red, blue);
  transition: 1s all ease;
}

设置span元素的宽度和高度都为100px;内联元素是不能够设置尺寸,所以后面使用了display: block将其转换为块级元素;内联块级元素也是可以设置尺寸的;同时为其应用了线性渐变,这就是我们看到的红色和蓝色的过度效果。transition: 1s all ease的应用可以使其任何动画属性发生变化都会产生动画效果。

[CSS] 纯文本查看 复制代码
a:before {
  border: 12px solid #A8E957;
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 62px;
  opacity: 0;
}

添加一个伪元素,设置它的边框为12px。

设置它为定位的目的是为了让其变成块级元素,伪元素必须设置为内联块级或者块级,否则无法为其设置其尺寸。

border-radius值为62,这恰好宽度一半+边框尺寸值,实现了内外都是圆弧的效果,具体可以参阅相关阅读。

[CSS] 纯文本查看 复制代码
li:hover span {
  transform: rotateZ(360deg);
}

鼠标悬浮li元素,让span元素旋转起来。

[CSS] 纯文本查看 复制代码
li:hover a:before {
  animation: warn 1s ease;
}

鼠标悬浮li元素,伪元素会产生动画效果。

后面的动画效果也就不多介绍,就是透明度等属性的动画设置。

二.相关阅读:

(1).线性渐变参阅css3 linear-gradient一章节。

(2).transition参阅CSS3 transition一章节。

(3).border-radius参阅CSS3 border-radius一章节。

(4).opacity参阅CSS opacity属性一章节。

(5).@keyframes参阅CSS3 @keyframes一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部