<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>3D轮播图</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        body{

            background: url("images/jacky/bg.jpg") no-repeat;

            background-size:cover;

            overflow: hidden;

        }

        ul{

            width: 200px;

            height: 200px;

            /*background-color: red;*/

            position: absolute;

            bottom: 100px;

            left: 50%;

            margin-left:-100px;

            transform-style: preserve-3d;

            /*transform: rotateX(-10deg);*/

            animation: sport 6s linear 0s infinite normal;

        }

        ul li{

            list-style: none;

            width: 200px;

            height: 200px;

            font-size: 60px;

            text-align: center;

            line-height: 200px;

            position: absolute;

            left: 0;

            top: 0;

            background-color: black;

        }

        ul li:nth-child(1){

            transform: rotateY(60deg) translateZ(200px);

        }

        ul li:nth-child(2){

            transform: rotateY(120deg) translateZ(200px);

        }

        ul li:nth-child(3){

            transform: rotateY(180deg) translateZ(200px);

        }

        ul li:nth-child(4){

            transform: rotateY(240deg) translateZ(200px);

        }

        ul li:nth-child(5){

            transform: rotateY(300deg) translateZ(200px);

        }

        ul li:nth-child(6){

            transform: rotateY(360deg) translateZ(200px);

        }

        ul li img{

            width: 200px;

            height: 200px;

            border: 5px solid skyblue;

            box-sizing: border-box;

        }

        ul:hover{

            animation-play-state: paused;

        }

        ul:hover li img{

            opacity: 0.5;

        }

        ul li:hover img{

            opacity: 1;

        }

        @keyframes sport {

            from{

                /*

                注意点:

                1.动画中如果有和默认样式中同名的属性, 会覆盖默认样式中同名的属性

                2.在编写动画的时候, 固定不变的值写在前面, 需要变化的值写在后面

                */

                transform: rotateX(-10deg) rotateY(0deg);

            }

            to{

                transform: rotateX(-10deg) rotateY(360deg);

            }

        }

        .heart{

            width: 173px;

            height: 157px;

            position: absolute;

            left: 100px;

            bottom: 100px;

            animation: move 10s linear 0s infinite normal;

        }

        @keyframes move {

            0%{

                left: 100px;

                bottom: 100px;

                opacity: 1;

            }

            20%{

                left: 300px;

                bottom: 300px;

                opacity: 0;

            }

            40%{

                left: 500px;

                bottom: 500px;

                opacity: 1;

            }

            60%{

                left: 800px;

                bottom: 300px;

                opacity: 0;

            }

            80%{

                left: 1200px;

                bottom: 100px;

                opacity: 1;

            }

            100%{

                left: 800px;

                bottom: -200px;

            }

        }

    </style>

</head>

<body>

<ul>

    <li><img src="data:images/jacky/1.png" alt=""></li>

    <li><img src="data:images/jacky/2.jpg" alt=""></li>

    <li><img src="data:images/jacky/3.jpg" alt=""></li>

    <li><img src="data:images/jacky/4.gif" alt=""></li>

    <li><img src="data:images/jacky/5.jpg" alt=""></li>

    <li><img src="data:images/jacky/6.jpg" alt=""></li>

</ul>

<img src="data:images/jacky/xin.png" class="heart">

</body>

</html>

效果如下：

CSS3之3D轮播图的更多相关文章

  1. 利用css3实现3D轮播图

    动画实现主要利用了z-index将层级关系改变,从而实现了焦点图的效果:css3属性 transform rotate 来实现图片的动画效果 .transition实现过度动画! * { margin ...

  2. 3d轮播图（另一种方式，可以实现的功能更为强大也更为灵活，简单一句话，比酷狗优酷的炫）

    前不久我做了一个3d仿酷狗的轮播图,用的技术原理就是简单的jquery遍历+css样式读写. 这次呢,我们换一种思路(呵呵其实换汤不换药),看到上次那个轮播吗?你有没有发现用jquery的animat ...

  3. 3d轮播图——类似酷狗的轮播

    说到轮播图,其实只要是跟web开发相关的无论是前端后端应该都不陌生,各种各样的轮播图,从以前的单纯的平面山水画遮盖滑动或滚动,到Jquery的animate甚至是h5+css3,各种炫酷的轮播图更是层 ...

  4. CSS3+JS切割轮播图

    以下说明数据,是指有4张图片的轮播图,分别切割成4张. 首先,做成单张切换的立体效果,即通过旋转,确定四张图片的位置,分别是一个立方体的上下前后的图片翻转移动角度. .box ul li:nth-ch ...

  5. 小程序实现非swiper组件的自定义伪3D轮播图

    效果如下: 我用了很笨的方法实现的,大致就是: 1.当前点击的div(view)如果前后都有内容,那么,当前div(view)就设置到中间,前一个就设置到左边,前一个的前面所有全部设置到最左边,后面一 ...

  6. 微信小程序 - 3d轮播图组件(基础)

    <!-- 目前仅支持data数据源来自banner,请看测试案例 ################ 以上三种形式轮播: 1. basic 2. 3d 3. book basic即普通轮播 3d即 ...

  7. 微信小程序3D轮播图

    <!-- 轮播图 --> <swiper previous-margin='50px' next-margin='50px' bindchange="swiperChang ...

  8. 插件-3D轮播图

    先上效果图 查看实例点击 这里  这个栗子中,可以选择展示 5 张 或者展示 3 张,即使是只有一个slide,也可以完成布局,正常轮播,麻麻再也不用怕只有4个slid而不能用这种轮播啦! 本栗实现原 ...

  9. CSS3 实现简单轮播图

    用css3动画实现图片切换效果,原理还是改变left值.只有最简单的自动播放功能,切换后短时间静止,通过最后的位置克隆第一张图片,实现无缝切换. html结构 <div id="con ...

随机推荐

  1. JDK1.8环境下依然报错 Unsupported major.minor version 52.0

    JDK1.8环境下依然报错 Unsupported major.minor version 52.0 在配置elasticsearch-rtf全文搜索引擎时,按照Github上项目readme.md来 ...

  2. [ 随手记6 ] C/C++ 形参、实参、按值传参、指针传参、引用传参

    个人原创: 1. 形参:形式上的参数,一般多在函数声明.函数定义的参数上: 2. 实参:实体参数,有实际的值,在运算上被循环使用的值: 3. 按值传参:按值,就是把实际的值传给函数内部: 4. 指针传 ...

  3. 微信小程序之点击列表的item带参数跳转界面

    1.在js文件里写个界面跳转的事件处理函数gotableinfo,var index = parseInt(e.currentTarget.dataset.index); 为获取当前点击列表的下脚标, ...

  4. ionic2简单分析

    Angular2是一个全新的框架,它从ReactJS以及其他web移动框架借鉴了不少经验和优点,巨大的改进使得开 发体验和性能已经超越了Angular1,而且Ionic2无论是从UI交互效果和跨平台的 ...

  5. 改变highCharts的X轴和Y轴的数据刻度

    xAxis:{ tickPixelInterval:10 //自行调整X轴刻度的间距}, yAxis:{ lineWidth:1, //Y轴默认不显示Y轴线,添加一个轴线的宽度就可以显示出来 tick ...

  6. Lock详解

    在JDK1.5后,并发包里新增了Lock接口以及其实现类来实现锁功能,它提供了与synchronized关键字类似的锁功能,但它需要手动开启.关闭锁.虽然看起来没有synchronized方便,但它可 ...

  7. tornado--启动

    tornado--启动 from tornado import web from tornado import ioloop from tornado.httpserver import HTTPSe ...

  8. XML基础学习

    XML 信息传输工具 标签未被预定义 具有自我描述性 W3C的推荐标准 XML  HTML的差异 XML:传输 存储数据 HTML:显示数据 树结构 <root> <child> ...

  9. c# 枚举安卓系统中所有目录及文件名

    using Android.App; using Android.Widget; using Android.OS; using System.Runtime.InteropServices; nam ...

  10. Vue2.5基础

    1.1 创建第一个Vue实例 官方网站:https://cn.vuejs.org 学习 --> 安装 刚开始学习Vue,使用最简单的安装方式,直接用<script>引入 我们下载开发 ...