CSS3 3D切割轮播图

一、效果图

二、源码

<!DOCTYPE html><html lang="en"><head>   <meta charset="UTF-8">   <title>CSS3 3D切割轮播图</title>   <style>      * {margin: 0; padding: 0;}      ul {list-style: none;}      html, body {         height: 100%;      }      body {         margin: 0;         margin: 0;         padding: 0;         background: #ffa5a5;         background: linear-gradient(to bottom, #ffa5a5 0%,#ffd3d3 100%);      }

      .chest {         width: 500px;         height: 500px;         margin: 100px auto;         position: relative;         margin-left: 800px;      }

      .heart {         position: absolute;         z-index: 2;         background: linear-gradient(-90deg, #F50A45 0%, #d5093c 40%);         animation: beat 0.7s ease 0s infinite normal;      }

      .heart.center {         background: linear-gradient(-45deg, #B80734 0%, #d5093c 40%);      }

      .heart.top {         z-index: 3;      }

      .side {         top: 100px;         width: 220px;         height: 220px;         border-radius: 220px;      }

      .center {         width: 210px;         height: 210px;         bottom: 100px;         left: 145px;         font-size: 0;         text-indent: -9999px;      }

      .left {         left: 62px;      }

      .right {         right: 62px;      }

      @keyframes beat {         0% {            transform: scale(1) rotate(225deg);            box-shadow:0 0 40px #d5093c;         }

         50% {            transform: scale(1.1) rotate(225deg);            box-shadow:0 0 70px #d5093c;         }

         100% {            transform: scale(1) rotate(225deg);            box-shadow:0 0 40px #d5093c;         }      }      .cut {         float: left;         width: 560px;         height: 300px;         margin: 50px auto;         margin-left: 200px;         margin-top: 100px;         /**/         position: relative;         border-radius: 15px;         background-image: linear-gradient(90deg, #ff7c6e,#FF95B7, #F1FF83, #CCFF69, #EDBCFF, #41eee1);      }

      .prev, .next {         display: block;         width: 60px;         height: 60px;         text-align: center;         line-height: 60px;         margin-top: -30px;         font-size: 40px;         color: #FFF;         text-decoration: none;         /**/         position: absolute;         top: 50%;      }      .next {         right: 0;      }      .cut li {         width: 56px;         height: 100%;         /**/         position: absolute;         top: 0;         transition: all 1s ease-in-out;         transform-style: preserve-3d;         -webkit-background-size:cover;

      }      .cut li div {         width: 100%;         height: 100%;         border-radius: 50px;         position: absolute;         top: 0;         left: 0;      }      .cut li div:nth-child(1) {         background: url("imggu/1.jpg");         /*background: url(imggu/12_02.png);*/         transform: rotateX(0deg) translateZ(150px);         background-size:cover;      }      .cut li div:nth-child(2) {         background: url(imggu/3.jpg);         transform: rotateX(-90deg) translateZ(150px);         background-size:cover;      }      .cut li div:nth-child(3) {         background: url(imggu/11_02.png);         transform: rotateX(-180deg) translateZ(150px);         background-size:cover;      }      .cut li div:nth-child(4) {         background: url(imggu/7_02.png);         transform: rotateX(-270deg) translateZ(150px);         background-size:cover;      }   </style>    <script src="js/jquery-1.11.3.min.js"></script>        <script type="text/javascript">            $(function() {                $("li").each(function(index,ele) {                $(this).css({"left":560/10*index,"transition-delay":index*0.2+"s"});                $(this).children("div").css("backgroundPosition",-560/10*index+"px 0");             })             var num = 0;             $(".next").on("click",function() {                num++;                $("li").css("transform","rotateX("+num*90+"deg)");             })             $(".prev").on("click",function() {                num--;                $("li").css("transform","rotateX("+num*90+"deg)");             })            })    </script></head><body>   <div class="cut">      <ul>         <li>               <div></div>               <div></div>               <div></div>               <div></div>

         </li>         <li>               <div></div>               <div></div>               <div></div>               <div></div>

         </li>         <li>               <div></div>               <div></div>               <div></div>               <div></div>

         </li>         <li>               <div></div>               <div></div>               <div></div>               <div></div>

         </li>         <li>               <div></div>               <div></div>               <div></div>               <div></div>

         </li>         <li>            <div></div>            <div></div>            <div></div>            <div></div>

         </li>         <li>            <div></div>            <div></div>            <div></div>            <div></div>

         </li>         <li>            <div></div>            <div></div>            <div></div>            <div></div>

         </li>         <li>            <div></div>            <div></div>            <div></div>            <div></div>

         </li>         <li>            <div></div>            <div></div>            <div></div>            <div></div>

         </li>      </ul>      <a href="javascript:;" class="prev">&lt;</a>      <a href="javascript:;" class="next">&gt;</a>   </div>   <div class="chest">      <div class="heart left side top"></div>      <div class="heart center">&hearts;</div>      <div class="heart right side"></div>   </div></body></html>

转载于:https://www.cnblogs.com/zlinger/p/9569775.html

CSS3 3D切割轮播图相关推荐

CSS3+JS切割轮播图
以下说明数据,是指有4张图片的轮播图,分别切割成4张. 首先,做成单张切换的立体效果,即通过旋转,确定四张图片的位置,分别是一个立方体的上下前后的图片翻转移动角度. .box ul li:nth-ch ...
html3d轮播图片效果,CSS3,3D效果轮播图
---恢复内遇新是直朋能到分览支体调容开始--- 大家还的候通现端数是制这.效合应近环大过这业据记得我昨天的3D拖拽立方体吗??我昨天还说过css还可以做轮播图,所以咱们今天就写一下,css的轮在重说 ...
html3d轮播图片效果,炫酷3D透视轮播图特效
这是一款炫酷js和CSS3 3D透视轮播图特效.该3D轮播图通过CSS3制作图片的3D透视效果,并使用js来使轮播图于用户进行交互,效果非常炫酷. 使用方法在页面中引入style.css和index ...
html图片轮播思路,css3如何实现轮播图？css3实现轮播图片的方法
我们在网页上经常会看到有一块位置会有很多的图片来回切换,这就是轮播图,轮播图的出现,让重要的信息可以在一个位置显现,那么,轮播图是如何实现的呢?轮播图的实现用js或者css都可以,本篇文章就来给大家介 ...
html5carousel图片轮播,jquery 3d Carousel轮播图插件
jQuery-Waterwheel-Carousel是一款jquery 3d Carousel轮播图插件.该jquery Carousel轮播图插件兼容ie8浏览器,提供丰富的参数和API方法由于控制 ...
html百叶窗切换效果,纯CSS3百叶窗式切换轮播图特效
这是一款使用纯CSS3制作的百叶窗式切换轮播图特效.该特效使用背景图片来制作,在轮播图切换时,通过一组div元素来制作百叶窗效果,非常的炫酷. 使用方法 HTML结构该轮播图特效中使用了6张背景图片 ...
纯css3实现无缝轮播图效果
主要就是利用css3中的动画了,看完整实现代码如下: <!DOCTYPE html> <html lang="en"> <head><me ...
网页制作使用CSS样式制作轮播教程,静态网页设计与开发 1.案例——CSS3制作图片轮播图（4）使用纯CSS3代码实现简单的图片轮播——分步骤实现.docx...
使用纯CSS3代码实现简单的图片轮播设计思路: 以5张图片为例: 1.基本布局: 通过设置每张图片的尺寸和父容器的尺寸,从而将5张图片横向并排放入一个div容器(#photos)内.所有图片设置统一 ...
CSS3制作立方体轮播图
效果图实现原理使用一个无序列表ul,下有六个子元素li,代表长方体的六个面. 主要用到的属性: transform: rotateX(n deg) translateZ(n px) 让 ...

CSS3 3D切割轮播图

一、效果图

二、源码

CSS3 3D切割轮播图相关推荐

最新文章

热门文章