Document

css+js

2023-07-06
dfer
446
css javascript 前端

一、css动画

CSS动画是一种在网页中使用CSS样式表来创建动态效果的技术。它可以通过添加和修改CSS属性值来实现元素的动画效果，而无需使用JavaScript或其他脚本语言。下面是一些常用的CSS动画技术和属性：

@keyframes 规则：@keyframes 规则用于定义一个动画序列，可以指定元素在动画的不同阶段中所应用的样式。通过指定关键帧的百分比或关键字（如from和to），可以定义元素在动画过程中的样式变化。

@keyframes example-animation {
  0% { opacity: 0; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

2.animation 属性：animation 属性用于将动画应用于元素，并指定动画的名称、持续时间、重复次数等参数。

.element {
  animation-name: example-animation;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

3.transition 属性：transition 属性用于创建元素在状态变化时的平滑过渡效果。通过指定要过渡的属性、持续时间和过渡函数，可以定义元素在状态改变时的动画效果。

.element {
  transition-property: width;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}

.element:hover {
  width: 200px;
}

4.transform 属性：transform 属性用于对元素进行变换，如旋转、缩放、平移等。结合动画和过渡效果，可以创建更复杂的元素动画效果。

.element {
  transition: transform 1s;
}

.element:hover {
  transform: rotate(45deg) scale(1.5);
}

这些只是CSS动画的一些基本概念和属性，实际上还有更多的技术和属性可以用于创建更复杂和吸引人的动画效果。CSS动画提供了一种无需JavaScript的简单方法来实现动画，但对于更复杂的场景，JavaScript仍然是一个强大的工具。

用纯css实现可旋转小太极，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .fu{
            width: 500px;
            height: 500px; 
            position: relative;
            left: 20%;
            animation-name: rotate;
            animation-duration: 10s;
            animation-timing-function: linear;
            animation-iteration-count: 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 0;    
            left: 250px;
            border: 1px solid black;
        }
        .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;
        }
        /* .z1 .z2 .z3 .z4 .z5 .z6{
            animation-name: rotate;
            animation-duration: 4s;
            animation-timing-function: linear;
            animation-direction: alternate;
            animation-fill-mode: forwards;
            } */
        @keyframes rotate {
        0% {
            transform: rotate(0deg);
        }
        50%{
            transform: rotate(180deg);
        }
        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>

二、js入门

JavaScript（简称JS）是一种广泛用于网页开发的脚本语言，它可以为网页添加交互性和动态性。下面是一些JavaScript基础知识：

变量：在JavaScript中，可以使用关键字 var、let 或 const 声明变量。变量用于存储数据，并可以随时修改。

var name = 'John';
let age = 25;
const PI = 3.14;

2.数据类型：JavaScript有多种数据类型，包括字符串（string）、数字（number）、布尔值（boolean）、数组（array）、对象（object）等。

var name = 'John';
var age = 25;
var isStudent = true;
var numbers = [1, 2, 3, 4, 5];
var person = { name: 'John', age: 25 };

3.函数：函数用于封装可重复使用的代码块。在JavaScript中，可以使用关键字 function 定义函数。

function sayHello(name) {
  console.log('Hello, ' + name + '!');
}

sayHello('John'); // 输出：Hello, John!

4.条件语句：条件语句用于根据条件执行不同的代码块。常见的条件语句包括 if、else if 和 else。

var age = 18;

if (age < 18) {
  console.log('未成年');
} else if (age >= 18 && age < 60) {
  console.log('成年人');
} else {
  console.log('老年人');
}

5.循环语句：循环语句用于重复执行一段代码。常见的循环语句有 for、while 和 do while。

for (var i = 0; i < 5; i++) {
  console.log(i);
}

var i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

var i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

这些只是JavaScript的一些基础概念，JavaScript还有很多其他的功能和用法，如操作DOM元素、面向对象编程等。深入学习和理解这些概念将帮助你更好地使用JavaScript开发交互式和动态的网页应用程序。

2.数组

//1.数组 
    let arr1=[11,1231,123,'123',true,undefined,null];
    console.log(arr1.length)
    //2.复杂的数组
    let arr2=[
        {id:1,name:'曹操',age:36},
        {id:2,name:'孙权',age:30},
        {id:3,name:'刘备',age:34},
    ]
    //函数的两种常用的定义方式
    function f1(){
        console.log('f1函数')
    }
    let f2=function(){
        console.log('f2函数')
    }
    //3.数组的遍历
    arr2.forEach(function(e){
        console.log(e)
    })
    //简化为箭头函数的表达形式
    arr2.forEach((e,i)=>{
        console.log(e,i)
    })
    //4.数组的筛选,原数组不会被改变，筛选出来的结果返回到新数组中
    let arr3=arr2.filter((e,i)=>{
        return e.age<35
    })
    console.log(arr3)

3.js-dom

JavaScript中的DOM（文档对象模型）操作是指通过JavaScript代码来操作HTML文档的结构、内容和样式。DOM操作使你能够动态地更新和修改网页上的元素，以实现交互性和动态性。以下是一些常见的DOM操作方法：

选择元素：可以使用各种方法选择HTML元素，如通过ID、类名、标签名或CSS选择器。

// 通过ID选择元素
var element = document.getElementById('myElement');

// 通过类名选择元素
var elements = document.getElementsByClassName('myClass');

// 通过标签名选择元素
var elements = document.getElementsByTagName('div');

// 通过CSS选择器选择元素
var element = document.querySelector('.myClass');
var elements = document.querySelectorAll('div');

2.修改内容：可以使用DOM操作修改元素的内容，包括文本内容和HTML结构。

// 修改文本内容
element.textContent = 'New text';

// 修改HTML内容
element.innerHTML = '<strong>New HTML</strong>';

3.修改样式：可以使用DOM操作修改元素的样式，包括颜色、大小、位置等。

// 修改样式属性
element.style.color = 'red';
element.style.fontSize = '20px';

// 添加/移除CSS类名
element.classList.add('newClass');
element.classList.remove('oldClass');

4.添加和删除元素：可以使用DOM操作动态地添加和删除HTML元素。

// 创建新元素
var newElement = document.createElement('div');

// 添加到父元素中
parentElement.appendChild(newElement);

// 从父元素中移除
parentElement.removeChild(element);

5.事件处理：可以使用DOM操作为元素添加事件监听器，以响应用户的交互。

// 添加事件监听器
element.addEventListener('click', function() {
  console.log('Element clicked!');
});

// 删除事件监听器
element.removeEventListener('click', eventHandler);

这些只是DOM操作的一些基本方法和技术。DOM操作可以非常强大，允许以编程方式控制网页的各个方面。可以使用DOM操作创建交互式表单、动态加载内容、处理用户输入等。详细了解DOM操作的各个方面将使你能够更好地利用JavaScript来操纵网页元素。

上一篇： HTML+css网页

下一篇： HTML & CSS