注册时间2015-8-30
在线时间 小时
- 最后登录
- 1970-1-1
|
楼主 |
发表于 2022-10-7 14:50
|
显示全部楼层
[i=s] 本帖最后由 一师 于 2025-10-17 11:08 编辑 [/i]
code].wall{width:970px;height: 600px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;z-index: 1;
}
div.book-wrap {width: 420px;
height:350px;
position: relative;
left: 500px;
top: 140px;
transform: rotatez(4deg)rotateX(24deg);
transform-style: preserve-3d;}
div.page { width: 100%;
height: 100%;
position: absolute;
border-radius: 2px;border: 15px solid #cccccc;
transform-origin: left;display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 0px 0px 2px #000000;
background-size:100% 100%;}
div.book-content {animation: roll 22s 22s 1;background-image: url(https://s1.ax1x.com/2022/10/05/x19mNj.jpg)}
div.book-content1{animation: roll 4s 18s 2;background-image: url(https://s1.ax1x.com/2022/10/05/x19n4s.jpg)}
div.book-content2{animation: roll 6s 16s infinite;background-image: url(https://s1.ax1x.com/2022/10/05/x19KCn.jpg)}
div.book-content3{animation: roll 8s 14s 1;background-image: url(https://s1.ax1x.com/2022/10/05/x19M3q.jpg)}
div.book-content4{animation: roll 10s 12s infinite;background-image: url(https://s1.ax1x.com/2022/10/05/x19Qg0.jpg)}
div.book-content5{animation: roll 12s 10s 1;background-image: url(https://s1.ax1x.com/2022/10/05/x193uT.jpg)}
div.book-content6{animation: roll 14s 8s 2;background-image: url(https://s1.ax1x.com/2022/10/05/x198DU.jpg)}
div.book-content7{animation: roll 16s 6s infinite;background-image: url(https://s1.ax1x.com/2022/10/05/x19GbF.jpg)}
div.book-content8{animation: roll 18s 4s 2;background-image: url(https://s1.ax1x.com/2022/10/05/x19YE4.jpg)}
div.book-content9{animation: roll 20s 2s infinite;background-image: url(https://s1.ax1x.com/2022/10/05/x1CvYd.jpg)}
.stop div.book-content {animation: roll 22s 22s 1;animation-play-state: paused;}
.stop div.book-content1{animation: roll 4s 18s 2;animation-play-state: paused;}
.stop div.book-content2{animation: roll 6s 16s infinite;animation-play-state: paused;}
.stop div.book-content3{animation: roll 8s 14s 1;animation-play-state: paused;}
.stop div.book-content4{animation: roll 10s 12s infinite;animation-play-state: paused;}
.stop div.book-content5{animation: roll 12s 10s 1;animation-play-state: paused;}
.stop div.book-content6{animation: roll 14s 8s 2;animation-play-state: paused;}
.stop div.book-content7{animation: roll 16s 6s infinite;animation-play-state: paused;}
.stop div.book-content8{animation: roll 18s 4s 2;animation-play-state: paused;}
.stop div.book-content9{animation: roll 20s 2s infinite;animation-play-state: paused;}
@keyframes roll {
0% {transform: rotateY(0deg);opacity: 1;}
4% {transform: rotateY(-8deg);opacity: 1;}
30% {transform: rotateY(-170deg);opacity: 1;}
40% {transform: rotateY(-178deg);opacity: 1;}
50% {transform: rotateY(-180deg);opacity: 1;}
100% {transform: rotateY(-180deg);opacity: 1;}
}
div#midground{width:970px;height: 600px;
z-index: 1;
animation: cc 3s linear infinite;
}
.stop div#midground {animation-play-state: paused;}
@keyframes cc {0% {opacity: 1;background: radial-gra**nt(ellipse 100% 100% at 50% 50%, rgba(21, 4, 255, 0) 25%,#FB0505 75%);filter:hue-rotate(0deg)contrast(150%)brightness(80%);}
50% {opacity: 1;background: radial-gra**nt(ellipse 100% 100% at 50% 50%, rgba(21, 4, 255, 0) 29%,#0521FB 85%);filter:hue-rotate(0deg)contrast(140%)brightness(110%);}
100% {opacity:1 ;background: radial-gra**nt(ellipse 100% 100% at 50% 50%, rgba(8, 237, 73, 0) 29%,#05FB51 85%);filter:hue-rotate(0deg)contrast(120%)brightness(100%);}
}
div#foreground{
font-weight: bold;
margin: 0px 0px;
z-index: 5;
animation: aitf 0.15s linear infinite;
}
.stop div#foreground{animation-play-state: paused;}
@keyframes aitf {
0% { filter:hue-rotate(360deg)drop-shadow(0 0 38px #000080)contrast(120%)brightness(240%) ; }
100% {filter:hue-rotate(0deg)drop-shadow(0 0 18px #fff000)contrast(120%)brightness(140%) ; }
}
div#top{width: 970px;height: 600px;
background: url("http://www.100sucai.com/online/4234/images/stars.png")0 0/90% 90%;
z-index: 4;opacity: 1;
animation: da 50s linear infinite;
}
.stop div#top{animation-play-state: paused;}
@keyframes da {
0%{
background-position: 200% 0;filter:hue-rotate(0deg)contrast(180%)brightness(340%);
}
100%{
background-position: 0 600%;filter:hue-rotate(0deg)contrast(180%)brightness(240%);
}
}
div#cp{width: 150px;height: 150px;
border:2px solid #ffffff; -webkit-mask: radial-gra**nt(transparent 10px,red 0); border-radius: 50%; cursor: pointer;220px;background:url(http://pan.yinhuabbs.cn/view.php/a60d7a6c4172d96080d4e23d80d9af48.png)0 0/100% 100%,url(https://s1.ax1x.com/2022/09/08/vqu2H1.jpg)0px 0px/160% 100%;
z-index: 4; margin: 420px 50px;
animation: pp 10s linear infinite;
}
.stop div#cp{
animation-play-state: paused;
}
@keyframes pp {0% { transform: rotateY(0deg)rotate(-360deg);filter: hue-rotate(180deg)brightness(150%)drop-shadow(0 0 10px #00ff00)}
}
div#plane {position: absolute;left: 450px;top: 40px;width: 400px;height: 400px;animation: move 0.12s linear infinite;background: url
("http://pan.yinhuabbs.cn/view.php/ee1f2925815538fb07ef4afd9fda49d8.png")0 0/20% 20%;z-index: 3;
}
.stop div#plane{animation-play-state: paused;}
@keyframes move {0%{opacity: 1;transform:translate(0%,0%)scale(1);}
99% {opacity: 1;filter:hue-rotate(360deg);transform:translate(0%,0%)scale(2);}
100%{opacity: 0;filter:hue-rotate(0deg);transform:translate(0%,0%)scale(3);}
}
[/code] |
|
发表于 2022-10-7 07:47
