人体透析css3特效
2021-09-28 本文已影响0人
lzy_9fff
效果
image
最近工作不是很忙，小编又有时间重新学习一下css3的animation了，制作了一个透析的css3动效
可以大家分享一下开发的具体步骤吧
1.背景层
** 父元素设置的背景图片，一张人体结构图（宽：350 高600）**
2.动画层
** 元素使用absolute定位,top:0;left:0;right:100%;bottom:0,注意使用over-flow:hidden, **
** 还需要给动画层元素添加最关键的动画了animation: an 3s infinite linear, an1 0.8s infinite linear; **
** 动画层元素中包裹一个与背景层图片宽高一致大小的子元素（宽：350 高600） **
** 子元素中背景也是人体结构图**
**3.（1）an动画1，通过不同时间段控制定位的right和bottom,让子元素overflow的部分展示出来 **
** （2）an1动画2, 通过不同时间段控制反色样式和模糊filter: invert(90%) blur(2px);达到透析的效果**
原理很简单，代码如下，喜欢的可以复制一下代码哦！！！
感谢，老铁的阅读，如果喜欢的,帮忙点个👍,你的支持我是前进的动力++
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
background-color: #eee;
}
.bar-box{
position: relative;
margin: 30px auto;
border-radius: 16px;
width: 350px;
height: 600px;
position: relative;
overflow: hidden;
box-shadow: 0px 0px 100px #999;
}
.bar-front{
position: absolute;
top:0;
left:0;
right: 100%;
bottom:0;
animation: an 3s infinite linear, an1 0.8s infinite linear;
overflow: hidden;
}
.bar-front .bar-fixed{
width: 350px;
height: 600px;
line-height: 600px;
background-color: slateblue;
color: white;
font-size: 26px;
}
.bar-box:hover .bar-front{
animation-play-state: paused;
}
@keyframes an {
0% {
right: 100%;
}
25% {
right: 0%;
bottom: 0%;
}
50% {
bottom: 100%;
}
75% {
bottom: 0%;
right: 0%;
}
100% {
right: 100%;
}
}
@keyframes an1{
0% {
filter: invert(75%) blur(4px);
}
50% {
transform: scale(1.05);
filter: invert(90%) blur(2px);
}
100% {
filter: invert(75%) blur(4px);
}
}
.bar-fixed,.bar-box{
background-image: url(ti.jpg);
background-size: 100% 100%;
}
</style>
</head>
<body>
<div class="bar-box">
<div class="bar-front">
<div class="bar-fixed"></div>
</div>
</div>
</body>
</html>
