zoukankan      html  css  js  c++  java
  • 前端学习笔记 day08 旋转轮播图

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            body {
                transition: all 0.4s;
                perspective: 1000px;
            }
            .father {
                width: 300px;
                height: 200px;
                background: url("images/1.jpg") no-repeat;
                position: relative;
                margin: 200px auto;
                transform-style: preserve-3d;
                /*transition: all 5s linear;*/
                animation: go 3s linear 0s infinite;
            }
            .father .son {
                width: 100%;
                height: 100%;
                background: url("images/2.jpg") no-repeat;
                background-size: cover;
                position: absolute;
                top: 0;
                left: 0;
            }
            .father .son:nth-child(1) {
                transform: rotateY(0deg) translateZ(300px);
    
            }
            .father .son:nth-child(2) {
                transform: rotateY(60deg) translateZ(300px);
    
            }
            .father .son:nth-child(3) {
                transform: rotateY(120deg) translateZ(300px);
    
            }
            .father .son:nth-child(4) {
                transform: rotateY(180deg) translateZ(300px);
    
            }
            .father .son:nth-child(5) {
                transform: rotateY(240deg) translateZ(300px);
    
            }
            .father .son:nth-child(6) {
                transform: rotateY(300deg) translateZ(300px);
    
            }
    
            /*.father:hover {
                transform: rotateY(360deg);
    
            }*/
            @keyframes go {
                0% {
                    transform: rotateY(60deg);
                }
                25% {
                    transform: rotateY(120deg);
                }
                50% {
                    transform: rotateY(180deg);
                }
                75% {
                    transform: rotateY(240deg);
                }
                100% {
                    transform: rotateY(300deg);
                }
            }
            .father:hover {
                animation-play-state: paused;
            }
    
        </style>
    </head>
    <body>
        <div class="father">
            <div class="son"></div>
            <div class="son"></div>
            <div class="son"></div>
            <div class="son"></div>
            <div class="son"></div>
            <div class="son"></div>
        </div>
    </body>
    </html>

    运行结果:

  • 相关阅读:
    IDEA 代码统计插件使用
    四种遍历ConcurrentHashMap的方式
    Java中多线程并发体系知识点汇总
    程序员高效工具列表
    js数组与字符串的相互转换方法
    ajax使用json数据格式--无效的 JSON 基元
    for和$.each 的记录
    表单提交模型记录
    /Date(1512551901709+0800)/转换
    jsonp的使用记录
  • 原文地址:https://www.cnblogs.com/xuanxuanlove/p/10116084.html
Copyright © 2011-2022 走看看