15天前端学习-第四天（个人记录）

最新推荐文章于 2023-11-02 19:13:30 发布

玩命灰老鼠

最新推荐文章于 2023-11-02 19:13:30 发布

阅读量165

点赞数

本文链接：https://blog.csdn.net/m0_48338638/article/details/106593013

版权

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需要换个学习方法。

玩命灰老鼠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
15天前端学习-第四天（个人记录）

animation动画anmimation-name:动画名(自定义) animation-duration动画持续时间 animation-delay:动画延迟时间animation-iteration-count:动画重复次数,默认1,infinite无限. animation-timing-function动画运动形式animation:动画名时间次数运动形式动画名通过@keyframes 名{}定义在keyf里定义运动的过程 .loading{width: 40px;hei
复制链接

扫一扫