【复习】
行间元素 变成 块状元素的 几种方式
- display：block / inline-block / table
- float：left/right
- position：abosoled/fixed
- overflow：hidden（这个不可以）
html 超文本标记语言 结构 css 层叠样式表 表现 js 脚本语言 行为
js 基础题
window.onload = function(){ var a = 10; } alert(a) // 应该输出来的是 undefined 因为变量提升 事件函数内部的 变量 在函数内部 （错了 会报错 ！！！）
作用域 作用在一块区域的 函数里面 声明的变量 函数外面是拿不到
报错 是因为 先加载的 alert(a) 后加载的 onl oad 的事件函数
每个作用域里 都有自己的预解析（所有 var 的东西 都过一遍）
当你 不写 var 的时候 就会被自动 认为是 window的谁谁了
parent 也是 window 还有 top 也是 self 也是 this 也是
js 报错 1 编译错误 2 语法错误
【html5】
html5 w3c 协议
css3 升级版的css
es6 等等
video audio canvas
video 视频 MP4
背景颜色 为 黑 可以 通过 饱和度 来设定 hsl （例如 hsl(167,0%，0%)为黑色）
【css3】
transition 过度动画
transition-delay 延时 1s 简写的时候 延时时间在最后
transition-timing-function 加速 减速 ease 线性运动 过度的动画形式
transition-duration 运动时间 1s
transition-property 要运动的样式 比如 写一个 all 比如 只过度 width
默认缩写 0s all ease 0s
transform 变换式
rotate 旋转 transform: rotate(1turn); 1turn = 360deg
rotateX / rotateY X轴翻转 Y轴翻转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
div{
width: 100px;
height: 100px;
background-color:rgb(red, green, blue);
/* 居中 */
position:absolute;
left: 0;
right: 0;
top:350px;
bottom: 0;
margin:0 auto;
/* transition-delay: 0.1s;
transition-timing-function: ease;
transition-duration: 1s;
transition-property: all; */
transform: perspective(0px);
/* transition: 1s; */
}
/* div:hover{ */
/* width: 200px;
height: 200px; */
/* transform: rotate(90deg); */
/* transform: rotate(1turn); */
/* transform: perspective(600px) rotateX(90deg); */
/* } */
</style>
<div id='div1'></div>
<script type="text/javascript">
onl oad = function(){
var deg = 0;
// var flag = false;
// var r,b,g;
var r = parseInt(Math.random() * 255) + 1;
var b = parseInt(Math.random() * 255) + 1;
var g = parseInt(Math.random() * 255) + 1;
var flag = 0;
setInterval(function(){
deg++;
if(flag == 0){
div1.style.transition = "0s";
div1.style.transform = "perspective(600px) rotateY(" + deg + "deg)";
}else if(flag == 1){
div1.style.transition = "0s";
div1.style.transform = "perspective(600px) rotateX(" + deg + "deg)";
}else if(flag == 2){
div1.style.transition = "1s";
div1.style.transform = "scale(2,1)";
}
div1.style.background = "rgb("+ r +"," +b +","+ g +")"
deg = deg>360?0:deg;
if(deg == 0){
// flag = !flag;
flag++;
if(flag>2){
flag = 0;
}
r = parseInt(Math.random() * 255) + 1;
b = parseInt(Math.random() * 255) + 1;
g = parseInt(Math.random() * 255) + 1;
}
},8);
}
</script>
</body>
</html>skew(skewx,skewy) 扭曲 倾斜 deg
scale(scalex,scaley) 宽高变化 当负数值的时候 会 镜像
https://www.cnblogs.com/pythonywy/p/11833032.html 很有意思
桃ちゃん