電商項目（中）

時間 2019-11-17

標籤項目简体版

原文原文鏈接

電商項目（中）javascript

旋轉的圖片：css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dashu</title>
    <style>
     div {
         width: 250px;
         height: 170px;
         border: 1px solid pink;
         margin: 200px auto;
         position: relative;
     }
        div img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            transition: all 0.6s;
            transform-origin: top right;
        }
     div:hover img:nth-child(1){
         transform: rotate(60deg);
     }
     div:hover img:nth-child(2){
         transform: rotate(120deg);
     }
     div:hover img:nth-child(3){
         transform: rotate(180deg);
     }
     div:hover img:nth-child(4){
         transform: rotate(240deg);
     }
     div:hover img:nth-child(5){
         transform: rotate(300deg);
     }
     div:hover img:nth-child(6){
         transform: rotate(360deg);
     }
    </style>
</head>
<body>
<div>
    <img src="images/6.jpg" alt=""/>
    <img src="images/5.jpg" alt=""/>
    <img src="images/4.jpg" alt=""/>
    <img src="images/3.jpg" alt=""/>
    <img src="images/2.jpg" alt=""/>
    <img src="images/1.jpg" alt=""/>
</div>
</body>
</html>

動畫效果：html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>dashu</title>
    <link rel="shortcut icon" href="dd.ico"  type="image/x-icon"/>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #ff3040;
        }
        div {
            width: 440px;
            margin: 100px auto;
        }
        div img {
            transition: all 1s;
        }
        div img:nth-child(1) {
            transform: translate(200px,-100px) rotate(60deg);
        }
        div img:nth-child(2) {
            transform: translate(-300px,-150px) rotate(90deg);
        }
        div img:nth-child(3) {
              transform: translate(-100px,180px) rotate(-100deg);
        }
        div img:nth-child(4) {
            transform: translate(-80px,80px) rotate(125deg);
        }
        div img:nth-child(5) {
            transform: translate(200px,-100px) rotate(150deg);
        }
        div img:nth-child(6) {
            transform: translate(180px,180px) rotate(180deg);
        }
        div img:nth-child(7) {
            transform: translate(120px,120px) rotate(120deg);
        }
        div img:nth-child(8) {
            transform: translate(130px,140px) rotate(150deg);
        }
        div img:nth-child(9) {
            transform: translate(500px,-305px) rotate(390deg);
        }
        div:hover img {
            transform: none;
        }
    </style>
</head>
<body>
<div>
    <img src="images/1.png" alt=""/>
    <img src="images/2.png" alt=""/>
    <img src="images/3.png" alt=""/>
    <img src="images/4.png" alt=""/>
    <img src="images/5.png" alt=""/>
    <img src="images/6.png" alt=""/>
    <img src="images/7.png" alt=""/>
    <img src="images/8.png" alt=""/>
    <img src="images/9.png" alt=""/>
</div>
</body>
</html>

// 導航
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3d導航</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      list-style: none;
      margin: 90px auto;
      width: 800px;
    }
    ul li {
      width: 120px;
      height: 50px;
      float: left;
      position: relative;
      transform-style:preserve-3d; 
      transition: transform 1s;     
    }
    li a {
      position: absolute;
      text-decoration: none;
      text-align: center; 
      line-height: 50px;
      color: #fff;
      text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    
    li a:first-child {
      transform: translateZ(25px);
      background-color: #ff5544;
    }
    li a:last-child {
      background-color: skyblue;
      transform: rotateX(-90deg) translateZ( 25px );
    }
    li:hover {
      transform: rotateX(90deg);
    }
  </style>
</head>
<body>
  <ul>
    <li>
     <a href="#">1</a>
     <a href="#">2</a>
    </li>
    <li>
     <a href="#">1</a>
     <a href="#">2</a>
    </li><li>
     <a href="#">1</a>
     <a href="#">2</a>
    </li><li>
     <a href="#">1</a>
     <a href="#">2</a>
    </li><li>
     <a href="#">1</a>
     <a href="#">2</a>
    </li>
  </ul>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dashu</title>
    <style>
        section {
            width: 450px;
            height: 300px;
            border: 1px solid #000;
            margin: 100px auto;
            background: url(images/3.jpg) no-repeat;
            position: relative;
            perspective: 1000px;
        }
        .door-l, .door-r {
            position: absolute;
            top: 0;
            width: 50%;
            height: 100%;
            background-color: pink;
            transition: all 1s; 
            background: url(images/bg.png);


        }
        .door-l {
            left: 0;
            border-right: 1px solid #000;
            transform-origin: left;
        }
        .door-r {
            right: 0;
            left: 1px solid #000;
            transform-origin: right;
        }
        .door-l::before, .door-r::before {  
            content: '';
            position: absolute;
            top: 50%;
            width: 20px;
            height: 20px;
            border: 1px solid #000;
            border-radius: 50%; 
            transform：translateY(-50%); 
        }
        .door-l::before {
            right: 5px;
        }
        .door-r::before {
            left: 5px;
        }
 
        section:hover .door-l {
            transform: rotateY(-130deg); 
        }
        section:hover .door-r {
            transform: rotateY(130deg);
        }
    </style>
</head>
<body>
<section>
    <div class="door-l"></div>
    <div class="door-r"></div>
</section>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dashu</title>
    <style>
        div {
            width: 224px;
            height: 224px;
            margin: 100px auto;
            position: relative;
        }
        div img {
            position: absolute;
            top: 0;
            left: 0;
            transition: all 1s;

        }
        div img:first-child {
            z-index: 1;
            backface-visibility: hidden;
        }
        div:hover img {
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
<div>
    <img src="images/qian.svg" alt=""/>
    <img src="images/hou.svg" alt=""/>
</div>
</body>
</html>

旋轉：java

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>dashu</title>
    <style>
        body {
            perspective: 500px;
        }

        div {
            width: 100px;
            height: 100px;
            background-color: #ff3040;
            transition: all 1s;
            margin: 200px auto;
            transform-origin: 50px 50px;
        }

        div:hover {
            background-color: skyblue;
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>dashu</title>
    <style>
        a {
            float: left;
            width: 183px;
            height: 130px;
            overflow: hidden;
            margin: 10px;
        }
        
        img {
            width: 193px;
            height: 130px;
            transition: margin-left 0.4s;
        }
        
        a:hover img {
            margin-left: -10px;
        }
    </style>
</head>

<body>
    <div>
        <a href="#"><img src="images/1.jpg" alt=""></a>
        <a href="#"><img src="images/2.jpg" alt=""></a>
        <a href="#"><img src="images/3.jpg" alt=""></a>
    </div>
</body>

</html>

3d:jquery

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        body {
            perspective: 1000px;
        }
        div {
            width: 100px;
            height: 145px;
            border: 5px solid red;
            margin: 100px auto;
            transform: rotateY(30deg);
            transform-style: preserve-3d; 
        }
        div img {
            transform: rotateY(30deg);
            border: 5px solid blue;
        }
        </style>
    </head>
    <body>
    <div>
        <img src="images/1.png"  width="100" alt="">
    </div>
    </body>
</html>

案例：web

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        body {
            perspective: 1000px;
        }
        section {
            width: 300px;
            height: 200px;
            margin: 100px auto;
            background: url(images/img2.jpg) no-repeat;
            background-size: cover;
            position: relative;
            transform-style: preserve-3d; 
            transition:  5s linear;  
        }
        section:hover {
            transform: rotateY(360deg);
        }
        section div {
            width: 100%;
            height: 100%;
            background: url(images/2.gif) no-repeat;
            background-size: cover;
            position: absolute;
            top: 0;
            left: 0;
        }
        section div:nth-child(1) {
            transform: rotateY(0deg)  translateZ(400px);
        }
        section div:nth-child(2) {
            transform: rotateY(60deg)  translateZ(400px);
        }
        section div:nth-child(3) {
            transform: rotateY(120deg)  translateZ(400px);
        }
        section div:nth-child(4) {
            transform: rotateY(180deg)  translateZ(400px);
        }
        section div:nth-child(5) {
            transform: rotateY(240deg)  translateZ(400px);
        }
        section div:nth-child(6) {
            transform: rotateY(300deg)  translateZ(400px);
        }
        </style>
    </head>
    <body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
    </body>
</html>

// 半圓
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dashu</title>
    <style type="text/css">
    div{
        width: 300px;
        height: 300px;
        background: pink;
        border-radius: 0  0 300px 0;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

// snow
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dashu</title>
    <style type="text/css">
    body{
        background-color: #000;
    }
    div{
        width: 8px;
        height: 8px;
        background-color: #fff;
        margin:200px;
        border-radius: 50%;
        transform-origin:-60px 0;
        -webkit-animation:dd 4s linear infinite;
    }
      @-webkit-keyframes dd{
            0%{
                transform:translate3d(0,0,0) rotate(0deg);
            }
            100%{
                transform:translate3d(0,400px,0) rotate(360deg);
            }
      }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

音樂盒svg

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dashu</title>
    <style type="text/css">
    body{
        background: pink;
    }
    .box{
        width: 300px;
        height: 300px;
        margin:100px auto;
        position: relative;
    }
    .ro{
        -webkit-animation:qq 4s linear infinite;
    }
    @-webkit-keyframes qq{
        from{
            transform:rotate(0deg);
        }
        to{
            transform:rotate(360deg);
        }
    }
    .top,.bottom{
        position: absolute;
        top:0;
        left:0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-radius: 50%;
    }
    .top{
        transition: all 0.5s ease 0s;
        transform-origin:bottom;
    }
    .music{
        transform:rotateX(180deg);
    }
    </style>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        var flag=1;
        $(".top").click(function(event) {
            if(flag==1)
            {
                $(this).addClass('music');
                $(".bottom").addClass('ro');

                flag=0;
                $("audio")[0].load();
                $("audio")[0].play();

            }
            else
            {
                $(this).removeClass('music');
                flag=1;
                $("audio")[0].pause();
                $(".bottom").removeClass('ro');


            }
        });
    });
    </script>
</head>
<body>
    <audio src="music.mp3"></audio>
    <div class="box">
        
        <div class="bottom"><img src="musicb.jpg" alt=""></div>
        <div class="top"><img src="musict.jpg" alt=""></div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dashu</title>
    <style type="text/css">
    header{
        width: 80%;
        height: 300px;
        display: -webkit-box;
        -webkit-box-orient:vertical;
    }
    section{
        -webkit-box-flex:1;
        background: pink;
    }
    section:first-child{
        background-color: blue;
    }
    section:last-child{
        background-color: green;
    }
    section:nth-child(2)
    {
        -webkit-box-flex:2;
    }
    </style>
</head>
<body>
    <header>
        <section></section>
        <section></section>
        <section></section>
    </header>
</body>
</html>