首页 > 代码库 > 【HTML5校企公益课】第三天

【HTML5校企公益课】第三天

2024-09-15 05:49:49   220人阅读

1、上午2D。旋转变色的。。。

技术分享

基本思路就是先写静态画面然后添加动画。

<!--告诉浏览器该文件为网页格式-->
<html>
    <!--网页的头部标签-->
    <head>
        <!--设置网页的编码格式，让中文不乱码-->
        <meta charset="utf-8">
        <!--标题-->
        <title>2D动画</title>
        <!--设置元素选择器的样式-->
        <style>
            /*根据id获取 选择器 #id名，根据class名 .class名*/
            .classA {
                /*设置宽高*/
                   width: 20px;
                   height: 20px;
                /*设置颜色*/
                   background-color: black;
                /*设置形状*/
                   border-radius: 50%;
                /*position*/
                   position: absolute;
                   /*运算符号两边一定要有空格*/
                   left: calc(50% - 10px);
                   top: calc(50% - 10px);
                   /*设置动画*/
                   animation: changeColor 3s infinite linear reverse;
            }
            
            /*转动的圆*/
           .classB {
                   /*设置宽高*/
                   width: 100px;
                height: 100px;
                /*设置颜色*/
                background-color: black;
                /*设置形状*/
                /*border-radius: 50%;*/
                /*position*/
                position: absolute;
                left: calc(50% - 50px + 100px);
                top: calc(50% - 50px + 100px);              
                /*设置动画*/
                   /*动画名称 必要的*/
                  animation-name: xuanzhuan, changeColor;
                  /*设置动画时间 必要的。*/
                  animation-duration: 5s;
                  /*设置动画次数 inifinaite 匀速*/
                  animation-iteration-count: infinite;
                  /*设置速率 linear 匀速*/
                  animation-timing-function: linear;
                  /*设置动画的方向*/
                  animation-direction: reverse;
                  /*将上面的动画属性合并为以下写法，仅适用于单个动画，多个动画的设置只能分开写 
                  animation: xuanzhuan 3s infinite linear reverse;
                  animation: changeColor 0.25s infinite linear reverse;
                  /*设置旋转中心，默认是自转*/
                  transform-origin: -50px -50px;
           }
           
           /*设置动画*/
           @keyframes xuanzhuan{
               /*设置初始状态*/
               0%{
                   /*转换 transform*/
                   transform: rotate(0deg) scale(1);
               }
               /*设置结束状态 scale缩放 translate平移 倾斜 skew*/
               50%{
                   transform: rotate(180deg) scale(2);
               }
               100%{
                   transform: rotate(360deg) scale(1);
               }
           }
           
           @keyframes changeColor{
               0%{
                   background-color: white;
               }
               10%{
                   background-color: aliceblue;
               }
               20%{
                   background-color: bisque;
               }
               30%{
                   background-color: white;
               }
               40%{
                   background-color: white;
               }
               50%{
                   background-color: #FF0000;
               }
               60%{
                   background-color: white;
               }
               70%{
                   background-color: #FF0000;
               }
               80%{
                   background-color: aquamarine;
               }
               90%{
                   background-color: blue;
               }
               100%{
                   background-color: red;
               }
           }
        </style>
                
    </head>
    <!--网页的身体-->
    <body>
        <div id="aa", class="classA"></div>
        <div id="bb", class="classB"></div>
    </body>
</html>

 

2、下午3D。旋转正方体。

技术分享技术分享

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>3D</title>
        <style type="text/css">
            html {
                height: 100%;
            }
            body {
                height: 100%;
                /*取消body标签默认产生的外间距*/
                margin: 0;
                background-color: pin;
                /*第一步：开启弹性布局,对子元素*/
                display: flex;
                /*第二步：设置水平方向居中 justify-content自适应*/
                justify-content: center;
                /*第三部：设置垂直居中*/
                align-items: center;
                
                /*设置镜头与平面的距离*/
                perspective: 3000px;
                /*设置镜头在平面上的位置*/
                /*perspective-origin: 0% 0%;*/
                perspective-origin: right top;
            }
            /*定义section容器的大小颜色*/
            section {
                width: 300px;
                height: 300px;                    
                /*设置相对定位：目的让【子】元素设置【绝对】定位时可以【参照】*/
                position: relative;                
                /*开启3D样式*/
                transform-style: preserve-3d;                
                /*旋转*/
                animation: xuanzhuan 6s infinite linear;
            }
            
            @keyframes xuanzhuan {
                /*旋转的时候z轴保持不变,x和y做360度旋转*/
                from {
                    transform: rotateX(0deg) rotateY(0deg);
                }
                to {
                    transform: rotateX(360deg) rotateY(360deg);
                }
            }
            
            /*对每一个div统一设置样式*/
            div {
                width: 300px;
                height: 300px;
                border: 2px solid black;
                /*将文本居中*/
                /*水平*/
                text-align: center;
                /*设置行高*/
                line-height: 300px;
                /*设置文本格式*/
                font-family: "agency fb";
                font-size: 30px;
                color: darkblue;
                /*定位：每一个面【相对】大箱子设置【绝对】定位*/
                position: absolute;
                opacity: 0.7;
                /*设置图片*/
                background-repeat: no-repeat;
                background-size: cover;
            }
            .front {
                background-image: url(../img2/1.jpg);
                transform: translateZ(150px);
            }
            .back {
                background-image: url(../img2/2.jpg);
                transform: translateZ(-150px);
            }
            /*旋转的时候坐标轴也会跟着旋转*/
            .left {
                background-image: url(../img2/3.jpg);
                transform: rotateY(90deg) translateZ(150px);
            }
            .right {
                background-image: url(../img2/4.jpg);
                transform: rotateY(90deg) translateZ(-150px);
            }
            .top {
                background-image: url(../img2/5.png);
                transform: rotateX(90deg) translateZ(150px);
            }
            .down {
                background-image: url(../img2/6.jpg);
                transform: rotateX(90deg) translateZ(-150px);
            }
        </style>
    </head>
    <body>
        <!--第一步：定义一个大盒子来装六个面-->
        <section>
            <!--装六个面 前后左右上下-->
            <div class="front"></div>
            <div class="back"></div>
            <div class="left"></div>
            <div class="right"></div>
            <div class="top"></div>
            <div class="down"></div>
        </section>
    </body>
</html>

 要把section想象成一个大盒子。。。

【HTML5校企公益课】第三天


联系
我们