站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

使用CSS实现一个吃豆人的Loading加载效果

时间:2022-01-06 [网络编程]作者:fabuyuan 浏览:4 次

本篇文章给大家介绍一下使用纯CSS怎么实现一个吃豆人的Loading加载效果,希望对大家有所帮助!

使用CSS实现一个吃豆人的Loading加载效果  2

CSS确实是魅力大的离谱,可能最近一段时间关注我文章的会知道,我发了好多跟CSS有关的文章了,有的是看到网上有这种效果,自己进行复刻,有的是利用一个自己刚看到的知识点,运用它去做一些好玩的东西,总之,CSS真的太好玩啦!

今天给大家带来的表演,创意起源于我的博客的友链页,如果他人的头像我请求不到资源,那么就会补上一个吃豆人的Loading上去,而这个吃豆人,就是我今天带来的表演~

使用CSS实现一个吃豆人的Loading加载效果  2

实现吃豆人的大嘴巴

先来实现左边的大嘴巴,我是用了两个这种形状的东西,完后给下面的那个margin-top:-50px,它俩就实现了重叠,之后用动画效果,让上面顺时针旋转,下方与之相反,旋转90°就可以实现嘴巴张开合上的动作了。

使用CSS实现一个吃豆人的Loading加载效果  2

    width: 0px;
    height: 0px;
    border-right: 25px solid transparent;
    border-top: 25px solid #279fcf;
    border-left: 25px solid #279fcf;
    border-bottom: 25px solid #279fcf;
    border-radius: 25px;

旋转动画分别是:

@keyframes rotate_pacman_up {
  0% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg); }

  50% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); }

  100% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg); } 
}
@keyframes rotate_pacman_down {
  0% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg); 
     }

  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
      }

  100% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
       } 
}

之后将动画加到我们刚刚生成的那两个元素的css中即可(运用这个属性就行:animation),因为我是div套了div,所以我用的是伪元素来选择的:分别是first-of-typenth-child(2),选中了第一个跟第二个div来作为吃豆人的嘴巴。

要注意的是,两个嘴巴的动画时间要同步,否则这个嘴可就上下乱窜了:

    animation: rotate_pacman_up 0.75s 0s infinite

现在的效果是这样的:

使用CSS实现一个吃豆人的Loading加载效果  2

实现吃豆人的豆子

同样,我们在刚刚的两个div同级的地方,又建了三个div,我真是太喜欢div了~

万物皆可div!!!

豆子相对于嘴巴来说就很简单,首先他是圆的,其次呢,它的动画是向左移动的,具备这两个条件,就可以了。我们直接使用伪元素选中3、4、5三个div,加上这段css即可。

    background-color: #279fcf;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    width: 10px;
    height: 10px;
    position: absolute;
    transform: translate(0, -6.25px);
    top: 25px;
    left: 100px;

会不会有人问:为什么你就知道定位的时候是-6.25px呢?,最后解释最后解释。

接下来加上向左移动的动画:

@keyframes pacman-balls {
  75% {
    opacity: 0.7; }

  100% {
    -webkit-transform: translate(-100px, -6.25px);
            transform: translate(-100px, -6.25px); } 
}

似乎,要是走一段变得透明一些是不是会更好?这个有待考虑~

最后将动画分别用选择器挂到第3、4、5个div上就行啦,同时要注意,动画的起始时间不要设置成一样的,否则它们就同步啦!!!我这里设置的分别是0.33/0.66/0.99秒哦~ 就像这样:

    animation: pacman-balls 1s 0.33/0.66/0.99s infinite linear

看一下最终效果吧~

使用CSS实现一个吃豆人的Loading加载效果  2

关于那个-6.25px

其实.....我研究了好半天,我把图给大家,要是能算出来也帮我算算,我最后是实验出来的,6到7都差不多,但是6.25更顺眼一些emmm,但是实验到7px的时候,小圆的圆心就有点明显偏上了,所以emm就6.25吧(差不多~,还有就是我想写6.5的,但是总觉得6.25好听点emm)。

使用CSS实现一个吃豆人的Loading加载效果  2

(学习视频分享:css视频教程

以上就是使用CSS实现一个吃豆人的Loading加载效果的详细内容,更多请关注站长家园其它相关文章!

本文标签:  cssLoading加载效果吃豆人

转载请注明来源:使用CSS实现一个吃豆人的Loading加载效果

本文永久链接地址:https://www.adminjie.com/post/7263.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • 重启docker服务后容器会被删除吗

      重启docker服务后容器会被删除吗

      在docker中,重启docker服务后容器不会被删除,但是容器会停止运行,重启了docker进程后,该服务器上跑的docker容器会全部退出不会被删除,可以利...

    • centos7 终端中文乱码怎么办

      centos7 终端中文乱码怎么办

      centos7终端中文乱码的解决办法:1、查看服务器编码;2、查看终端xshell编码;3、设置“exportLANG="zh_CN.UTF-8"”;4、重启...

    • html5标签head和header有什么区别

      html5标签head和header有什么区别

      区别:1、head标签用于定义文档头部,它是所有头部元素的容器,而header标签用于定义文档的页眉(介绍信息);2、浏览器都支持head标签,而旧版本浏览器均...

    • docker可以装在虚拟机上吗

      docker可以装在虚拟机上吗

      docker可以装在虚拟机上;docker容器运行在虚拟机或者物理机上都可以,无论是虚拟机还是物理机,都是硬件和基础设施的一种交付方式,而docker容器主要就...

    • centos是linux系统吗

      centos是linux系统吗

      centos是linux操作系统的一个版本,centos主要分为两个版本:1、CentOSLinux版,该Linux版每两年发行一次;2、CentOSStr...

  • 买服务器送会员
  • 热门文章
  • 买服务器送会员