学习笔记---CSS动画，JavaScript HTML DOM

最新推荐文章于 2024-08-13 11:12:51 发布

F1CT0R

最新推荐文章于 2024-08-13 11:12:51 发布

阅读量43

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_56464236/article/details/131542719

版权

CSS动画制作

1.创建元素

制作动画需要从一个特定的元素入手，首先我们需要创建一个可见元素用来形变移动。这个元素通常会在<body>标签中进行构建，同时为了能够实现更复杂的动画，我们一般会使用两层的方式进行构建。父元素之间位置相对，子元素之间位置绝对。即父元素们会因为布局的原因导致实际位置并非我们所设定的位置，但子元素们则会出现在指定位置。

<body>
    <div class="父元素">
        <div class="子元素"></div>
    </div>
</body>

2.设置元素样式

仅仅创建元素而没有设置元素的大小颜色等信息时，页面中并不会出现这些元素，为了方便设定以及维护，我们一般会在style标签下进行设定，设定方法在上篇文章中有讲述，需要注意的是父子元素之间的位置属性设置。

一般要绘制复杂的图片时我们就需要去巧妙的利用一点遮挡，使用绘制的先后特性我们就可以用简单的图形来绘制较为复杂的图标

.父元素{
            width: 600px;
            height: 600px;
            border: 1px solid rebeccapurple;
            position:relative;/*父元素之间位置相对*/
        }
.子元素{
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;/*子元素之间位置绝对*/
        }

3.动起来

要让页面内的元素动起来，我们需要编写出元素移动的位置方向，一般在style标签中使用@keyframes关键字，如下图所示，标示出元素的top，left值。

 @keyframes move1 {
            from{
                top: 100;
                left: 100;
            }to{
                top: 200;
                left: 200;
            }
        }

设定好这些变化信息后就需要在相关元素的style中进行引用。

  .子元素{
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
             animation-name: move1;  /*动作函数名 */
            animation-duration: 2s;   /*  动作耗时 */
            animation-delay: 1s;   /*  动作启动等待时间 */
            animation-iteration-count: infinite; /* 循环次数，可以为int整数，infinite为无限次 */
            animation-timing-function: linear;  /* 运动速度函数 */
            animation-direction: alternate;
            animation-fill-mode: backwards;/*运动结束时的位置，forwards开始位置，backwas结束位置 */
        }

css动画实例---旋转太极图

<!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">
    <title>Document</title>
    <style>
        .fu{
            width: 500px;
            height: 500px;
            border: 1px solid black;
            position: relative;
            background-color:white;
            border-radius: 50%;
            animation: move1 0.5s linear infinite
        }
        .fu>div{
            position:absolute;

        }
        .z1{
            width: 250px;
            height: 500px;
            background-color: black;
            border-radius: 250px 0px 0px 250px;
        }
        .z2{
            width: 250px;
            height: 500px;
            background-color: white;
            border-radius: 0px 250px  250px 0px;
            left: 250px;
        }
        .z3{
            width: 250px;
            height: 250px;
            background-color: black;
            border-radius: 50%;
            left: 125px;
            z-index: 1;
        }
        .z4{
            width: 250px;
            height: 250px;
            background-color: white;
            border-radius: 50%;
            left: 125px;
            top: 250px;
            z-index: 1;
        }
        .z5{
            width: 80px;
            height: 80px;
            background-color: white;
            border-radius: 50%;
            left: 200px;
            top: 85px;
            z-index: 2;
        }
        .z6{
            width: 80px;
            height: 80px;
            background-color: black;
            border-radius: 50%;
            left: 200px;
            top: 335px;
            z-index: 2;
        }
        @keyframes move1{
            0%{
                transform: rotate(0deg);/*旋转形变*/
            }100%{
                transform: rotate(360deg);
            }
        }

    </style>
</head>

<body>
    <div class="fu">
        <div class="z1"></div>
        <div class="z2"></div>
        <div class="z3"></div>
        <div class="z4"></div>
        <div class="z5"></div>
        <div class="z6"></div>
    </div>
</body>
</html>

JavaScript HTML DOM笔记

1.DOM简介

dom一般用来读取页面元素的值和对页面元素的值进行改变。可以快速更新表单中的内容。

2.数据类型

js中共计有五种类型，在HTML中无需事先声明变量的类型，数据类型根据其自身的值进行改变。

<!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">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    let a=3
    console.log(typeof a)
    a='abc'
    a=true
    a=null
    a=undefined
    // 数据类型转换
    let b=1
    if(b){
        console.log(true)
        // number类型转换为boolean类型时，非零判断为true。
        //string类型转换时，内容为非空时判断为true。
        // null与undefind类型都会转换成false
    }else{
        console.log(false)
    }


    if(b!=0){
        console.log(1)
    }else{
        console.log(0)
    }

</script>
</html>

3.函数与数组的声明

数组内部的数值不限定类型，并且已经设定的null值也占用数组长度。

<!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">
    <title>Document</title>
</head>
<body>
    <script>
        // 数组
        // 元素不限定类型
        let arr1=[1,2,3,'a',true,null,undefined,null];
        console.log(arr1.length)
        // 存放对象的数组
        let arr2=[
            {id:1,name:'张三',age:32},
            {id:2,name:'李四',age:16}
        ]
        // 函数的两种定义方式
        function f1(){
            console.log('f1函数')
        }
        let f2=function(){
            console.log('f2函数')
        }
        // 数组遍历
        console.log(arr1)
        arr2.forEach(function(e){   //遍历每个数组的元素
            console.log(e)
        })
        //简化,箭头函数的表现形式
        arr2.forEach((e,i)=>{
            console.log(e,i)
        })
        //数组的筛选,arr3接收筛选函数的返回值，原数组arr2不变
        let arr3=arr2.filter((e,i)=>{
            return e.age<20
        })
        console.log(arr2)
        console.log(arr3)
        
    </script>
</body>
</html>

4.表单的更新

在body中新建一个表格

 <table style="margin-top: 30px;" align="center" border="1" cellpadding="18" cellspacing="0">
        <thead>
            <tr>
                <th><a href="javascript:orderEmp('id')">序号</a></th>
                <th>姓名</th>
                <th><a href="javascript:orderEmp('age')">年龄</a></th>
                <th><a href="javascript:orderEmp('salary')">薪资</a></th>
            </tr>
        </thead>
        <tbody id="tbody">
            <tr>
                <td>1</td>
                <td>小明</td>
                <td>20</td>
                <td>2000</td>
            </tr>
        </tbody>
        <tfoot id="tfoot">
            <tr style="text-align: center;">
                <td colspan="4">薪资总数：</td>
            </tr>
        </tfoot>
    </table>

在script标签下设定要更新的数据

let table=[
        {id:1,name:'小明',age:21,salary:3000},
        {id:2,name:'小红',age:22,salary:2100}
    ]

在script中将表格中的数值导出

let tbody=document.getElementById('tbody')

模式匹配，并将接收到的值更新入与内容匹配的元素中

 function createTab(arr){
        let s=''
        arr.forEach((e)=>{
            s+=`<tr>
                <td>${e.id}</td>
                <td>${e.name}</td>
                <td>${e.age}</td>
                <td>${e.salary}</td>
            </tr>`
        })
        tbody.innerHTML=s
    }

更新函数，需要一个新的变量接取需要的更新

    function restEmp(){
        let newEmps=emps.filter((e)=>{
            return e.age>20/*将年龄大于二十的进行过滤(filter)*/
        })
         //调用函数
         createTab(newEmps)
    }

常用的更新函数有

 Sum=newEmps.reduce((sum,e)=>{
       return sum+e.salary/*求和*/
            },0)

newEmps2=emps.sort((e1,e2)=>{
      return e2.id-e1.id/*排序*/
                })

newEmps=emps.map((e)=>{
            e.salary*=2   /*运算*/
            return e;
        })
 newEmps=emps.filter((e)=>{
            return e.age>65/*过滤*/
        })