一、css过渡
/* 1.css样式在发生变化时，默认是直接变化，没有过渡的动画效果 */
/* 将某个样式设置为过渡时，这个样式在发生变化时，会执行过渡动画 */
/* transition-property: background-color; */
/* 2.设置元素过渡的样式，设置为all则表示过渡所有的样式 */
/* transition-duration: 0.7s; */
/* 3.设置过渡时间，s 秒，ms 毫秒，1s=1000ms */
/* transition-timing-function: linear; */
/* 4.动画执行速率，linear匀速 */
/* transition-delay: 1s; */
/* 5.延时 */
/*6. transition可以设置多个过渡样式 */
/* 样式 时间 速率 */
transition
:
all
0.7s
linear
;
/* 动画速率默认值为ease-in-out，先加速后减速 （开始慢中间快最后慢）
ease-in 加速动画（开始慢最后快）
ease-out 减速动画（开始快最后慢）*/
/*1.要过渡的样式必须有初始值,没有初始值无法过渡 */
/* 2.并不是所有的样式都能过渡，一般情况下，和元素外观有关的样式都能过渡，比如：color、宽高、左右上下、border、transform等
但是和元素布局、定位有关的元素，一般不能过渡*/
/* */
#box:hover
{
background-color
:
yellow
;
transform
:
scale
(
2
,
2
)
rotate
(
180deg
);
border
:
solid
10px
red
;
border-radius
:
50%
;
}
/* 当鼠标按下去的时候 */
#box:active
{
/* 设置元素阴影 */
/* 横向偏移量 纵向偏移量 模糊成都 阴影大小 阴影颜色 */
box-shadow
:
0
0
100px
0
red
;
}
二、元素阴影
/*1. 横向偏移量(右) 纵向偏移量 模糊（0表示不模糊） 大小*/
/* box-shadow: 5px 5px 20px 10px black; */
/*2. 平时：往右下、模糊大一点、模糊可以写负数 */
box-shadow
:
5px
5px
10px
10px
gray
;
/*4. inset 设置阴影在元素内 */
/* 五子棋 */
box-shadow
:
0px
0px
5px
0px
black
inset
;
/* 1.文本阴影主要用于当文本颜色和背景颜色相似时突出文本显示 */
/* text-shadow设置文本阴影，横向偏移量、纵向偏移量、模糊程度、阴影颜色 */
text-shadow
:
5px
5px
5px
black
;
三、关键帧动画
/* fps(frames per second),一般都是每秒60帧，帧数越多越流畅 */
/* 1.让一个元素做关键帧动画，*/
/* 第一步 ：创建动画,叫move，至少两帧 */
@keyframes
move
{
/* 0%表示动画开始的关键帧 */
0%{
transform
:
translate
(
100px
,
0
);
animation-timing-function
:
ease-in
;
}
/*100%表示动画结束的关键帧 */
100%{
transform
:
translate
(
100px
,
0px
);
}
}
/* 想让哪个元素做动画，就把动画添加到元素上 */
#box
{
width
:
100px
;
height
:
100px
;
background-color
:
red
;
/* 第二步：把动画添加到元素上 */
/* 1.animation-name,动画名字，设置本元素执行哪个动画 */
animation-name
:
move
;
/* 2.设置单次动画的执行时间 */
animation-duration
:
1s
;
/* 3.设置动画状态是否保留，设置为both可以保留动画结束时，动画的样式 */
animation-fill-mode
:
both
;
/* 4.设置动画执行速率，默认为ease-in-out,
匀速使用linear
ease-in 加速动画（开始慢最后快）
ease-out 减速动画（开始快最后慢）*/
animation-timing-function
:
linear
;
/* 5.设置动画多久后执行 */
animation-delay
:
1s
;
/* 6.设置动画方向 reverse反向方向*/
/* animation-direction: reverse; */
/* 7.设置动画重复次数，默认为1， infinite无限*/
animation-iteration-count
:
infinite
;
}
/* 第二个旋转动画 */
#d2
{
width
:
100px
;
height
:
100px
;
background-color
:
rebeccapurple
;
margin
:
50px
auto
;
text-align
:
center
;
line-height
:
100px
;
}
#d2:hover
{
/*1. 设置鼠标放上去，停止动画 */
/* animation-name: none; */
/* 2.设置动画执行状态，默认为running，设置为paused可以暂定动画 */
animation-play-state
:
paused
;
}
@keyframes
spin
{
0%{
transform
:
rotate
(
0
);
}
100%{
transform
:
rotate
(
360deg
);
}
}
/* 把动画写进一个class里，让元素直接调用 */
.spin
{
animation-name
: spin;
animation-duration
:
1s
;
animation-timing-function
:
linear
;
animation-iteration-count
:
infinite
;
}
四、表单元素
<!--1. input,输入框，行内块元素，可以设宽高 -->
<input
type
=
"text"
placeholder
=
"请输入账号"
>
<!-- 2.button,按钮，行内块 -->
<button>
按钮
</button>
<br>
<!-- 3.label，标签，用于关联一个其他表单元素，for属性需要写要关联的元素的id，点击label
就相当于点击了关联的元素 -->
<label
for
=
"psw"
>
密码：
</label>
<!-- input,type设置为password，表示密码输入框 -->
<input
id
=
"psw"
type
=
"password"
>
<hr>
<p>
请你选择认为夺冠的队伍
</p>
<!-- 4.input,type=radio时，表示单选框，处于同一组的单选框只能选中一个值，
将多个radio设置相同的name属性，就可以成为同一组 -->
<label
for
=
""
>
法国
</label>
<input
type
=
"radio"
name
=
"team"
>
<label
for
=
""
>
中国
</label>
<input
type
=
"radio"
name
=
"team"
>
<label
for
=
""
>
英格兰
</label>
<input
type
=
"radio"
name
=
"team"
>
<label
for
=
""
>
克罗地亚
</label>
<input
type
=
"radio"
name
=
"team"
>
<hr>
<!-- 5.input,type=checkbox时，表示多选框 -->
<label
for
=
""
>
白菜
</label>
<input
type
=
"checkbox"
>
<label
for
=
""
>
萝卜
</label>
<input
type
=
"checkbox"
>
<hr>
<!-- 6.select ，下拉列表，行内块元素 -->
<label
for
=
"school"
>
请选择你的学校
</label>
<select
id
=
"school"
>
<!-- option，下拉列表项 -->
<option
value
=
""
>
清华
</option>
<option
value
=
""
>
北大
</option>
<option
value
=
""
>
郑大
</option>
<option
value
=
""
>
机电
</option>
</select>
</body>
五、
第三方动画库
<head>
<meta
charset
=
"UTF-8"
>
<meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<meta
http-equiv
=
"X-UA-Compatible"
content
=
"ie=edge"
>
<title>
4.第三方动画库.htm
</title>
<link
rel
=
"stylesheet"
href
=
"animate.css"
>
<style>
#title
{
text-align
:
center
;
margin
:
50px
0
;
color
:
brown
;
/* display: flex; */
}
</style>
</head>
<body>
<!-- 1.调用动画名 -->
<!-- 2.调用动画执行时间，这个是固定的，必须调用 -->
<h1
id="title" class="swing animated "
>
Animate.css
</h1>
</body>
</html>
