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

最新推荐文章于 2023-02-09 14:39:44 发布

FEWY

最新推荐文章于 2023-02-09 14:39:44 发布

阅读量732

点赞数 1

分类专栏： CSS 前端简单说文章标签： before after 特效定位 css

本文链接：https://blog.csdn.net/FE_dev/article/details/72532795

版权

前端简单说同时被 2 个专栏收录

45 篇文章 20 订阅

订阅专栏

CSS

17 篇文章 1 订阅

订阅专栏

说明

之前的两篇文章
:before 和 :after的多用途实践 — 基础篇
 http://blog.csdn.net/fe_dev/article/details/71775624
:before 和 :after的多用途实践 — 提升篇
 http://blog.csdn.net/fe_dev/article/details/72236681
讲了一些，: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），鼠标移出的时候就没有过渡效果了。

总结

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

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

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

FEWY

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
:before 和 :after的多用途实践 — 特效篇（1）

说明之前的两篇文章 :before 和 :after的多用途实践 — 基础篇 http://blog.csdn.net/fe_dev/article/details/71775624 :before 和 :after的多用途实践 — 提升篇 http://blog.csdn.net/fe_dev/article/details/72236681 讲了一些，:before和:after的知识
复制链接

扫一扫