:before 和 :after的多用途实践 — 特效篇(2)

说明

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

白光特效

效果图

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

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

代码

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

总结

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏gojam技术备忘录

Pseudo elements伪元素与Pseudo classes伪类

::after用于描述处于css渲染层的一个伪元素,相当于选中元素的最后一个子元素,但这个元素与DOM节点无关,位于选择的元素之后,伪元素的内容用content...

9720
来自专栏腾讯音视频实验室

从HEVC到VVC:变换技术的演进(1)—— 主变换(Primary transform)

在视频编码标准过去三十多年的发展历程中,离散余弦变换(Discrete Cosine Transform,DCT)Type 2 (后面简称为DCT2)因其较低的...

42960
来自专栏腾讯云安全的专栏

瓜分19万奖金!CSS 2019腾讯安全探索论坛(TSec)开启议题报名通道

7月30日-31日,第五届互联网安全领袖峰会(CSS 2019)将在北京召开。作为CSS 2019主题论坛之一,以“前沿科技尖端对抗”为主题的第三届腾讯安全探...

20920
来自专栏gojam技术备忘录

CSS常用选择器

HTML: <element class="classname"></element>

12340
来自专栏程序员的知识天地

CSS基础知识(一)

在HTML中通过使用 <style> 标签引入CSS样式, <style> 标签用于为HTML文档定义样式信息; <style> 标签位于 <he...

16440
来自专栏草根博客站长Live

Typecho 的 Handsome 主题下谷歌 AdSense 广告错位修正

最近明月在 Handsome 主题“文章页脚广告位”广告位投放了谷歌 AdSense 的“匹配内容”广告样式,这种广告样式的匹配度和对用户的吸引力以及延长访问者...

17010
来自专栏角落的白板报

Asp.Net Core 中的环境变量-14

**开发环境:**我们的软件开发人员通常将此环境用于我们的日常开发工作。我们希望在开发环境中加载非缩小的 JavaScript 和 CSS 文件,以便于调试。类...

21430
来自专栏草根博客站长Live

Handsome 主题实现最新评论首页博客导航栏自动排第一功能

今天在【知言笔记】上看到了『Typecho实现每评论一次自动排第一功能』一文,终于算是实现了最新评论首页博客导航栏自动排第一功能的功能,一直很想用上这个功能,可...

14340
来自专栏Web技术布道师

CSS团队协作规范

手机开启网页很吃手机效能和网络状况,前端工程师一开始就以手机版为优先,可以让HTML一开始载入,使用最少的效能快速载入网页。当开始制作桌面版时,只会少许跑版,做...

8330
来自专栏腾讯音视频实验室

从HEVC到VVC:变换技术的演进(2)—— 二次变换(Secondary transform)

当前主流的视频编码标准(例如MPEG-2,H.264,VP9,AVS1等)均采用行列可分离的主变化(Separable primary transform)技术...

54630

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励