HMTL+CSS 实现图片旋转木马效果

复制代码
  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>
HTML+CSS代码
复制代码

 

 

 

 

网页缩小到50%效果图

 

posted @   伊凡晴天  阅读(326)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛