css3中常用的背景,渐变, 遮罩总结

yy_33404590 2022-11-24 22:19:16 阅读数:979

cssCSS3常用中常背景

前言: 最近开发中遇到css3中的背景颜色切换效果,复习总结一下

1. 使用background-postion 渐变切换背景
<style>
body {

margin: 0;
padding: 0;
font-family: "montserrat";
background-image: linear-gradient(to right,
#3498db,
#27ae60,
#9b59b6,
#3498db,
#f39c12,
#d35400
);
background-size: 800%;
animation: bganimation 105s infinite;
}
.text {

color: white;
text-align: center;
text-transform: uppercase;
margin: 350px 0;
font-size: 22px;
}
/* 利用 background-position实现背景渐变效果*/
@keyframes bganimation {

0% {

background-position: 0% 50%;
}
50% {

background-position: 100% 50%;
}
100% {

background-position: 0% 50%;
}
}
</style>
</head>
<body>
<div id="" class="text">Gradient Background Animation</div>
</body>
2. 巧用 mix-blend-mode, 实现图片遮罩效果
<style>
* {

padding: 0;
margin: 0;
}
.banner {

position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;;
}
video {

position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
width: 1400px;
height: 1400px;
object-fit: cover;
}
.bg {

position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
width: 1400px;
height: 1400px;
background: #fff url(./love.svg) no-repeat;
background-size: cover;
/* 关键点---多层背景混合模式 */
mix-blend-mode: screen;
}
</style>
</head>
<body>
<div class="banner">
<video src="./boxing.mp4" autoplay muted loop></video>
<div class="bg"></div>
</div>
</body>
3. 使用webkit-mask 实现遮罩
<style>
* {

padding: 0;
margin: 0;
}
.banner {

display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
}
.bg {

width: 800px;
height: 800px;
/* 使用webkit-mask */
-webkit-mask: url(./love.svg) no-repeat;
-webkit-mask-size: 800px auto;
background: linear-gradient(45deg, red, #d351ac, red);
}
</style>
</head>
<body>
<div class="banner">
<div class="bg"></div>
</div>
</body>

最后关注下background: #fff url(…)等用法

// 径向渐变
background: radial-gradient( at 50% 50%, rgb(133, 149, 187) 4%,rgb(9, 43, 103) 60%);
// 线性渐变
background: linear-gradient(
to top,
rgba(9, 43, 103, 1),
rgba(9, 43, 103, 0.8) ,
rgba(9, 43, 103, 0.5)
);
// 模糊效果
background-color: rgba(255, 255, 255, 0.01);
backdrop-filter: blur(10x);
-webkit-backdrop-filter: blur(3px);

— 后面遇到了再总结

版权声明:本文为[yy_33404590]所创,转载请带上原文链接,感谢。 https://blog.csdn.net/qq_33404590/article/details/128016295