专栏首页FEWY:before 和 :after的多用途实践 — 特效篇(1)

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

说明

讲了一些,:before和:after的知识,但是用他们去做页面内容的美化并没有太多,我们知道CSS控制网页内容的外观,CSS的意义就是实现将内容与表现形式分开,这篇开始,我们做几个简单漂亮的页面效果。

遮罩层特效

效果图

代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>遮罩层特效</title>
  <style>
      /*  外层容器  */
      #container{
        width:400px;
        height:300px;
        border:1px solid green;
        position:relative;             /* 相对定位,使遮罩层相对于容器进行定位 */
        overflow:hidden;               /* 溢出隐藏,使遮罩层刚开始的时候不显示 */
      }

      /*  生成遮罩层  */
      .shadow:before{
          content:attr(data-text);     /* 获取元素的 data-text属性的值 生成遮罩层 shadow */
          width:100%;
          height:30%;
          background:red;
          color:#fff;
          text-align:center;
          box-sizing:border-box;      /* padding和border 也算入指定宽高,宽高始终为100%和30% */
          padding-top:20px;
          position:absolute;          /* 绝对定位,遮罩层相对容器定位 */
          left:0;
          bottom:-30%;                /* 向下偏移-30%,溢出容器,遮罩层开始不显示 */ 
          transition:.5s;             /* 过度时间 0.5s */
      }

      /*  鼠标悬停 改变遮罩层位置 */
     .shadow:hover:before{
          bottom:0;                  /* 鼠标悬停,遮罩层bottom的属性值为0,相当于向上偏移30%,用时 0.5s */
      }
  </style>
 </head>
 <body>
     <p id="container" class="shadow" data-text="自定义属性"> </p>
 </body>
</html>

分析

上面的代码中,我们可以看到,定义了一个叫 shadow 的类选择器,这也是为了方便我们以后使用,如果别的元素需要加遮罩层,直接加上这个类就好了。

注意

1、需要加遮罩层的元素要 position:relative; 进行相对定位,这样是为了让遮罩层相对于元素进行绝对定位,因为position:absolute; 不一定是会相对于父元素进行定位的,所以需要在父元素上加 position:relative; 让遮罩层相对于父元素进行绝对定位。

position:absolute; 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

2、transition 要写在生成遮罩层的样式里(.shadow:before),这样鼠标移入和移出都会有过渡效果,如果写在鼠标移入的样式里(.shadow:hover:before),鼠标移出的时候就没有过渡效果了。

总结

这里实现效果写的代码,只是基础,是为了方便大家理解,剩下的大家就可以自由发挥,比如这个特效,可以继续去改改透明度,改改颜色,随便改什么都好了,哈哈。

简单说下这个特效就是,生成遮罩层设置好偏移量,鼠标移入改变偏移量,这个特效的制作,很简单,但是实现的效果还是不错的,经常见到一些网站会有这样的效果,而实现这样的效果也并非只有这样一种方式,而这种方式我觉得也仍然还有改进的余地,如果大家有什么建议,欢迎评论。

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 简单说 !![]==true 与 []==true 引发的思考

    首先说一下,如果你看到这些代码,能想到 相等运算符(== ),两个操作数类型不同时,进行的转换,那么你已经接近答案了。

    FEWY
  • 简单说 通过JS的隐式转换,关键时刻救你一命

    JavaScript在比较的时候,会进行隐式转换,你如果对隐式转换不是特别熟悉,结果往往出乎你的意料。 我们来看看这行代码

    FEWY
  • 获取页面中被选中元素的 JS原生方法 与 jQuery方法 分析

    补充 然而说到获取属性,我们一定会想到getAttribute() 方法,返回值是属性的值 或者 null,但是这个方法来获取checked属性的值,并...

    FEWY
  • SNS项目笔记<三>--fab与遮罩

    <b>在项目界面搭建过程中,使用fab的时候发现ionic自带的控件中并没有遮罩这样的属性这让我们实际操作起来很不舒服如下图所示:

    stormKid
  • 数据科学篇| statsmodels库的使用(六)

    statsmodels是一个Python模块,它提供对许多不同统计模型估计的类和函数,并且可以进行统计测试和统计数据的探索。

    润森
  • 细数绘制一张全景图所遇到的坑

    大家好,我是生信技能树学徒,前面我们带来了大量的表达数据挖掘实战演练,但是TCGA数据库之丰富程度,值得我们花费多年时间继续探索,现在带来的是突变全景图,如果你...

    生信技能树
  • 9.2 sun.py

    hankleo
  • 漫谈可视化Prefuse(六)---改动源码定制边粗细

    可视化一路走来,体会很多;博客一路写来,收获颇丰;代码一路码来,思路越来越清晰。终究还是明白了一句古话:纸上得来终觉浅,绝知此事要躬行。   跌跌撞撞整合了个...

    JackieZheng
  • 手把手搭建一个聊天机器人(二)

          这里,我们要去网上申请一个API,我们使用的是图灵聊天机器人。,网址是:http://www.tuling123.com/申请步骤就不说了,如果不会...

    钱塘小甲子
  • ggplot2中如何自定义数据地图版面范围~

    之前联系过程中遇到的一个小技术问题,就是在ggplot2制作数据地图时,使用标度调整参数进行范围限定时,总是出现错误,版面上出现交错的线条和条带。 应该是自己添...

    数据小磨坊

扫码关注云+社区

领取腾讯云代金券