8

「HTML+CSS」--自定义加载动画【026】

 3 years ago
source link: https://blog.csdn.net/weixin_44225182/article/details/115451531
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Hello！小伙伴！
首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～
哈哈 自我介绍一下
昵称：海轰
标签：程序猿一只｜C++选手｜学生
简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～）
学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！
日常分享：微信公众号【海轰Pro】记录生活、学习点滴，分享一些源代码或者学习资料，欢迎关注～

在这里插入图片描述

Demo代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <section><span></span></section>
</body>
</html>

html,body{
  margin: 0;
  height: 100%;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #263238;
}
section {
    width: 650px;
    height: 300px;
    padding: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid red;
}
span {
  width : 96px;
  height: 96px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  border: 20px solid;
  animation: animloader 2s linear infinite alternate;
}

@keyframes animloader {
  0% { border-color: rgba(255,255,255, 1)  rgba(255,255,255, 0)  rgba(255,255,255, 0)  rgba(255,255,255, 0);}
  33% { border-color: rgba(255,255,255, 1)  rgba(255,255,255, 1)  rgba(255,255,255, 0)  rgba(255,255,255, 0);}
  66% { border-color: rgba(255,255,255, 1)  rgba(255,255,255, 1)  rgba(255,255,255, 1)  rgba(255,255,255, 0);}
  100% { border-color: rgba(255,255,255, 1)  rgba(255,255,255, 1)  rgba(255,255,255, 1)  rgba(255,255,255, 1);}
}

使用span标签，设置

  • 宽度、高度均为96px
  • 边框：20px solid

效果图如下
在这里插入图片描述

span圆角化

border-radius: 50%;

效果图如下

在这里插入图片描述

为span添加动画

动画总共分为4帧

第一帧

  • 上边框颜色设置为：白色 其余为透明

在这里插入图片描述

为了便于观察

这里给出未对span圆角化之前的视角

这样就会更好得理解每一帧的原理
在这里插入图片描述

第二帧

  • 上+右 边框颜色设置为：白色 其余透明
    在这里插入图片描述

未设置border-radius: 50%前的效果如下

在这里插入图片描述

第三帧

  • 上+右+下 边框颜色设置为白色 其余为透明
    在这里插入图片描述

未设置border-radius: 50%前的效果如下

在这里插入图片描述

第四帧

  • 上+下+左+右 边框均为白色
    在这里插入图片描述

未设置border-radius: 50%前的效果如下

在这里插入图片描述

变化过程就是：

在这里插入图片描述

 animation: animloader 2s linear infinite ;

/*动画实现*/
@keyframes animloader {
/*第一帧*/
  0% { border-color: rgba(255,255,255, 1)  rgba(255,255,255, 0)  rgba(255,255,255, 0)  rgba(255,255,255, 0);}
  /*第二帧*/
  33% { border-color: rgba(255,255,255, 1)  rgba(255,255,255, 1)  rgba(255,255,255, 0)  rgba(255,255,255, 0);}
    /*第三帧*/
  66% { border-color: rgba(255,255,255, 1)  rgba(255,255,255, 1)  rgba(255,255,255, 1)  rgba(255,255,255, 0);}
    /*第四帧*/
  100% { border-color: rgba(255,255,255, 1)  rgba(255,255,255, 1)  rgba(255,255,255, 1)  rgba(255,255,255, 1);}
}

注：这里使用了rgba函数，设置透明级别为0来实现的透明色

效果图如下

在这里插入图片描述

从上面的效果中我们可以看出

我们需要的效果是：执行完4帧后，再反向回到动画初始位置

其实也很简单

再多设置一个参数即可

设置动画为：轮流反向播放动画

animation: animloader 2s linear infinite alternate;

在这里插入图片描述

注：
在这里插入图片描述

学习来源：

https://codepen.io/bhadupranjal/pen/vYLZYqQ

文章仅作为学习笔记，记录从0到1的一个过程。希望对您有所帮助，如有错误欢迎小伙伴指正～

我是海轰ଘ(੭ˊᵕˋ)੭，如果您觉得写得可以的话，请点个赞吧

写作不易，「点赞」+「收藏」+「转发」

谢谢支持❤️

在这里插入图片描述


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK