遮罩效果

最新推荐文章于 2024-09-17 12:21:00 发布

原创最新推荐文章于 2024-09-17 12:21:00 发布 · 275 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #html

css 专栏收录该内容

12 篇文章

订阅专栏

遮罩效果

原理：使用伪元素在元素前面添加一层蒙版，设置动画实现遮罩效果；

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遮罩层效果</title>
    <link rel="stylesheet" href="day_6.css">
</head>
<body>
<div class="box"></div>
</body>
</html>

CSS

* {
   margin: 0;
   padding: 0;
}

body {
   /*弹性布局，页面垂直水平居中*/
   display: flex;
   justify-content: center;
   align-items: center;
   /*页面占浏览器总高*/
   height: 100vh;
}

.box {
   position: relative;
   width: 600px;
   height: 375px;
   background: url("./3.jpeg");
   background-size: contain;
   overflow:hidden;
}

.box::before {
   /*利用伪元素做文字说明*/
   content: "数字孪生";
   position: absolute;
   top: -375px;
   left: 0;
   width: 600px;
   height: 375px;
   /*设置行高和父元素宽度相同，使文字垂直居中*/
   line-height: 375px;
   text-align: center;
   font-size: 30px;
   color: #ffffff;
   background-color: rgba(0, 0, 0, .4);

}
.box:hover::before{
   top:0;
   animation:drop 2s;
}

/*定义下降动画*/
@keyframes drop {
   0% {
       top: -375px;
   }
   5% {
       top: 0;
   }
   10% {
       top: -30px;
   }
   20% {
       top: 0;
   }
   30% {
       top: -20px;
   }
   40% {
       top: 0;
   }
   50% {
       top: -15px;
   }
   60% {
       top: 0;
   }
   70% {
       top: -10px;
   }
   80% {
       top: 0;
   }
   90% {
       top: -5px;
   }
   100%{
       top:0;
   }
}