表单
- 在现实生活中表单用于提交数据
- 在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器
- 使用form标签来创建一个表单
文本框
文本框
注意：数据要提交到服务器中，必须要为元素指定一个name属性值
文本框 <input type="text" name="username"> <br><br>
密码框
密码框 <input type="password" name="password">
单选按钮
像这种选择框，必须要指定一个value属性，value属性最终会作为用户的填写的值传递给服务器
- checked 可以将单选按钮设置为默认选中 单选按钮 <input type="radio" name="hello" value="a"> <input type="radio" name="hello" value="b" checked>
多选框
多选框 <input type="checkbox" name="test" value="1"> <input type="checkbox" name="test" value="2"> <input type="checkbox" name="test" value="3" checked>
下拉列表
<select name="haha"> <option value="i">选项一</option> <option selected value="ii">选项二</option> <option value="iii">选项三</option> </select>
提交按钮
<input type="submit" value="注册">
常用属性
- autocomplete="off" 关闭自动补全
- readonly 将表单项设置为只读，数据会提交
- disabled 将表单项设置为禁用，数据不会提交
- autofocus 设置表单项自动获取焦点
大练习
仿小米商城第一屏
动画
过渡效果 transition
MDN:https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition
简单示例
- 通过过渡可以指定一个属性发生变化时的切换方式
- 通过过渡可以创建一些非常好的效果，提升用户的体验
.box{ height: 200px; width: 200px; background-color: lightblue; transition: width 1s; } .box:hover{ width: 150px; } <div class="box"></div>
transition-property: 指定要执行过渡的属性
- 多个属性间使用,隔开
- 如果所有属性都需要过渡，则使用all关键字
- 大部分属性都支持过渡效果，注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡(例如从0到1)
transition-property: height , width; transition-property: all;
transition-duration: 指定过渡效果的持续时间
- 时间单位：s 和 ms 1s = 1000ms
transition-duration: 2s;
为每个属性分别设置持续时间
transition-duration: 100ms, 2s;
transition-timing-function:设置过渡过程的加速曲线
- ease 默认值，慢速开始，先加速，再减速
transition-timing-function: ease;
- linear 匀速运动
transition-timing-function: linear;
- ease-in 加速运动
transition-timing-function: ease-in;
- ease-out 减速运动
transition-timing-function: ease-out;
cubic-bezier() 来指定时序函数 参考网站 https://cubic-bezier.com
transition-timing-function: cubic-bezier(.17,.67,.29,-0.82);
- steps() 分步执行过渡效果,分几步执行完毕
可以设置一个第二个值：
end ， 在时间结束时执行过渡(默认值)
start ， 在时间开始时执行过渡
transition-timing-function: steps(3, end);
transition-delay: 过渡效果的延迟，等待一段时间后在执行过渡
transition-delay: 2s;
简写属性
transition 可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟
transition:2s margin-left 1s cubic-bezier(.24,.95,.82,-0.88);
动画 animation
动画和过渡类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性发生变化时才会触发，动画可以自动触发动态效果
.box{ height: 5px; width: 750px; background-color: lightgray; } .box2{ height: 5px; width: 0px; margin-left: 0; background-color:lightgreen; animation-name: test; animation-duration: 3s; } @keyframes test { from{ width: 0px; } to{ width: 750px; } } <div class="box"> <div class="box2"></div> </div>
@keyframes关键帧
设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤
- 使用@keyframes name 为关键帧名称
- from表示动画的开始位置 也可以使用 0%
- to动画的结束位置 也可以使用100%
@keyframes test { from{ margin-left: 0; background-color: orange; } to{ background-color: red; margin-left: 700px; } }
animation-duration: 动画的执行时间
animation-duration: 4s;
animation-delay动画的延时，等待一段时间后在执行动画
animation-delay: 2s;
animation-timing-function设置过渡过程的加速曲线
animation-timing-function: ease-in-out;
animation-iteration-count 动画执行的次数
- infinite 无限执行
animation-iteration-count: 1;
animation-direction指定动画运行的方向
- normal 默认值 从 from 向 to运行 每次都是这样
- reverse 从 to 向 from 运行 每次都是这样
- alternate 从 from 向 to运行 重复执行动画时反向执行
- alternate-reverse 从 to 向 from运行 重复执行动画时反向执行
animation-direction: alternate-reverse;
animation-play-state: 设置动画的执行状态
- running 默认值 动画执行
- paused 动画暂停
animation-play-state: paused;
animation-fill-mode: 动画的填充模式
- none 默认值 动画执行完毕元素回到原来位置
- forwards 动画执行完毕元素会停止在动画结束的位置
- backwards 动画延时等待时，元素就会处于开始位置
- both 结合了forwards 和 backwards
animation: test 2s 2 1s alternate;
变形 transform
变形就是指通过CSS来改变元素的形状或位置
变形不会影响到页面的布局
transform 用来设置元素的变形效果
平移 translate
translateX() 沿着x轴方向平移
transform: translateX(100px);
平移过渡效果
translateY() 沿着y轴方向平移
transform: translateY(100px);
平移过渡效果
