Author：Mr.柳上原
- 付出不亚于任何的努力
- 愿我们所有的努力，都不会被生活辜负
- 不忘初心，方得始终
今天第59期班html+css毕业了
马上要进入js班学习
想起了以前那个感性的我
高中毕业的时候
大学毕业的时候
泪眼婆娑的我
本以为今天会如那时候一样的依依不舍
然而心中却少有波澜
想感慨，想感恩，想说些什么
最后还是对自己说
算了吧
就这样吧
平淡的结束了毕业典礼
是社会让人变得冷漠
连情感都会暗淡许多吗
<!DOCTYPE html> <!-- 文档类型：标准html文档 -->
<html lang='en'> <!-- html根标签 翻译文字：英文 -->
<head> <!-- 网页头部 -->
<meta charset='UTF-8'/> <!-- 网页字符编码 -->
<meta name='Keywords' content='关键词1,关键词2'/>
<meta name='Description' content='网站说明'/>
<meta name='Author' content='作者'/>
<title>前端59期学员作业</title> <!-- 网页标题 -->
<link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外链样式表 -->
<style type='text/css'> /*内部样式表*/
/* 变化and过度and动画 */
/* 变化：transform */
div{
width:200px;
height:200px;
transition:2s;
transform-origin:x y; /* 变化基点属性：默认中心旋转，不能写在触发器里 */
}
div:hover{
transform:rotate(180deg); /* 变化旋转属性：会占据原来位置，正值顺时针，负值逆时针 */
deg 角度
turn 圈
rad 弧度
grad 梯度
transform:scale(0.5); /* 变化缩放属性：会占据原来位置，属性值 缩小（0~1） 放大（>1） */
transform:translate(x,y); /* 变化位移属性：会占据原来位置，属性值px % */
transform:skew(20deg,20deg); /* 变化倾斜属性：会占据原来位置 */
}
/*
注意：
旋转属性会影响位移属性
*/
/* 过度：transition */
div{
width:200px;
height:200px;
visibility:hidden; /* 隐藏过度属性：占据原来位置 ，盒子内容不能选择到 */
opacity:0; /* 透明过度属性：占据原来位置 ，盒子内容能选择到 */
transition-property:width; /* 过度的属性 */
transition-duration:2s; /* 过度持续的时间 */
transition-timing-function:ease-in-out; /* 过度的速率 */
linear 匀速
ease 慢快慢（默认值）
ease-in 慢入
ease-out 慢出
ease-in-out 慢入慢出
cubicbezier 贝塞尔曲线（x1,y1,x2,y2）
transition-delay:2s; /* 过度的延迟时间 */
复合属性：
transition:属性 时间 速率 延迟时间,属性 时间 速率 延迟时间;
transition:width 2s ease-in-out 2s;visibility 2s, /* 隐藏到出现 */ opacity 2s, /* 透明到出现 */
}
div:hover{
visibility:visible; /* 隐藏后出现过度属性 */
opacity:1; /* 透明后出现过度属性 */
width:300px;
height:300px;
}
/*
触发过渡
单纯的代码不会触发任何过渡操作，需要通过用户的行为（如点 击，悬浮等）触发，可触发的方式有：
:hoever :focus :checked 媒体查询触发 JavaScript触发
局限性
transition的优点在于简单易用，但是它有几个很大的局限。
（1）transition需要事件触发，所以没法在网页加载时自动发生。
（2）transition是一次性的，不能重复发生，除非一再触发。
（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
*/
/* 动画：animation */
div{
width:200px;
height:200px;
animation-name:move; /* 动画的名字 */
animation-duration:2s; /* 动画的持续时间 */
animation-delay:2s; /* 动画的延迟时间 */
animation-timing-function:ease-in-out; /* 动画的运行速率，和过渡值一样 */
animation-iteration-count:9; /* 动画执行次数 */
1~~ 数值
infinite 无限次
animation-derection:normal; /* 动画执行反向 */
normal 默认
reverse 反向
alternate 正向再反向
alternate-reverse 反向再正向
animation-fill-mode:none; /* 规定动画第一帧与最后一帧的状态：不适用于无限次运动的状态 */
none 原始动画 -- 动画 -- 原始状态（默认）
forwards 原始动画 -- 动画 -- 停在最后一帧
backwards 动画的0帧 -- 动画 -- 停在原始状态
both 动画的0帧 -- 动画 -- 停在最后一帧
复合属性：
animation:move 2s linear 1 alternate;
}
div:hover{
animation-play-state:paused; /* 动画运动执行的状态 */
running 运动
paused 停止
}
@keyframes move{
/* 从开始到结束 */
from{width:200px;}
to{width:300px;}
/* 帧动画 */
0%{width:300px;}
50%{width:400px;}
100%{width:500px;}
}
</style>
</head>
<body> <!-- 网页主干：可视化区域 -->
<div></div>
</body>
</html>
