动画animation：有@keyframes创建的动画名称。 过段时间，过渡方式，延迟时间，动画的播放次数，动画播放的方向
1.animation-name为指定的动画名称， 2.animation-duration为动画持续时间。 3.animation-timing-function为动画的变化速度。 4.animation-delay为动画延迟多久才开始。 5.animation-iteration-count为动画的循环次数。infinite无限循环 默认值1 6.animation-direction 播放方向 ormal 向前循环 alternate 播放为偶数次向前播放
使用之前需要先设置一个@keyframes 自取名字 { 0%{ } 30%{ } 100%{ } } 如下代码： div {position: absolute;（设置绝对定位，进行位移） width: 200px; height: 200px; background-color: red; animation: donghua 3s ease-in-out 0s 2 （infinite） alternate;
（动画名字 持续时间 动画时间 0s延迟 播放2次 无限循环 偶数次向前播放一开始为0次 0是偶数所有会向前播放 ） / @-webkit-keyframes donghua 为兼容谷歌浏览器/ / @-moz-keyframes donghua 为兼容火狐浏览器/ @keyframes donghua { 0% { left: 0px; top: 0px; }
50% {
left: 500px;
top: 500px;
}
100% {
left: 1200px;
top: 0px;
}
}
复制代码
移动端： 头部meat标签的使用
Document 一、移动端的使用单位
移动端的使用单位rem： 1.rem是相对根元素（html）来设置的 2.1rem就相当于是根元素原大小,如果根元素没设置大小那么1rem就默认等于16px 移动端使用单位em特点：
- em的值并不是固定的
- em会继承父级元素的字体大小
<!-- em有局限性 父元素变化了 em所对应的px也变化 -->
复制代码
二、媒体查询 1.@media screen 的运用：在引入专门写它的css链接时，链接要写在body的下方 max-width 最大宽度 min-width 最小宽度
div{
width: 200px;
height: 200px;
background-color: blanchedalmond;
}
/* 实现div在屏幕不同大小的情况下 显示不同的颜色 */
/* 500 - 700 包括500 和 700 像素的时候*/
/* @media screen and (max-width:700px) and (min-width:500px) {
div{
background-color: chartreuse;
}
} */
/* min-width:800px 屏幕大小 大于等于800px的时候显示如下的样式 */
@media screen and (min-width:800px) {
div{
background-color: red;
}
}
/* max-width:700px 屏幕大小 小于等于700px的时候显示如下样式 */
@media screen and (max-width:700px) {
div{
background-color: yellow;
}
}
<!-- 响应式的样式要放到最后 -->
<!-- all 代表所以的屏幕 -->
<!-- only screen 代表仅有电脑屏幕支持 -->
<link rel="stylesheet" href="./media.css" media="only screen and (max-width:700px)">
作者：用户8712537862007
链接：juejin.cn/post/703715…
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
