H5+CSS3動畫彙總(送給物件520的小禮物) 原始碼奉上

阿新 • • 發佈：2021-05-24

#1.實現的動畫效果

在這裡插入圖片描述

圖片用的是我和我物件的，可以自行替換

#2.實現原理

 html5+css3進行實現，
 css3主要用到了的相對定位和絕對定位。以及動畫animation+(2d和3d)轉換rotate+transition(過度)+位移 translate
 偽類:hover的使用 ,類複合選擇器  ^="類名"   (選擇以相同類名開頭的類)

#3.原始碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" 
>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="測試">
    <title>Document</title>
</head> 

<body>
    <style>
        @keyframes rollImg {
            0%{}
            75%{
                height: 310PX;
                width: 310px;
                opacity: 1;
            }
            100%{
                height: 320px;
                width: 320px;
                opacity: 0;
            } 

        }
        @keyframes turn {
            25%{
                transform: rotateZ(90deg);
            }
            50%{
                transform: rotateZ(180deg);
            }
            75%{
                transform: rotateZ(270deg);
            }
            100%{
                transform: rotateZ(360deg);
            }
        }
        body{
            /* perspective: 5000px; */
        }
        .conter{
            position: relative;
           margin: 450px auto;
            width: 200px;
            height: 200px;
            transition: all 1s;
            /* 保留立體空間 */
            transform-style: preserve-3d;
        }
       .conter:hover{
            cursor: pointer;
            transform: rotateY(180deg);
        }
        .front, .back {
            position: absolute;
            top: 0;
            left:0;
            
            height: 100%;
            width: 100%;
            border-radius: 50%;
            font-size: 20px;
            color: #fff;
            text-align: center;
            line-height: 200px;
        }
        .back{
            background-color: rgb(192, 212, 255);
            transform:rotateY(180deg);
        }
        .front{
            background-color: pink;
            z-index:1;
        }
        .conter div[class^="S-wrap"]{
            width: 200px;
            height: 200px;
            position: absolute;
            top: 100px;
            left:100px;
            transform: translate(-50%,-50%);
            border-radius: 50%;
            box-shadow: 0 0 30px rgb(63, 152, 211);
            animation: rollImg 1s linear infinite ;
        }
        .conter div.S-wrap2{
            animation-delay: .4s;
        }
        .conter div.S-wrap3{
            animation-delay: .7s;
        }
        /* 旋轉圖 */
        .roll{
            position: relative;
            animation: turn 7s linear infinite;
            height: 100%;
            width: 100%;
        }
        .conter div[class^="wrap"]{
            position:absolute;         
        }
        .conter div>img{
            height: 190px;
            width: 190px;
            border-radius: 50%;
        }
        .conter div.wrap1{
            transform:translateX(260px)
        }
        .conter div.wrap2{
            transform:translateX(-260px);
        }
        .conter div.wrap3{
            transform:  translateY(-260px);
        }
         div.wrap4{
            transform: translateY(260px);
        } 
    </style>
    
   
      <!-- 鏡子 -->
   <footer class="conter">
       <div class="back">
           <span class="point">家林</span> </div>
       <div class="front" >
        <span class="point">安清</span>
        </div>
           <div class="S-wrap1"></div>
           <div class="S-wrap2"></div>
           <div class="S-wrap3"></div>
       <!-- 輪播圖 3d -->
       <div class="roll">
        <div class="wrap1">
            <img src="./5.jpg" alt="">
        </div>
        <div class="wrap2">
         <img src="./6.jpg" alt="">
        </div>
        <div class="wrap3">
         <img src="./7.jpg" alt="">
        </div>
        <div class="wrap4">
         <img src="./8.jpg" alt="">
        </div>
       </div>
           
    
   </footer>   
</body>
</html>