#前端学习笔记#day11动画小米

2024-01-16 21:21:46

图和图之间的缝隙可以用vertical-align: top;
width设置100%，说明本身宽度是包含块的100%，如果包含块开启绝对定位，就要考虑给包含块父元素开启相对定位
clearfix是清除float导致的塌陷
垂直居中
- top: 0;
- bottom: 0;
- margin: auto;
回到顶部的元素back-top
- 页面中固定部分：固定定位
  - position: fixed; bottom: 70px;距离底部70个像素
  - 布局等式
    - left+margin left+margin right+right=视口的宽度
    - auto+0+26+0+60=视口宽度
    - right=50%表示将right设置为视口宽度的50%
    - auto+0+26+ -639 +50%=视口宽度
设置网站的图标（在标题栏和收藏栏）
- 网站图片一般都储存在网站的根目录下，名字一般都叫做 favicon.icon
- 想自己制作的话，就搜制作icon
- 或者直接右键查看网页的源代码
加速：删除注释换行空格
- 使用方法
  - 摁住键盘F1键输入minify
  - 选择minify:document
  - 然后文件夹会多出一个.min文件夹
动画
- 过渡transition: height 2s;时序函数
  - 通过过渡可以指定当一个属性发生变化时的切换方式
  - 通过过渡可以创建一些非常好的效果，提升用户体验
  - transition-property: 指定要执行过渡的属性，多个属性间使用逗号隔开。如果所有属性都要隔开，使用all，大部分属性都支持过渡效果
    - width height all
  - transition-duration: ; 指定过渡效果的时间
    - 2s，和property一起用
    - 单位s和ms
    - 1s=1000ms
    - 可以分别指定时间
  - transition-timing-function: ease;
    - ease默认值，慢速开始，先加速，再减速
    - linear 匀速运动
    - ease-in 加速运动
    - ease-out 减速运动
    - ease-in-out 先加速再减速
    - cubic-bezier()来指定时序函数，在cubic-bezier网站上可以生成
    - steps() 分步执行过渡效果
动画
- 动画和过渡类似，都可以实现一些动态效果
  - 不同的是过渡需要在某个属性发生变化时才被触发
  - 动画可以自动触发动态效果
- 设置动画效果必须先设置一个关键帧
  - 关键帧就是设置了动画执行的每一步骤
  - identifier就是一个名字，我们可以自己修改 animation-name: test;
  - animation-iteration-count: infinite;无限次
  - animation-direction: ;指定动画运行的方向
    - 默认值normal从from到 to
    - reverse 从to到from
    - alternate 从from到 to，重复执行时反向执行，就是来回
    - alternate-reverse
  - animation-play-state: ;设置动画的执行状态
    - running 默认值动画执行
    - paused 动画暂停
  - animation-fill-mode: ;动画的填充模式
    - 默认值none ，动画执行完毕，元素回到原来的位置
    - forwards 动画执行完毕，元素停止在动画结束位置
    - backwards 动画延时等待时，元素就会处于开始位置
    - both 动画开始就会处于开始位置，结束就会停止在结束位置
奔跑的少年
- 这边的animation: run 2s steps(6);

码农公寓

相关文章