<!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. 2018 CCPC 网络赛 Buy and Resell

    The Power Cube is used as a stash of Exotic Power. There are n cities numbered 1,2,…,n where allowed ...

  2. react native 键盘弹起时必须点击两次才能成功

    在scrollview或者flatlist上设置一个参数,即可解决 keyboardShouldPersistTaps="handled"

  3. Unity UGUI Layout自动排版组件用法介绍

    Unity UGUI布局组件 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享 ...

  4. npm install详解

    package.json中dependencies和devDependencies的部分都会被安装,区别在于前者用于生产环境,后者用于开发环境-g 表示全局安装,通常用于安装脚手架等工具–save(- ...

  5. 搭建opencv javaweb项目

    搭建opencv javaweb项目 用到的技术maven.git.ssm.opencv.javaweb 搭建opencv javaweb项目时,踩了很多坑:怀疑过spring,想过python,最后 ...

  6. Map的嵌套 练习

    Map的嵌套   练习 利用迭代和增强for循环的两种方式实现如下效果 package cn.ccc; import java.util.HashMap;import java.util.Iterat ...

  7. IntelliJ IDEA 使用教程

    在IDEA当中,Project和  Module是作为两个不同的概念,对项目结构是重要意义的 eclipse和idea的区别 IDEA里面的子工程要称为Module就是模块化的概念,作为聚合工程亦或普 ...

  8. L1-046 整除光棍

    这里所谓的“光棍”,并不是指单身汪啦~ 说的是全部由1组成的数字,比如1.11.111.1111等.传说任何一个光棍都能被一个不以5结尾的奇数整除.比如,111111就可以被13整除. 现在,你的程序 ...

  9. APIPA

    自动专用IP地址(Automatic Private IP Address,APIPA)是当客户端无法从DHCP服务器中获得IP地址时自动配置的地址.IPv4地址前缀169.254/16已经被IANA ...

  10. 汇编实验1（又是作业emm）

    实验任务:学会使用debug 1.使用Debug,将程序段写入内存: 机器码: b8 20 4e 05 16 14 bb 00 20 01 d8 89 c3 01 d8 b8 1a 00 bb 26 ...