统计
  • 建站日期:2021-03-10
  • 文章总数:275 篇
  • 评论总数:115 条
  • 分类总数:21 个
  • 最后更新:9月4日
文章 技术代码

用css和HTML做loding小动画

小椿
首页 技术代码 正文


1、先进行简单的页面布局
1.1
我这里是使用了一个div标签包了两个p标签
每个p标签里面又包了四个span标签
构建了一个简单的页面搭建

其余的用css就可以进行下一步操作了

<body>
    <div>
        <p>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </p>
        <p>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </p>
    </div>
</body>

2、使用css样式实现效果
2.1
下面的是详细的书写css样式 和解析
篇幅有点长 详细解释了每一步的操作 写完之后建议整体浏览一遍

<style type="text/css">
        /* 使用通配符进行所用标签去除默认的margin 和 padding样式 */
        * {
            margin: 0;
            padding: 0;
        }
        /* 给整个body加了一个黑色的背景颜色(加不加都可) */
        body {
            background: black;
        }
        /* 这里给div标签设定了宽高各200px,
        给了一个页面 左右居中 上间距给了200px  ,
        给了一个相对定位*/
        div {
            width: 200px;
            height: 200px;
            margin: 200px auto;
            position: relative;
        }
        /* 这里给所有的p标签都设置了宽高200px ,
         给了一个绝对定位
         (这里给绝对定位  因为父元素有定位 
         所以是根据父级元素 也就是div进行定位) */
        div p {
            width: 200px;
            height: 200px;
            position: absolute;
        }
        /* 这里给所有的span标签设置了基础样式 */
        p span {
            /* 将行内元素span转换成块元素   
            使span标签支持设定宽高和一些其他css属性  */
            display: block;
            /* 宽高各40px   背景色为白色   文本居中  行高40px */
            width: 40px;
            height: 40px;
            background: white;
            text-align: center;
            line-height: 40px;

            /* 设定为圆角盒子  */
            border-radius: 50%;

            /* 这里调用下面的动画(tom) 过度时间为1s 匀速 循环 */
            animation: tom 1s linear infinite;

            /* 设定盒子阴影 水平方向0 垂直方向0 模糊度为3px 延伸半径为10px 阴影颜色为白色  */
            box-shadow: 0 0 3px 10px white;
        }

        /* 这里使用结构伪类选择器将span分别定位到到盒子p的四个角   
        (注意:这里的定位也是根据父级p定位的  因为盒子p也给了定位)*/
        p span:nth-of-type(2) {
            position: absolute;
            right: 0;
            top: 0;
        }

        p span:nth-of-type(3) {
            position: absolute;
            right: 0;
            bottom: 0;
        }

        p span:nth-of-type(4) {
            position: absolute;
            left: 0;
            bottom: 0;
        }

        /* 这里选择第二个盒子p 使其旋转45度(rotate属性值 默认按照z轴旋转  单位是deg) */
        p:nth-of-type(2) {
            transform: rotate(45deg);
        }

        /* 定义动画关键帧  使用关键字@keyframes 名称{} 定义动画的关键帧
            这里在开始时为缩小到没有
            中间时从没有放大到正常
            结束时再次缩小到没有

        */
        @keyframes tom {
            0% {
                transform: scale(0);
            }

            50% {
                transform: scale(1);
            }

            100% {
                transform: scale(0);
            }
        }

        /* 这里给每一个span标签 按照顺时针的方向设定了动画开始延迟  
        由于给正数会在动画开始时影响动画效果  
        这里给的负数  就不会出现页面刚打开会有个别不动的
         */

        /* 第一个p的  第一个span */
        p:nth-of-type(1) span:nth-of-type(1) {
            animation-delay: -0.12s;
        }

        /* 第二个p的  第一个span */
        p:nth-of-type(2) span:nth-of-type(1) {
            animation-delay: -0.23s;
        }

        /* 第一个p的  第二个span */
        p:nth-of-type(1) span:nth-of-type(2) {
            animation-delay: -0.34s;
        }

        /* 第二个p的  第二个span */
        p:nth-of-type(2) span:nth-of-type(2) {
            animation-delay: -0.45s;
        }

        /* 第一个p的  第三个span */
        p:nth-of-type(1) span:nth-of-type(3) {
            animation-delay: -0.56s;
        }

        /* 第二个p的  第三个span */
        p:nth-of-type(2) span:nth-of-type(3) {
            animation-delay: -0.67s;
        }

        /* 第一个p的  第四个span */
        p:nth-of-type(1) span:nth-of-type(4) {
            animation-delay: -0.78s;
        }

        /* 第二个p的  第四个span */
        p:nth-of-type(2) span:nth-of-type(4) {
            animation-delay: -0.89s;
        }
    </style>
版权声明 1 本站名称:乡野风情
2 本站网址:http://www.t35.cn/
3 本文网址:http://www.t35.cn/jsdm/262.html
4 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ:550966987进行删除处理。
5 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
6 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
7 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
-- 展开阅读全文 --
前端HTML5 简单flex布局
« 上一篇
jQuery一行代码实现选项卡效果
下一篇 »

发表评论