马老师 CSS:mask之使用渐变背景做遮罩实战测试
本帖最后由 亚伦影音工作室 于 2024-10-15 12:27 编辑 <br /><br /><style type="text/css">#papa {margin: 150px -300px;width: 1168px;
height: 640px;
background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/fabeed103c30461fa6c3c22fb6613871.jpg)no-repeat center/cover;
box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
position: relative;overflow: hidden;
z-index: 12345;
}
#mplayer {z-index: 80;
position: absolute;
top:94%; left:50%;
bottom: 20px;
width: 40px;
height: 35px;background:#333333;
border: 0px solid #000000;
border-radius: 10%;
opacity: 1;
transition: .7s;
display: grid;
place-items: center;
--disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
position: absolute;
content: '';
border-style: solid;
border-color: #ffffff;
cursor: pointer;
transition: .4s;
}
#mplayer::before {
width: 0;
height: 0;
left: 16px;
border-width: 5px 8px;
border-color: transparent transparent transparent #ffffff;
opacity: var(--disp1);
}
#mplayer::after {
width: 2px;
height: 15px;
border-width: 0 2px 0 2px;
opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
</style >
<style >
.photo {width: 1164px; height: 640px;
position: absolute;z-index: 10;
top:0%; left:0%;
opacity: 0;
animation: round 60s linear infinite;}
@keyframes round {
1% {
opacity: 0;
-webkit-mask: linear-gradient(to right, #cccccc 1%, transparent 20%, transparent 0);}
3% {
opacity: 1;
-webkit-mask: linear-gradient(to right, #cccccc 50%, transparent 30%, transparent 0);}
5% {
opacity: 1;
-webkit-mask: linear-gradient(to right, #cccccc 60%, transparent 40%, transparent 0);}
10% {
opacity: 1;
-webkit-mask: linear-gradient(to right, #cccccc 70%, transparent 50%, transparent 0);}
16% {
opacity: 1;-webkit-mask: linear-gradient(to right, #cccccc 80%, transparent 60%, transparent 0);
}
20% {
opacity: 1;-webkit-mask: linear-gradient(to right, #cccccc 90%, transparent 80%, transparent 0);
}
21% {webkit-mask: linear-gradient(to right, #cccccc 100%, transparent 80%, transparent 0);
opacity: 0;}
}
.photo:nth-child(1) {animation-delay: 56s;background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/500973da07ef4d9ebddaefb5b56e6a67.jpg')no-repeat center/cover}
.photo:nth-child(2) {animation-delay: 52s;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/eb7b83e282fe67c0f61cb9bc6fe291b0.jpg)no-repeat center/cover}
.photo:nth-child(3) {animation-delay: 48s;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/fabeed103c30461fa6c3c22fb6613871.jpg)no-repeat center/cover}
.photo:nth-child(4) {animation-delay: 44s;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/1d2b2876ef799bd97d46007a4b773b16.jpg)no-repeat center/cover}
.photo:nth-child(5) {animation-delay: 40s;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/72e068878be4573ae855bd59d8e652f8.jpg)no-repeat center/cover}
.photo:nth-child(6) {animation-delay: 36s;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/05e03cd761ca7e30ed32c1e4a7444253.jpg)no-repeat center/cover}
.photo:nth-child(7) {animation-delay: 32s;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/d280992afe26365c47baf19395b2d76b.jpg)no-repeat center/cover}
.photo:nth-child(8) {animation-delay: 28s;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/687042359a46d37a4d038ee7cfd4c907.jpg)no-repeat center/cover}
.photo:nth-child(9) {animation-delay: 24s;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/9ab52bcf02910ba19e6c32fa2d05d0f0.jpg)no-repeat center/cover}
.photo:nth-child(10){animation-delay: 20s;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/5ec51cf34ba3a5a6e25541b398cd8050.jpg)no-repeat center/cover}
.photo:nth-child(11){animation-delay: 16s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/31/P-1313165-A3FD1305.png)no-repeat center/cover}
.photo:nth-child(12){animation-delay: 12s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/23/P-1312358-897681D1.png)no-repeat center/cover}
.photo:nth-child(13){animation-delay: 8s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/31/P-1313157-AA2D045C.png)no-repeat center/cover}
.photo:nth-child(14) {animation-delay: 4s;background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/7c3e6475ea1b5dd667014af6cc842e35.jpg')no-repeat center/cover}
.photo:nth-child(15) {animation-delay: 0s;background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/77b2110349b12444a35ef146e7064f15.jpg')no-repeat center/cover}
.stop .photo:nth-child(1),
.stop .photo:nth-child(2),
.stop .photo:nth-child(3),
.stop .photo:nth-child(4),
.stop .photo:nth-child(5),
.stop .photo:nth-child(6),
.stop .photo:nth-child(7),
.stop .photo:nth-child(8),
.stop .photo:nth-child(9),
.stop .photo:nth-child(10),
.stop .photo:nth-child(11),
.stop .photo:nth-child(12),
.stop .photo:nth-child(13),
.stop .photo:nth-child(14),
.stop .photo:nth-child(15){animation-play-state: paused;}
</style >
<div id="papa" >
<div id="testImg" >
<pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p>
</div>
<div id="mplayer"></div>
<audio id="aud" src="https://www.qqmc.com/mp3/music330728213.mp3" loop autoplay></audio>
</div>
<script>
(function(){let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0')) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'));
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
var image= document.getElementById("testImg");
mplayer.onclick =function() { aud.paused ? (image.classList.add('stop')):(image.classList.remove('stop'))};
</script> 用遮罩换图片，这个漂亮。欣赏亚伦老师好帖{:4_199:}
页:
[1]