css3中的动画特效案例

白色玫瑰 程序猿

时间: 2023-07-15 阅读: 1 字数:6657

css
{}
引言\n最近学完css3的知识，下面做了几个有趣案例，来帮助自己熟悉css3的知识。\n一、升空的孔明灯\n<!DOCTYPE html>\n<html>\n\t<head>\n\t\t<meta charset=\utf-8\>\n\t\t<title>孔明灯</title>\n\t\t<style>\n *{\n ...

引言 最近学完css3的知识，下面做了几个有趣案例，来帮助自己熟悉css3的知识。 一、升空的孔明灯

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>孔明灯</title>
        <style>
         *{
            padding: 0;
            margin: 0;
         }
         html{
            height: 100%;
            background-color: #000;
         }
         div{
            height: 100%;
            width: 100%;
            position: relative;
         }
         @keyframes run{
            0%{
               top: 600px;
            }
            100%{
               top: 100px;
               width: 10px;
               height: 10px;;
            }
         }

         div>img{
            width: 100px;
            height: 100px;
            display: inline-block;
            position: absolute;
            top: 800px;
            animation: run 10s infinite;
         }
         div>img:nth-child(1){
            left: 10px;
         }
         div>img:nth-child(2){
            left: 120px;
         }
         div>img:nth-child(3){
            left: 230px;
         }
         div>img:nth-child(4){
            left: 340px;
         }
         div>img:nth-child(5){
            left: 450px;
         }
         div>img:nth-child(6){
            left: 560px;
         }
         div>img:nth-child(7){
            left: 670px;
         }
         div>img:nth-child(8){
            left: 780px;
         }
        </style>
    </head>
    <body>
        <div>
![](img/lable.jpg)
![](img/lable.jpg)
![](img/lable.jpg)
![](img/lable.jpg)
![](img/lable.jpg)
![](img/lable.jpg)
![](img/lable.jpg)
![](img/lable.jpg)

      </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>Document</title>
   <style>
      *{
            padding: 0;
            margin: 0;
        }
        html{
            height: 100%;
            background-image: linear-gradient(#29f9f0 0% , #000 80%);
        }
      @keyframes run{
            0%{
            transform: rotateX(0deg) rotateY(0deg) rotate(0deg);
            }
            100%{
            transform: rotateX(720deg) rotateY(360deg) rotate(360deg);
            }
        }
        .wapper{
            width: 300px;
            margin-top: 100px;
            perspective: 800px;
            margin: 50px auto;
        }
      .wapper .cube{
            width: 300px;
            height: 300px;
       transform-style: preserve-3d;
       position: relative;
       transform: rotateX(-50deg) rotateY(-50deg) rotate(-50deg);
       animation: run 10s infinite;
        }
        .wapper .cube span{
            transition: all 1s cubic-bezier(0.9,-0.2,1,1);
        }
        .cube>span{
            display: block;
            width: 90px;
            height: 90px;
            position: absolute;
            left: 50px;
            top: 50px;
            opacity: 0.8;
            background-color: rgba(0,100,120,1);

        }
    
        .cube span.num_front{
          transform: translateZ(50px);
          background-image: url(img/front.jpg);
          background-size: cover;
      }
      .cube span.num_back{
          transform: translateZ(-50px);
          background-image: url(img/back.jpg);
          background-size: cover;
      }
      .cube span.num_left{
          transform: translateX(-50px) rotateY(90deg);
          background-image: url(img/left.jpg);
          background-size: cover;
      }
      .cube span.num_right{
          transform: translateX(50px) rotateY(-90deg);
          background-image: url(img/right.jpg);
          background-size: cover;
      }
      .cube span.num_top{
          transform: translateY(-50px) rotateX(90deg);
          background-image: url(img/top.jpg);
          background-size: cover;
      }
      .cube span.num_bottom{
          transform: translateY(50px) rotateX(-90deg);
          background-image: url(img/bottom.jpg);
          background-size: cover;
      }
      
      .wapper .cube:hover .num_front{
          
          transform: translateZ(100px) scale(1.5);
      }
      .wapper .cube:hover .num_back{
          
          transform: translateZ(-100px) scale(1.5);
      }
      .wapper .cube:hover .num_left{
          
          transform: translateX(-100px) rotateY(90deg) scale(1.5);
      }
      .wapper .cube:hover .num_right{
          
          transform: translateX(100px) rotateY(-90deg) scale(1.5);
      }
      .wapper .cube:hover .num_top{
          
          transform: translateY(-100px) rotateX(90deg) scale(1.5);
      }
      .wapper .cube:hover .num_bottom{
          
          transform: translateY(100px) rotateX(-90deg) scale(1.5);
      }

   </style>
</head>
<body>
   <div class="wapper">
        <div class="cube">
   <!-- 正面 -->
      <span class="num_front">
       
      
      <!-- 反面 -->
      <span class="num_back">
      
      
      <!-- 左面 -->
      <span class="num_left">
       
      
       <!-- 右面 -->
      <span class="num_right">
      
      
       <!-- 上面 -->
      <span class="num_top">
      
          
       <!-- 下面 -->
      <span class="num_bottom">
      
              
        </div>
    </div>
</body>
</html>

在这里插入图片描述

原文地址：https://blog.csdn.net/CSH_lucky/article/details/105780026?ops_request_misc=&request_id=06f15b4d02774e9598f5645ef55394ad&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-12-105780026-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88

本文章网址:https://www.sjxi.cn/detil/627ba521678e4c6682c058d4a5c27aa8

最新评论

当前未登陆哦
登陆后才可评论哦

湘ICP备2021009447号