前言

Hello！小伙伴！
非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～

自我介绍 ଘ(੭ˊᵕˋ)੭
昵称：海轰
标签：程序猿｜C++选手｜学生
简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～）
学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！

【动画消消乐】平时学习生活比较枯燥，无意之间对一些网页、应用程序的过渡/加载动画产生了浓厚的兴趣，想知道具体是如何实现的？便在空闲的时候学习下如何使用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;}

效果如下图：

步骤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;}

效果如下图：

步骤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);}

效果如下图：

备注：

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;   }

效果如下图：

步骤4

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

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

  span::after {animation: loading 4s ease-in infinite;}@keyframes loading {0% {width: 0}100% {width: 100%}}

效果如下图：

步骤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生效时

效果如下图：

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

步骤6

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

得到最终效果图

结语

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

希望对您有所帮助，如有错误欢迎小伙伴指正～

我是 海轰ଘ(੭ˊᵕˋ)੭

如果您觉得写得可以的话，请点个赞吧

谢谢支持❤️

【动画消消乐｜CSS】088.HTML+CSS实现自定义简易过渡动画相关推荐

HTML背景图片动画设置,CSS 背景图加载完成后的过渡动画
直接给背景图设置动画效果会出现图片因加载过慢而显示效果不佳的情况,可以通过 JavaScript 来获取图片的加载状态. 下面来实现一个背景图片透明度渐变的效果. 首先来设置要添加背景动画的元素样式 ...
android 布局收缩动画,自定义View-带过渡动画的折叠收缩布局
简介: 由于界面View.VISIBLE和View.GONE的动画太生硬,所以写了ExpandLayout类来平滑过渡. 基本思路,动态的设置布局的高度. 先上效果图: expand.gif 核心动画 ...
vue2基础 - transition 过渡动画结合 animate.css和 Velocity.js 的使用
文章目录 CSS 动画库 Animate.css JavaScript 钩子结合 Velocity.js 库示例 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工 ...
vue中过渡动画（类名实现方式）
vue中过渡动画分为两类,一类是进场动画,一类是出场动画要实现上面的进场动画,主要有三种方式:类名,css动画库,js函数类名本质就是动态添加类名实现动画在进入/离开的过渡中,会有 6 个 c ...
vue-transition过渡动画
如何给Vue控制的元素添加过渡动画 vue-transitions 1.1 将需要执行动画的元素放到transition组件中 1.2 当transition组件中的元素显示时会自动查找.v-ente ...
uniapp实现带过渡动画的手风琴折叠样式
目录最终效果一.无过渡动画的手风琴二.有过渡动画的手风琴 1. 不能再用v-if或v-show 2. 用:class动态绑定样式 3. 子元素也要设置transition 最终效果 UI同学让做 ...
React 过渡动画路由 ui
过渡动画下载react-transition-group cnpm i react-transition-group --save CSSTransition实现单元素过渡动画 (1) unmoun ...
自定义Push和Pop过渡动画
一.效果和源码本文介绍如何实现一个NavigationController的自定义Push和Pop过渡动画,运行效果如下: 源码:https://github.com/dolacmeng/Trans ...
[iOS]过渡动画之高级模仿 airbnb
注意:我为过渡动画写了两篇文章: 第一篇:[iOS]过渡动画之简单模仿系统,主要分析系统简单的动画实现原理,以及讲解坐标系.绝对坐标系.相对坐标系,坐标系转换等知识,为第二篇储备理论基础.最后实现 M ...
iOS学习笔记-自定义过渡动画
代码地址如下: http://www.demodashi.com/demo/11678.html 这篇笔记翻译自raywenderlick网站的过渡动画的一篇文章,原文用的swift,由于考虑到swi ...

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

前言

效果展示

Demo代码

原理详解

步骤1

步骤2

步骤3

步骤4

步骤5

步骤6

结语

【动画消消乐｜CSS】088.HTML+CSS实现自定义简易过渡动画相关推荐

最新文章

热门文章