<!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. docker1

    Docker笔记 1, https://gitlab-demo.com Docker官网:https://docs.docker.com/install/overview/ 有两个版本: Docker ...

  2. ssh操作服务器

    # -*- coding: utf-8 -*- """ Created on Wed Mar 20 10:15:16 2019 @author: Kuma 1. ssh连 ...

  3. Spring Boot相关～

    Introducing Spring Boot Spring Boot makes it easy to create stand-alone, production-grade Spring-bas ...

  4. Python入门 （一）

    本文是个人python学习笔记,学习资料为廖雪峰python教程,如需更多内容,请移步廖老师官方网站. 一 安装 官网下载安装包安装,安装好之后,在命令提示符输入python进入Python交互模式: ...

  5. Bartender标签传参与打印

    在VS中添加bartender的COM组件引用后(一定要添加,否则会提示找不到BarTender.Application): /// <summary> /// Bartender模板打印 ...

  6. 利用Python代码编写计算器小程序

    import tkinter import tkinter.messagebox import math class JSQ: def __init__(self): #创建主界面 self.root ...

  7. until和while 判断网段IP地址是否存在

    1.使用until和while分别实现192.168.0.0/24网段内,地址是否能够ping通,若ping通则输出"success!",若ping不通则输出"fail! ...

  8. 关于nginx安装、iptables设置和查看端口指令netstat/ss

    实验1: Nginx介绍 Nginx("engine x")是一款是由俄罗斯的程序设计师Igor Sysoev所开发高性能的 Web和 反向代理 服务器,也是一个 IMAP/POP ...

  9. Android Historian安装使用

    1.先安装docker 2.安装Historian,可使用如下docker镜像: sudo docker run -p 9000:9999 registry.cn-hangzhou.aliyuncs. ...

  10. Java技术学习之影响MySQL性能的配置参数

    本文将介绍MySQL参数的五大类设置,平时我们一般都很少碰它们,在进行MySQL性能调优和故障诊断时这些参数还是非常有用的. (一)连接连接通常来自Web服务器,下面列出了一些与连接有关的参数,以及该 ...