弹跳小球加载

这篇具有很好参考价值的文章主要介绍了弹跳小球加载。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果演示

弹跳小球加载,若冰说CSS,css,css,前端,若冰说CSS

实现了一个加载动画,可以用来显示页面正在加载中的状态。具体来说,它使用了CSS的动画和变换来实现一个弹跳的圆圈和一个向右移动的线条。当页面加载完成后,这个动画会自动消失。

Code

<div class="loader"></div>
body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #212121;
}

.loader {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 0 auto;
}

.loader:before {
    content: "";
    position: absolute;
    bottom: 30px;
    left: 50px;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background: #2a9d8f;
    animation: loading-bounce 0.5s ease-in-out infinite alternate;
}

.loader:after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    height: 7px;
    width: 45px;
    border-radius: 4px;
    box-shadow: 0 5px 0 #f2f2f2, -35px 50px 0 #f2f2f2, -70px 95px 0 #f2f2f2;
    animation: loading-step 1s ease-in-out infinite;
}

@keyframes loading-bounce {
    0% {
        transform: scale(1, 0.7);
    }

    40% {
        transform: scale(0.8, 1.2);
    }

    60% {
        transform: scale(1, 1);
    }

    100% {
        bottom: 140px;
    }
}

@keyframes loading-step {
    0% {
        box-shadow: 0 10px 0 rgba(0, 0, 0, 0),
            0 10px 0 #f2f2f2,
            -35px 50px 0 #f2f2f2,
            -70px 90px 0 #f2f2f2;
    }

    100% {
        box-shadow: 0 10px 0 #f2f2f2,
            -35px 50px 0 #f2f2f2,
            -70px 90px 0 #f2f2f2,
            -70px 90px 0 rgba(0, 0, 0, 0);
    }
}

实现思路拆分

body {
  height: 100vh; /* 设置body高度为视口高度 */
  display: flex; /* 设置body元素为flex布局 */
  justify-content: center; /* 设置flex容器中内容的水平居中对齐 */
  align-items: center; /* 设置flex容器中内容的垂直居中对齐 */
  background-color: #212121; /* 设置背景颜色为深灰色 */
}

这段代码设置了页面的基本样式,包括高度、布局方式、背景颜色等。

.loader {
  position: relative; /* 设置loader元素为相对定位 */
  width: 120px; /* 设置loader元素的宽度为120px */
  height: 90px; /* 设置loader元素的高度为90px */
  margin: 0 auto; /* 设置loader元素的水平居中对齐 */
}

这段代码设置了loader元素的样式,包括位置、大小、边距等。

.loader:before {
  content: ""; /* 设置伪元素的内容为空 */
  position: absolute; /* 设置伪元素为绝对定位 */
  bottom: 30px; /* 设置伪元素距离底部的距离为30px */
  left: 50px; /* 设置伪元素距离左侧的距离为50px */
  height: 30px; /* 设置伪元素的高度为30px */
  width: 30px; /* 设置伪元素的宽度为30px */
  border-radius: 50%; /* 设置伪元素的圆角半径为50% */
  background: #2a9d8f; /* 设置伪元素的背景颜色为绿色 */
  animation: loading-bounce 0.5s ease-in-out infinite alternate; /* 设置伪元素的动画效果 */
}

这段代码设置了loader元素的伪元素的样式,包括位置、大小、圆角半径、背景颜色和动画效果等。

.loader:after {
  content: ""; /* 设置伪元素的内容为空 */
  position: absolute; /* 设置伪元素为绝对定位 */
  right: 0; /* 设置伪元素距离右侧的距离为0 */
  top: 0; /* 设置伪元素距离顶部的距离为0 */
  height: 7px; /* 设置伪元素的高度为7px */
  width: 45px; /* 设置伪元素的宽度为45px */
  border-radius: 4px; /* 设置伪元素的圆角半径为4px */
  box-shadow: 0 5px 0 #f2f2f2, -35px 50px 0 #f2f2f2, -70px 95px 0 #f2f2f2; /* 设置伪元素的阴影效果 */
  animation: loading-step 1s ease-in-out infinite; /* 设置伪元素的动画效果 */
}

这段代码设置了loader元素的另一个伪元素的样式,包括位置、大小、圆角半径、阴影效果和动画效果等。

@keyframes loading-bounce {
  0% {
    transform: scale(1, 0.7); /* 设置伪元素在动画开始时的缩放比例 */
  }

  40% {
    transform: scale(0.8, 1.2); /* 设置伪元素在动画进行到一半时的缩放比例 */
  }

  60% {
    transform: scale(1, 1); /* 设置伪元素在动画结束时的缩放比例 */
  }

  100% {
    bottom: 140px; /* 设置伪元素在动画结束后的底部距离 */
  }
}

这段代码设置了loader元素的伪元素的动画效果,包括缩放比例和底部距离等。

@keyframes loading-step {
  0% {
    box-shadow: 0 10px 0 rgba(0, 0, 0, 0),
      0 10px 0 #f2f2f2,
      -35px 50px 0 #f2f2f2,
      -70px 90px 0 #f2f2f2; /* 设置伪元素在动画开始时的阴影效果 */
  }

  100% {
    box-shadow: 0 10px 0 #f2f2f2,
      -35px 50px 0 #f2f2f2,
      -70px 90px 0 #f2f2f2,
      -70px 90px 0 rgba(0, 0, 0, 0); /* 设置伪元素在动画结束时的阴影效果 */
  }
}

这段代码设置了loader元素的伪元素的动画效果,包括阴影效果。具体来说,它使用了CSS的box-shadow属性来设置伪元素的阴影效果,包括四个阴影层次,每个阴影层次的位置、颜色和模糊半径等属性。在动画开始时,伪元素的阴影效果为四个黑色半透明的阴影层次,从左上角到右下角依次变为灰色半透明的阴影层次;在动画结束时,伪元素的阴影效果为四个灰色半透明的阴影层次,从右上角到左下角依次变为黑色半透明的阴影层次。这样可以实现一个向右移动的线条的效果。文章来源地址https://www.toymoban.com/news/detail-791468.html

到了这里,关于弹跳小球加载的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS 使用 SVG 绘制动态皮筋与小球交互动画

    使用 animation 控制 SVG 的 path 属性执行动画 使用 CSS 设置 SVG 部分属性 实现上述代码后,页面效果如下: 完成上述代码后,皮筋就可以开始运动,效果图如下: 完成上述代码后就可以完成所有效果。 完整代码下载

    2024年04月12日
    浏览(40)
  • nginx部署前端项目 nginx部署无法加载js/css问题 Uncaught SyntaxError: Unexpected token ‘<‘

    注意:将多个html项目放在一个server中出现js,css加载不出来问题 可以将文件放在主项目同级目录下(暂时解决,可能是静态资源配置问题,不会弄)。 1.下载nginx,解压 2.将项目放入html目录下 3.修改nginx.conf文件 4.修改端口防止占用和添加新映射 5.普通html项目,部署会出现以下

    2024年02月04日
    浏览(48)
  • Threejs进阶之十三:CSS3DRenderer与Tween.js实现粒子小球按规律变化

    今天我们使用CSS3DRenderer+Tween.js实现Threejs官方示例中的粒子小球按规律变化的效果,先看下最终实现的效果 先来分析下,这个页面的动画效果是由512个小球组合起来的四种不同变化,分别是曲面、立方体、随机和圆球四种变化;下面我们来实现下这个效果 老套路,要实现上面

    2024年02月03日
    浏览(53)
  • 【CSS加载动画特效】28种纯CSS实现的加载loading动态特效(附源码)

    今天其实还是有点期待6月份城市赛道的成绩公布,但是可能因为出现城市太多等问题,官方也还在快马加鞭的统计中,我也趁机再发一篇前端的文章了,其实在很多系统里面我们都看到过各种各样的加载中样式,但是总有些显得平平无奇,今天我就统计了28种load加载动画特效

    2024年02月15日
    浏览(59)
  • css简单加载动效

    圆环加载 斑马线加载 其他

    2024年02月15日
    浏览(31)
  • CSS 飞舞线条加载中效果

    2024年01月18日
    浏览(48)
  • CSS 实现页面底部加载中与加载完毕效果

    效果图 实现代码

    2024年02月11日
    浏览(68)
  • CSS特效009:音频波纹加载律动

    CSS常用示例100+专栏目录 本专栏记录的是经常使用的CSS示例与技巧,主要包含CSS布局,CSS特效,CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点,CSS特效主要是一些动画示例,CSS花边是描述了一些CSS相关的库、知识点、理论篇章等。 因为常用所以记录

    2024年02月05日
    浏览(29)
  • CSS3实现动画加载效果

    2024年02月07日
    浏览(54)
  • css小练习:案例6.炫彩加载

    HTML 写了一个加载动画效果,使用了一个包含多个  span  元素的  div  元素,并为每个  span  元素设置了一个自定义属性  --i 。 这段代码创建了一个简单的动态加载动画,由20个垂直排列的线段组成。每个线段使用一个  span  元素表示,并通过设置不同的  --i  值来控制它

    2024年02月14日
    浏览(31)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包