一、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>
/* 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>
