您的位置：首页 > Web前端 > CSS

:before 和 :after的多用途实践 — 特效篇（2）

2017-05-22 00:00 267 查看

说明

上一篇，我们实现了遮罩层的特效，这次，我们看看如何能生成一道光，当鼠标移入时，能有种闪光的效果。

白光特效

效果图

这张图好像有点太漂亮了，没法看清白光的样子，看看下面这个，应该能看清楚。

好了这个应该是相当清楚了，我们看下代码。

代码

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>白光特效</title>
<style>
/* 外层容器  */
#container{
width:400px;
height:300px;
background:#000;
position:relative;         /* 相对定位，使白光相对于容器进行定位 */
overflow:hidden;           /* 溢出隐藏，使白光刚开始的时候不显示 */
}
/* 生成白光  */
.light:before{
content:"";                     /* 生成内容 */
width:30%;
height:100%;
background:linear-gradient(to right,rgba(255,255,255,.2),rgba(255,255,255,.8),rgba(255,255,255,.2));
transform:skewX(-15deg);       /* 沿着 X轴 顺时针倾斜15度*/
position:absolute;             /* 绝对定位，白光相对容器定位 */
left:-40%;                     /* 向左偏移-40%，溢出容器，白光开始不显示 */
bottom:0;
}
/* 定义动画 light */
@keyframes light{
0%   {left:-40%;}
100% {left:120%;}
}
/* 鼠标移入 使用动画 light */
.light:hover:before{
animation:light .7s linear normal;
}
</style>
</head>
<body>
<div id="container" class="light">	 </div>
</body>
</html>

分析

这次，我同样是定义了一个类选择器 light，为了方便以后使用，这次的代码中，最重要的就是一个线性渐变和动画，其他的东西，在前面几篇文章中已经说的很多了。

background:linear-gradient(to right,rgba(255,255,255,.2),rgba(255,255,255,.8),rgba(255,255,255,.2));

这行代码就是一个线性渐变的背景，我们看看是什么效果。

线性渐变 linear-gradient(）
语法：
linear-gradient(angle,color-point,color-point,color-point,... ...)

1、angle 指定线性渐变的方向或角度
取值：

to top (从下向上填充 )

to right (从左向右填充 )

to bottom (从上向下填充)

to left (从右向左填充)

取值为角度(deg)

2、color-point( 上面的代码省略了位置 )
指定颜色，位置
颜色：合法颜色值
位置：

具体px数值

%：取决于当前元素宽或高的占比，来决定颜色位置

可以省略不写

例：

background:linear-gradient(to bottom,red 0%,green 50%,blue 100%);

详细参考

http://www.runoob.com/cssref/func-linear-gradient.html

@keyframes 规则

使用@keyframes规则，可以创建动画，动画可以说是更加复杂的过渡。

/* 定义动画 light */
@keyframes light{
0%   {left:-40%;}
100% {left:120%;}
}
/* 鼠标移入 使用动画 light */
.light:hover:before{
animation:light .7s linear normal;
}
```
解释一下上面的代码
```css
@keyframes 动画名称{
/*声明若干关键帧*/
0%{
动画开始时元素的样式
}
100%{
动画运行结束时 显示的样式
}
}

animation 用来调用动画，上面的意思就是调用动画 light 0.7s完成匀速播放动画按正常播放

直接上一张图，看看它的取值

详细参考

http://www.runoob.com/css3/css3-animations.html

总结

本文主要是讲如何实现白光特效，所以没有非常详细的去讲解线性渐变和动画，而这两个东西的玩法也是相当多的，以后可以和大家一起再聊聊这些。

这是第二个特效，相比第一个是有一点点的麻烦，但效果确实很有趣，下次我们再来实现一个更加有趣的特效。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： :before :after css 特效白光

相关文章推荐

新的分享

章节导航