animation动画
anmimation-name:动画名(自定义) animation-duration动画持续时间 animation-delay:动画延迟时间
animation-iteration-count:动画重复次数,默认1,infinite无限. animation-timing-function动画运动形式
animation:动画名 时间 次数 运动形式
动画名通过@keyframes 名{}定义 在keyf里定义运动的过程
.loading{width: 40px;height: 40px;margin: 0 auto;position: relative;}
.loading .box1,.loading .box2{width: 100%;height: 100%;position: absolute;}
/* div1,2各画出4个小球 */
.loading .box1 div,.loading .box2 div{width: 10px;height: 10px;border-radius: 50%;background: rebeccapurple;position: absolute;
animation: zhuan 2s 2s infinite linear;}
/* div2的小球旋转45度,形成一个传统的加载样式 */
.loading .box2{transform: rotate(45deg);}
/* 小球的位置分别在正方形的四个角 */
.loading .box1 div:nth-child(1),.loading .box2 div:nth-child(1){left: 0; top: 0;}
.loading .box1 div:nth-child(2),.loading .box2 div:nth-child(2){right: 0; top: 0;}
.loading .box1 div:nth-child(3),.loading .box2 div:nth-child(3){right: 0; bottom: 0;}
.loading .box1 div:nth-child(4),.loading .box2 div:nth-child(4){left: 0; bottom: 0;}
顺序缩放-每个小球延时缩放
.loading .box1 div:nth-child(1){animation-delay: 0;}
.loading .box1 div:nth-child(2){animation-delay: 0.4s;}
.loading .box1 div:nth-child(3){animation-delay: 0.8s;}
.loading .box1 div:nth-child(4){animation-delay: 1.2s;}
.loading .box2 div:nth-child(1){animation-delay: 0.2s;}
.loading .box2 div:nth-child(2){animation-delay: 0.6s;}
.loading .box2 div:nth-child(3){animation-delay: 1s;}
.loading .box2 div:nth-child(4){animation-delay: 1.4s;}
@keyframes zhuan{
0%{transform: scale(1);}
50%{transform: scale(0);}
}
<body>
<div class="loading">
<div class="box1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
JS部分
JS的基础部分有看过JS权威指南,但没有很理解,今天看教程视频,感觉讲的基础部分我好像都懂,或许是教程视频
质量的问题…
DOM:文档 BOM:浏览器
document.write("<h1.>内容</h1.>")能够直接在页面输入内容,且标签生效。如果是要输出标签就要用到转义字符。
alert(“弹出内容”)
console.log(“内容”)输出到控制台,用于代码调试。
parseInt(变量,变量的数据进制):1,取整数 2,能把数据转换成10进制(当转换的数据有字符串时,截取字符串前的数据)
parseFloat():取浮点数
arr.reverse()数组逆序
今日总结:html/css部分只浅学了一个animation的动画,想学一部分JS,发现JS的部分教学视频教的好像质量不高,拖沓,而且讲的部分与我之前在《JS权威指南》理解的基础部分差不多,今天的JS学的非常少,可能JS需要换个学习方法。