<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
/* 视距：设置距离xy轴构成的平面有多少像素距离 */
perspective: 500px;
}
div{
/* 设置变化效果为3d */
transform-style: preserve-3d;
width: 100px;
height: 100px;
border: 1px solid red;
/* margin: 100px; */
/* translateXYZ分别让标签在xyz轴上发生位移 */
/* transform: translateZ(100px); */
/* 三个参数分别是xyz轴上的位移*/
/* transform: translate3d(200px,100px,500px); */
/* transform: rotateX(45deg); */
/* transform: rotateY(45deg); */
/* transform: rotateZ(90deg); */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div>img{
width: 100px;
height: 100px;
position: absolute;
transition: 3s;
}
body{
perspective: 500px;
}
div{
margin:200px;
width: 100px;
height: 100px;
border: 1px solid red;
transform-style: preserve-3d;
position: relative;
}
.container:hover>img:first-child{
top: -100px;
transform-origin: bottom;
transform: rotateX(-90deg);
}
.container:hover>img:nth-child(2){
top: 100px;
transform-origin: top;
transform: rotateX(90deg);
}
.container:hover>img:nth-child(3){
left: -100px;
transform-origin: right;
transform:rotateY(90deg)
}
.container:hover>img:nth-child(4){
left: 100px;
transform-origin: left;
transform: rotateY(-90deg);
}
.container:hover>img:last-child{
transform: translateZ(100px);
}
.container:hover{
transform: rotate3d(1,1,1,45deg);
}
.container{
transition: 3s;
}
</style>
</head>
<body>
<div class="container">
<img src="./img/11.webp" alt="">
<img src="./img/22.jpeg" alt="">
<img src="./img/33.jpeg" alt="">
<img src="./img/44.jpeg" alt="">
<img src="./img/55.webp" alt="">
<img src="./img/66.jpeg" alt="">
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
span,div{
width: 100px;
height: 100px;
border: 1px solid red;
transition:2s width linear 1000ms;
}
span:hover,div:hover{
width: 200px;
height: 200px;
background-color: black;
}
span{
display: inline-block;
}
</style>
</head>
<body>
<div></div>
<span></span>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
span,div{
width: 100px;
height: 100px;
border: 1px solid red;
transition:2s width linear 1000ms;
}
span:hover,div:hover{
width: 200px;
height: 200px;
background-color: black;
}
span{
display: inline-block;
}
</style>
</head>
<body>
<div></div>
<span></span>
</body>
</html>
@keyframe ：动画名称{
from{}
to{}
}
首先JavaScript是一个动态的解释型编程语言。
所谓动态就是指，代码在运行时变量的数据类型可以发生变化。（静态就想类似c、java、go这种语言他们需要创建变量时就确定变量的数据类型，并且不可随意更改）
所谓的解释型语言，是指代码运行时不需要生成任何可执行文件，代码通过解释器转化为二进制数据交给cpu运行，并且解释型语言通常是一行一行运行的。（编译型是生成可执行文件，通过运行可执行文件达到执行代码的目的）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/new_file.css">
<!-- js的第三种书写方式外链式 -->
<script src="./js/new_file.js"></script>
</head>
<body>
<!-- 第二种js的代码书写方式 行内样式 -->
<!-- <button οnclick="alert('hello world')">按钮</button> -->
<!-- 书写JS代码的第一种方式 页面样式 -->
<script>
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/new_file.css">
</head>
<body>
<!-- 第一种弹框警告框，向用户展示信息 -->
<!-- <button οnclick="alert('hello world')">按钮</button> -->
<script>
// <!-- 第二种弹框，确认框可以根据用户的选择获取返回值 -->
// flag = confirm("你是困困的粉丝吗")
// if(flag){
// console.log("太好了，我也是")
// }else{
// console.log("滚粗，小黑子！");
// }
// 第三种弹框prompt 第一个参数是提示信息 第二个参数是默认值
// 谨慎使用 xss攻击经常攻击的目标
// str = prompt("请输入你的年龄","18");
// console.log(str)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/new_file.css">
</head>
<body>
<script>
// c中如何创建变量
// int 变量名 要么是 float string 。。。
// js中有三种创建的方式
// 第一种无声明 创建的变量他事全局的
// function fun(){
// name = "string"
// }
// fun()
// console.log(name)
// 第二种使用var关键字创建变量
// console.log(name)
// var name = "string"
// name = "string2"
// console.log(name)
// var具有声明提升作用 上面的代码等价于下面的代码
// var name="string"
// console.log(name)
// name = "string2"
// console.log(name)
// 第三种使用let创建变量 块级别
// function fun(){
// if(0 == 0){
// var age = "123"
// }
// console.log(age)
// }
// fun()
// console.log(age)
// var 和 let的区别
// 1.let的最小作用域是块级别 出了块 变量就无法访问
// var的变量最小作用域是函数级别 也就说var即使在代码块中创建只要在函数中都可以正常访问
// 2.var可以重复的重建变量 let不可以
// 3.var具备声明提升的效果 let不可以
// let a = 1
// console.log(a)
// let a = 2
// console.log(a)
// let a = 3
// console.log(a)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/new_file.css">
</head>
<body>
<script>
//c中数据类型大概有这些int short char long float longlong double unshort...
//js中基本数据类型 Number(int float double)、 Boolean、String、undefined、NaN、
// 引用类型：Array数组类型 object对象类型
let a = 100 / "a"
console.log(a)
</script>
</body>
</html>