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

来源：互联网发布：乐清市网络问效平台编辑：程序博客网时间：2024/05/29 13:00

说明

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

白光特效

效果图

这里写图片描述

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

这里写图片描述

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

<!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;      }

解释一下上面的代码

@keyframes 动画名称{        /*声明若干关键帧*/        0%{            动画开始时元素的样式        }        100%{            动画运行结束时 显示的样式        } }

animation 用来调用动画，上面的意思就是调用动画 light 0.7s完成匀速播放动画按正常播放
直接上一张图，看看它的取值
这里写图片描述
详细参考
http://www.runoob.com/css3/css3-animations.html

总结

本文主要是讲如何实现白光特效，所以没有非常详细的去讲解线性渐变和动画，而这两个东西的玩法也是相当多的，以后可以和大家一起再聊聊这些。
这是第二个特效，相比第一个是有一点点的麻烦，但效果确实很有趣，下次我们再来实现一个更加有趣的特效。

阅读全文

1 0