动画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; }
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
position: absolute;
width: 100px;
height: 100px;
background-color: aquamarine;
border-radius: 50%;
animation: donghua 5s ease-in-out 0s;
}
@keyframes donghua {
0%{
left:0px;
top:0px;
}
50%{
left:600px;
top: 600px;
}
100%{
left:1000px;
top:0px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
移动端： 头部meat标签的使用 Document 一、移动端的使用单位 移动端的使用单位rem： 1.rem是相对根元素（html）来设置的 2.1rem就相当于是根元素原大小,如果根元素没设置大小那么1rem就默认等于16px 移动端使用单位em特点： 1,em的值并不是固定的 2,em会继承父级元素的字体大小 二、媒体查询 1.@media screen 的运用：在引入专门写它的css链接时，链接要写在body的下方 max-width 最大宽度 min-width 最小宽度
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: blanchedalmond;
}
/* 实现div在屏幕不同大小的情况下 显示不同的颜色 */
/* 媒体查询 */
/*
max-width 最大宽度
min-width 最小宽度
*/
/* 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;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
