1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>飞飞-地图轮播</title> 7 <!-- CSS内部样式区域开始 --> 8 <style> 9 *{ 10 margin: 0; 11 padding: 0; 12 } 13 body{ 14 /* 透视距离,值越小像素越大,值越大像素越小*/ 15 perspective:5000px; 16 } 17 section{ 18 /* 开启3D显示模式,让子元素保持3D方式显示 */ 19 transform-style: preserve-3d; 20 position: relative; 21 width: 1024px; 22 height: 768px; 23 margin: 500px auto; 24 25 /* background-color: rgba(255, 132, 132,0.3); */ 26 /* 调用动画 27 animation: 动画名称 几秒执行完 匀速 无限循环 28 */ 29 animation: rotate 60s linear infinite; 30 } 31 32 /* 触碰section时,暂停播放动画 */ 33 section:hover { 34 35 animation-play-state: paused; 36 } 37 38 /* 鼠标触碰当前子元素时,比例发生缩放变化 */ 39 section div:nth-child(n):hover{ 40 box-shadow:20px 20px 100px 50px rgba(7, 251, 88, 0.5); 41 /* transform: scale(1.5); */ 42 43 } 44 /* 定制动画样式 */ 45 @keyframes rotate{ 46 0%{ 47 transform: rotateY(0); 48 } 49 100%{ 50 transform: rotateY(360deg); 51 } 52 } 53 54 section div{ 55 transition: 1s; 56 position: absolute; 57 top: 0px; 58 left: 0px; 59 width: 100%; 60 height: 100%; 61 padding: 80px; 62 margin: 50px; 63 border-radius:25px; 64 animation-play-state:running; 65 66 } 67 68 /* 69 设置1-6图片的旋转角度和Z轴距离 70 第1张图片仅放大Z轴距离 71 第2-6张图片旋转Y轴,依次累加60度 72 */ 73 section div:nth-child(1){ 74 background-image: url(./img/WORLD_Flyff.png) ; 75 transform: translateZ(1280px); 76 } 77 section div:nth-child(2){ 78 background-image: url(./img/WORLD_flaris.png); 79 transform: rotateY(60deg) translateZ(1280px); 80 } 81 section div:nth-child(3){ 82 background-image: url(./img//WORLD_saint.png); 83 transform: rotateY(120deg) translateZ(1280px); 84 } 85 section div:nth-child(4){ 86 background-image: url(./img/WORLD_ricis.png); 87 transform: rotateY(180deg) translateZ(1280px); 88 } 89 section div:nth-child(5){ 90 background-image: url(./img/WORLD_darkon12.png); 91 transform: rotateY(240deg) translateZ(1280px); 92 } 93 section div:nth-child(6){ 94 background-image: url(./img/WORLD_darkon3.png); 95 transform: rotateY(300deg) translateZ(1280px); 96 } 97 </style> 98 <!-- CSS内部样式区域结束 --> 99 </head> 100 101 <body> 102 <section> 103 <div></div> 104 <div></div> 105 <div></div> 106 <div></div> 107 <div></div> 108 <div></div> 109 </section> 110 </body> 111 </html>
网页缩小到50%效果图
