注册时间2020-5-29
在线时间 小时
- 最后登录
- 1970-1-1
|
楼主 |
发表于 2022-10-10 18:36
|
显示全部楼层
本帖最后由 古來稀 于 2022-10-10 18:39 编辑
<DIV style="LEFT: -232px; WIDTH: 1000px; POSITION: relative; TOP: -100px">
<style>
#papa {
margin: auto;
width: 1000px;
height: 600px;
background: rgba(0,0,0,.45) no-repeat center/cover;
margin-top: 20px;
margin-left: 30px;
box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 10px #880000;
display: grid;
place-items: center;
overflow: hidden;
position: relative;
z-index: 1;
}
#mpic {
position: absolute;
transform: rotateY(0deg);
top: 0px;
left: 0px;
width: 1000px;
height: 600px;
animation: rote 1s linear infinite;
cursor: pointer;
opacity: 1;
}
@keyframes rote {
0%{
background-position: 0% 0%;
}
100%{opacity: 0;
background-position: 0% 1600%;filter:hue-rotate(360deg)
}
}
#mpic1 {
position: absolute;
transform: rotateY(0deg);
top: 0px;
left: 0px;
width: 1000px;
height: 600px;
animation: rotet 3s linear infinite;
cursor: pointer;
opacity: 1;
}
@keyframes mov1 {
from {
width: 0%;
}
to {
width: 100%;
}
}
@keyframes mov2 {
from {
width: 0%;
}
to {
width: 100%;
}
}
#photo img {
width: 1000px;
height: 600px;
position: absolute;
border: 1px solid #000000;
top: 0px;
left: 0px;
filter: contrast(140%)brightness(100%);
opacity: 0;
animation-name: round;
animation-duration: 32s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes round {
0% {
opacity: 1;
clip-path: polygon(0 0, 0 100%, 100% 100%, 0% 100%);
-webkit-transform: translate(0%,0%)scale(1);
}
6% {
opacity: 1;
clip-path: polygon(0 0, 0 100%, 100% 100%, 0 0);
-webkit-transform: translate(0%,0%)scale(1);
}
10% {
opacity: 1;
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
-webkit-transform: translate(0%,0%)scale(1);
}
16% {
opacity: 1;
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
-webkit-transform: translate(0%,0%)scale(1);
}
20% {
opacity: 0;
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
-webkit-transform: translate(0%,0%)scale(1);
}
}
#photo img:nth-child(8) {
animation-delay: 28s;
}
#photo img:nth-child(7) {
animation-delay: 24s;
}
#photo img:nth-child(6) {
animation-delay: 20s;
}
#photo img:nth-child(5) {
animation-delay: 16s;
}
#photo img:nth-child(4) {
animation-delay: 12s;
}
#photo img:nth-child(3) {
animation-delay: 8s;
}
#photo img:nth-child(2) {
animation-delay: 4s;
}
#photo img:nth-child(1) {
animation-delay: 0s;
}
.stop #photo img:nth-child(1) {
animation-play-state: paused;
}
.stop #photo img:nth-child(2) {
animation-play-state: paused;
}
.stop #photo img:nth-child(3) {
animation-play-state: paused;
}
.stop #photo img:nth-child(4) {
animation-play-state: paused;
}
.stop #photo img:nth-child(5) {
animation-play-state: paused;
}
.stop #photo img:nth-child(6) {
animation-play-state: paused;
}
.stop #photo img:nth-child(7) {
animation-play-state: paused;
}
.stop #photo img:nth-child(8) {
animation-play-state: paused;
}
</style>
<div id="papa" data-lr="no"><div id="testImg">
<div id="items"><div id="photo"><img
src="https://pic1.imgdb.cn/item/6343f1d416f2c2beb1260ee8.jpg"> <img
src="https://pic1.imgdb.cn/item/6343f1d416f2c2beb1260ef1.jpg"> <img
src="https://pic1.imgdb.cn/item/6343f1d416f2c2beb1260f19.jpg"> <img
src="https://pic1.imgdb.cn/item/6343f1d416f2c2beb1260f34.jpg"> <img
src="https://pic1.imgdb.cn/item/6343f1d416f2c2beb1260efe.jpg"> <img
src="https://pic1.imgdb.cn/item/6343f1f516f2c2beb1265829.jpg"> <img
src="https://pic1.imgdb.cn/item/6343f1f516f2c2beb1265829.jpg"><img
src="https://pic1.imgdb.cn/item/6343f1f516f2c2beb1265836.jpg"></div>
</td></tr><br><br><br><br><br><br><br><br></div>
|
|