<!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. HQL知识点一

    Hive创表语法 create [external] table [if not exists] [db_name.]table_name (col1_name data_type,col2_name ...

  2. 卷积神经网络 CNN

    卷积神经网络与普通的神经网络十分相似:他们都由神经元构成,这些神经元拥有可学习的权重和偏差.每一个神经元接收一些输入,执行点积运算并以非线性可选择地跟随它.整个网络仍然表征一个单个可微分的分数函数:从 ...

  3. openpyxl工具总结

    1.openpyxl使用 涉及到单元格合并.赋值 ''' .格式转换 raw_data create_data boolean Bool uint8 UInt8 int8 Int8 uint16 UI ...

  4. Python基础：八、python基本数据类型

    一.什么是数据类型? 我们人类可以很容易的分清数字与字符的区别,但是计算机并不能,计算机虽然很强大,但从某种角度上来看又很傻,除非你明确告诉它,"1"是数字,"壹&quo ...

  5. robotframework中的清除输入框输入值

    业务需求 当该输入框输入之后,联动某一个按钮高亮,输入框为空的时候,该按钮置灰 需要将输入框清空,清空的办法 1.直接将输入框赋值为${empty} 如:input Text ${loactor} $ ...

  6. next()方法 执行下一个中间件 类似than

    next()方法出现在express框架中的中间件部分,由于node异步的原因,我们需要提供一种机制,当当前中间件工作完成之后,通知下一个中间件执行,因此一个基本的中间件应该是这种形式 var mid ...

  7. 第一次博客作业（初识C++）

    Q1:学习<C++语言程序设计>课程之前,你知道什么是编程吗?谈谈上这门课之前你对编程的理解,以及你对自己编程能力的评估. A1:开始课程之前,我认为编程是这样的:用计算机的语言写一份流程 ...

  8. Spring ＡＯＰ详解

    一.前言 在以前的项目中,很少去关注spring aop的具体实现与理论,只是简单了解了一下什么是aop具体怎么用,看到了一篇博文写得还不错,就转载来学习一下,博文地址:http://www.cnbl ...

  9. Centos7 + Python3.6 + Django + virtualenv + gunicorn + supervisor 环境配置详解

    跟着网上的教程走发现行不通阿!好多都是写个大概,而且每人的环境都是有些许差异的,比如说权限问题阿,等等都会造成安装的失败 说明:本教程在你已经拥有Centos7系统,已经安装好nginx服务器,已经安 ...

  10. PythonStudy——Global关键字

    # 作用:将局部的变量提升为全局变量# 1.全局没有同名变量,直接提升局部变量为全局变量# 2.有同名全局变量,就是统一全局与局部的同名变量# -- 如果局部想改变全局变量的值(发生地址的变化),可以 ...