ZG前端学习系统day14 2020-11-19
关键帧动画
核心思想 ：1.制作动画的轨迹 2. 调用动画
在style标签中先设置
@keyframes 帧动画名字 {
from{
transform:translate(x,y)
}
to{
transform:translate(x,y)
}
}
from–to的写法只能确定0%~100% 如果要设置多个帧的话使用百分比。
在那个盒子使用关键帧就对拿个进行调用
animation: name duration timing-function delay iteration-count direction fill-mode;
用到拿个改那个，用不到的直接删掉。
<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; }
.box { width: 400px; height: 400px; background: pink; }
.box1 { width: 100px; height: 100px; background: #f00; animation: move 4s linear infinite; }
@keyframes move { 0% { transform: translate(0, 0); }
25% { transform: translate(300px, 0); }
50% { transform: translate(300px, 300px) }
75% { transform: translate(0, 300px); }
100% { transform: translate(0, 0); } } </style></head>
<body> <!-- 制作动画轨迹 调用动画 --> <div class="box"> <div class="box1">
</div> </div>
</body>
</html>直接引用外部的帧动画效果
网址（
https://animate.style/
）右键 --查看源代码–找到link标签中的animate.min.css文件下载放入到自己的css文件中 通过对照自己想要什么方法就修改相应的内容
利用帧动画的一个玫瑰花效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .box{ width: 300px; height: 285px; margin: 250px auto; position: relative; } .box p{ line-height: 285px; text-align: center; font-size: 44px; font-weight: bold; color: #ef696c; text-shadow: 14px 14px 4px pink; } .box img{ position: absolute; left: 0; top: 0; transform: scale(0); opacity: 0; } .box img:nth-child(1){ animation: move 8s linear infinite ; } .box img:nth-child(2){ animation: move 8s 2s linear infinite ; } .box img:nth-child(3){ animation: move 8s 4s linear infinite ; } .box img:nth-child(4){ animation: move 8s 6s linear infinite ; } .box img:nth-child(5){ animation: move 8s 8s linear infinite ; } @keyframes move{ 0%{ transform: scale(0); opacity: 0; } 25%{ transform: scale(1); opacity: .5; } 50%{ transform: scale(2); opacity: 1; } 75%{ transform: scale(3); opacity: .5; } 100%{ transform: scale(4); opacity: 0; } } </style></head><body> <div class="box"> <img src="./images/hua2.png" alt=""> <img src="./images/hua2.png" alt=""> <img src="./images/hua2.png" alt=""> <img src="./images/hua2.png" alt=""> <img src="./images/hua2.png" alt=""> <p>LOVE</p> </div></body></html>flex弹性盒子布局
弹性盒子 css3中一种新的布局模式提供给了一种更加有效的方式来对一个容器（父元素）中的子元素（项目）进行排列对齐和分配空白空间
display：flex 让父元素变成弹性盒子，来控制子元素的布局，子元素会沿着主轴的方向对齐
备注：默认主轴是x轴，还可以设置y方向
特点：1子元素类似行内块元素，即使行内元素也可以设置宽高。
2 子元素的float clear vertical-align属性失效
flex弹性布局中一些常用的属性
1 改变主轴的方向：flex-direction{row 。column）
2 主轴的对齐方式： justify-content{flex-start。flex-end。center。space-between。space-around}
3 侧轴的对齐方式 align-items{flex-start。flex-end。center。space-between。space-around}
4 项目折行 **flex-wrap{**默认nowrap}
5 侧轴对齐来控制中间的间隙 align-content{flex-start。flex-end。center。space-between。space-around}
6作用在子元素上的 align-self控制被选中项目侧轴的对齐方式{flex-start。flex-end。center。space-between。space-around}
order 排序优先级 数越大 越往后排 默认的情况是0 支持负值
flex中{flex-shrink和flex-grow}
利用flex弹性布局做骰子的6个面
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } html,body{ height: 100%; } body{ display: flex; align-items: center; } .box { width: 100%; display: flex; justify-content: space-between; } .box div{ display: flex; width: 200px; height: 200px; background: #e7e7e7; border-radius: 5px; box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7; padding: 20px; } .box span{ width: 30px; height: 30px; border-radius: 50%; background: #333; box-shadow: inset 0 3px #111, inset 0 -3px #555; } .box div:nth-child(1) { justify-content: center; align-items:center ; } .box div:nth-child(2){ justify-content:space-between; } .box div:nth-child(2) span:nth-child(2){ align-self: flex-end; } .box div:nth-child(3){ justify-content:space-between; } .box div:nth-child(3) span:nth-child(2){ align-self: center; } .box div:nth-child(3) span:nth-child(3){ align-self: flex-end; } .box p{ display: flex; } .box div:nth-child(4){ justify-content: space-between; } .box div:nth-child(4) p{ flex-direction: column; justify-content: space-between; } .box div:nth-child(5) p{ flex-direction: column; justify-content: space-between; } .box div:nth-child(5) p:nth-child(2){ justify-content: center; } .box div:nth-child(5){ justify-content: space-between; } .box div:nth-child(6) p{ flex-direction: column; justify-content: space-between; } .box div:nth-child(6){ justify-content: space-around; } </style></head><body> <div class="box"> <div> <span></span> </div> <div> <span></span><span></span> </div> <div> <span></span> <span></span> <span></span> </div> <div> <p><span></span><span></span></p> <p><span></span><span></span></p> </div> <div> <p><span></span><span></span></p> <p><span></span></p> <p><span></span><span></span></p> </div> <div> <p> <span></span> <span></span> <span></span> </p> <p> <span></span> <span></span> <span></span> </p> </div> </div></body></html>~计算 calc（expression） 数学表达式 可支持+ - * /进行运算
less预处理
CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。
定义 @变量名 ： 值 （中间用冒号连接）
引用 变量嵌套在属性名中需要使用{ }
可以不带参数的混入还可以带参数调用 像函数一样
下一篇： 社群活跃的秘密