<!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. 常见Soc平台图形内存管理学习笔记

    硬件编解码.硬件图像scale等过程,是在专有的硬件单元里进行,其使用的内存也是专有的内存,这种内存多是SoC中图形内存.如此方便与硬件加速图形渲染.图像显示.硬件图像加速处理等功能相交互. 上述过程 ...

  2. 网上搜集python面试题（更新中......）

    武Sir博客拿的面试题,答案都是自己写的,多有不足,请多多指教.更新中...... 1.为什么学习Python? a.写起来快,看起来明白.作为通用性的语言,除了一些对性能要求很高的场合,几乎什么都能 ...

  3. Vue基础之计算属性

    适用场景 设想一个场景,你需要得到一个复杂运算/逻辑的返回值,利用模板内的表达又过长且难以阅读和维护,这时计算属性就可以很好的解决你的问题.看下面的例子: <!DOCTYPE html> ...

  4. 在java中，异常抛出点后程序的执行情况

    1.在throw语句,即自定义的抛出异常语句后面的代码并不会执行,会提示错误,编译器并不可以正常编译. 2.若在一个条件语句中抛出一个异常,程序可以编译,但不会运行(dead code). 3.若在一 ...

  5. Hello2实例的分析

    首先: java EE 上的hello2项目是一个部署在glass fish上的开发源码的java web项目,在终端通过命令行使用maven进行打包成.war文件,最后部署到相关的glass fis ...

  6. 关于crontab

    crontab是一个linux系统自带的定时执行任务的功能,有两种方法可以实现 1: 使用命令 crontab -e 然后直接编辑定时脚本,实际是编辑/var/spool/cron 目录下,一个和用户 ...

  7. 软件可维护性的影响因素&如何提升

    影响因素: 1.可理解性 2.可测试性 3.可修改性 4.可移植性 5.可重用性 如何提升: 1.建立明确的软件质量目标2.使用先进的软件开发技术和工具3.建立明确的质量保证4.选择可维护的语言5.改 ...

  8. gtest 参数化

    前言: 在测试用例中,我们时常需要传给被测函数不同的值,gtest为我们提供了简便的方法,可以使我们能够灵活的进行参数化测试. 步骤: 1.创建一个类,继承testing::TestWithParam ...

  9. JNI加载hal的dlopen()相关操作

    1.函数集合 #include <dlfcn.h> void *dlopen(const char *filename, int flag); char *dlerror(void); v ...

  10. sql语句实例练习

    1.最晚入职员工查询 select * from employees where hire_date = (select max(hire_date) from employees)   2.倒数第三 ...