css动画运用

来源：互联网发布：海康威视网络设置编辑：程序博客网时间：2024/05/18 10:23
外边六张图片旋转，里边4张图片也旋转
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>.box1-1{width: 200px;height: 250px;position: relative;margin: auto;animation: dong 10s linear infinite;transform-style: preserve-3d;/*是否保留3d效果*/margin-top: 100px;}.box2-1{width: 200px;height: 250px;position: relative;margin: auto;animation: hua 10s linear infinite;transform-style: preserve-3d;/*是否保留3d效果*/margin-top: 100px;}img{width: 200px;height: 250px;position: absolute;}.box1-1 img:nth-child(1){transform: rotateY(0deg) translateZ(200px);}.box1-1 img:nth-child(2){transform: rotateY(60deg) translateZ(200px);}.box1-1 img:nth-child(3){transform: rotateY(120deg) translateZ(200px);}.box1-1 img:nth-child(4){transform: rotateY(180deg) translateZ(200px);}.box1-1 img:nth-child(5){transform: rotateY(240deg) translateZ(200px);}.box1-1 img:nth-child(6){transform: rotateY(300deg) translateZ(200px);}.box2-1 img:nth-child(1){transform: rotateX(0deg) translateZ(120px);}.box2-1 img:nth-child(2){transform: rotateX(90deg) translateZ(120px);}.box2-1 img:nth-child(3){transform: rotateX(180deg) translateZ(120px);}.box2-1 img:nth-child(4){transform: rotateX(270deg) translateZ(120px);}@keyframes dong{from{transform: rotateX(0deg);}to{transform: rotateY(360deg);}}@keyframes hua{from{transform:rotateX(360deg);}to{transform: rotateY(0deg);}}</style></head><body><div class="box1-1"><img src="img/teacher.jpg" /><img src="img/teacher.jpg" /><img src="img/teacher.jpg" /><img src="img/teacher.jpg" /><img src="img/teacher.jpg" /><img src="img/teacher.jpg" /><div class="box2-1"><img src="img/teacher.jpg" /><img src="img/teacher.jpg" /><img src="img/teacher.jpg" /><img src="img/teacher.jpg" /></div></div></body></html>
0 0