0
点赞
收藏
分享

微信扫一扫

【动画消消乐|CSS】088.HTML+CSS实现自定义简易过渡动画


前言

Hello!小伙伴!
非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~
 
自我介绍 ଘ(੭ˊᵕˋ)੭
昵称:海轰
标签:程序猿|C++选手|学生
简介:因C语言结识编程,随后转入计算机专业,有幸拿过国奖、省奖等,已保研。目前正在学习C++/Linux(真的真的太难了~)
学习经验:扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语!
 
【动画消消乐】

效果展示

【动画消消乐|CSS】088.HTML+CSS实现自定义简易过渡动画_动画

Demo代码

HTML

<!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>

CSS

html, body {
margin: 0;
height: 100%;
}

body {
display: flex;
justify-content: center;
align-items: center;
background: #222f3e;
}

section {
width: 650px;
height: 300px;
padding: 10px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid white;
}

span {
width: 100%;
height: 10px;
display: inline-block;
background: rgba(255, 255, 255, 0.15);
position: relative;
overflow: hidden;
}

span::after {
content: '';
width: 0%;
height: 10px;
background-color: white;
font-size: 15px;
background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent);
background-size: 1em 1em;
position: absolute;
top: 0;
left: 0;
animation: loading 5s ease-in infinite, barStripe 1s linear infinite;
}

@keyframes loading {
0% {
width: 0
}
100% {
width: 100%
}
}

@keyframes barStripe {
0% {
background-position: 1em 0;
}
100% {
background-position: 0 0;
}
}

原理详解

步骤1

使用一个span标签

<span></span>

设置为

  • 宽度为100%
  • 高度为10px
  • 相对定位
  • 背景色:白色 透明级别:0.15

span {
width: 100%;
height: 10px;
background: rgba(255, 255, 255, 0.15);
position: relative;
}

效果如下图:

【动画消消乐|CSS】088.HTML+CSS实现自定义简易过渡动画_html_02

步骤2

利用span::after

设置为

  • 宽度10%
  • 高度10px
  • 绝对定位( top: 0; left: 0;)
  • 背景色:白色

span::after {
content: '';
width: 10%;
height: 10px;
background-color: white;
position: absolute;
top: 0;
left: 0;
}

效果如下图:

【动画消消乐|CSS】088.HTML+CSS实现自定义简易过渡动画_html_03

步骤3

为span::after设置一个渐变背景颜色

span::after {
background-image: linear-gradient(45deg,
rgba(0, 0, 0, 0.25) 25%,
transparent 25%,
transparent 50%,
rgba(0, 0, 0, 0.25) 50%,
rgba(0, 0, 0, 0.25) 75%,
transparent 75%,
transparent);
}

效果如下图:

【动画消消乐|CSS】088.HTML+CSS实现自定义简易过渡动画_动画_04


备注:

​background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent);​​可以理解为:

  • 45deg:渐变角度
  • 0% - ​​rgba(0, 0, 0, 0.25) 25%​​ : 0% - 25%都是灰色(0%初始位置代码中省略了)
  • ​transparent 25% - transparent 50%​​:25%-50%都是透明(显示span::after的原背景色:白色)
  • ​rgba(0, 0, 0, 0.25) 50% - rgba(0, 0, 0, 0.25) 75%,​​ :50% - 75% 都是灰色
  • ​transparent 75% - transparent​​:75% - 100%为透明色

设置​​background-size: 1em 1em;​

span::after {
background-size: 1em 1em;
}

效果如下图:

【动画消消乐|CSS】088.HTML+CSS实现自定义简易过渡动画_css_05

步骤4

为span::after 添加一个动画,暂时设为动画1

效果很简单 span::after宽度从0%到100%即可

span::after {
animation: loading 4s ease-in infinite;
}

@keyframes loading {
0% {
width: 0
}
100% {
width: 100%
}
}

效果如下图:

【动画消消乐|CSS】088.HTML+CSS实现自定义简易过渡动画_动画_06

步骤5

为span::after 添加一个动画,设为动画2

利用​​background-position​​ 不断修改背景图片的起始位置

形成一种循环滚动效果

span::after {
animation: barStripe 1s linear infinite;
}

@keyframes barStripe {
0% {
background-position: 1em 0;
}
100% {
background-position: 0 0;
}
}

只动画2生效时

效果如下图:

【动画消消乐|CSS】088.HTML+CSS实现自定义简易过渡动画_背景色_07


注:这里为了观察,将span::after宽度设置为50%了

步骤6

同时对span::after设置动画1、2时

得到最终效果图

【动画消消乐|CSS】088.HTML+CSS实现自定义简易过渡动画_动画

结语

文章仅作为学习笔记,记录从0到1的一个过程


【动画消消乐|CSS】088.HTML+CSS实现自定义简易过渡动画_html_09


举报

相关推荐

0 条评论