炫酷CSS3加载动画
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
html,body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-size: 13.3333333vw;
display: flex;
align-items: center;
justify-content: center;
}
.container {
width: 2.3rem;
height: .3rem;
display: flex;
justify-content: space-between;
}
.container span {
width: .3rem;
height: .3rem;
--duration: 2s;
}
.girl {
animation: slide var(--duration) ease-in-out infinite alternate;
}
@keyframes slide {
from {
transform: translateX(0);
filter: brightness(1);
}
to {
transform: translateX(2rem);
filter: brightness(1.45);
}
}
.boys {
width: 1.8rem;
display: flex;
justify-content: space-between;
}
.boys span {
animation: var(--duration) ease-in-out infinite alternate;
}
.boys span:nth-child(1) {
animation-name: jump-off-1;
}
.boys span:nth-child(2) {
animation-name: jump-off-2;
}
.boys span:nth-child(3) {
animation-name: jump-off-3;
}
.boys span:nth-child(4) {
animation-name: jump-off-4;
}
@keyframes jump-off-1 {
0%, 15% {
transform: rotate(0deg);
}
35%, 100% {
transform-origin: -0.1rem center;
transform: rotate(-180deg);
}
}
@keyframes jump-off-2 {
0%, 35% {
transform: rotate(0deg);
}
50%, 100% {
transform-origin: -.1rem center;
transform: rotate(-180deg);
}
}
@keyframes jump-off-3 {
0%, 50% {
transform: rotate(0deg);
}
65%, 100% {
transform-origin: -0.1rem center;
transform: rotate(-180deg);
}
}
@keyframes jump-off-4 {
0%, 65% {
transform: rotate(0deg);
}
85%, 100% {
transform-origin: -0.1rem center;
transform: rotate(-180deg);
}
}
.container span::before {
content: '';
position: absolute;
width: inherit;
height: inherit;
border-radius: 15%;
box-shadow: 0 0 0.08rem rgba(0, 0, 0, 0.3);
}
.girl::before {
background-color: hotpink;
}
.boys span::before {
background-color: dodgerblue;
animation: var(--duration) ease-in-out infinite alternate;
}
.boys span:nth-child(1)::before {
filter: brightness(1);
animation-name: jump-down-1;
}
.boys span:nth-child(2)::before {
filter: brightness(1.15);
animation-name: jump-down-2;
}
.boys span:nth-child(3)::before {
filter: brightness(1.3);
animation-name: jump-down-3;
}
.boys span:nth-child(4)::before {
filter: brightness(1.45);
animation-name: jump-down-4;
}
@keyframes jump-down-1 {
5% {
transform: scale(1, 1);
}
15% {
transform-origin: center bottom;
transform: scale(1.3, 0.7);
}
22.5%, 27.5% {
transform-origin: center center;
transform: scale(0.8, 1.4);
}
35% {
transform-origin: center top;
transform: scale(1.3, 0.7);
}
45%, 100% {
transform: scale(1, 1);
}
}
@keyframes jump-down-2 {
25% {
transform: scale(1, 1);
}
35% {
transform-origin: center bottom;
transform: scale(1.3, 0.7);
}
41.25%, 43.75% {
transform-origin: center center;
transform: scale(0.8, 1.4);
}
50% {
transform-origin: center top;
transform: scale(1.3, 0.7);
}
60%, 100% {
transform: scale(1, 1);
}
}
@keyframes jump-down-3 {
40% {
transform: scale(1, 1);
}
50% {
transform-origin: center bottom;
transform: scale(1.3, 0.7);
}
56.25%, 58.75% {
transform-origin: center center;
transform: scale(0.8, 1.4);
}
65% {
transform-origin: center top;
transform: scale(1.3, 0.7);
}
75%, 100% {
transform: scale(1, 1);
}
}
@keyframes jump-down-4 {
55% {
transform: scale(1, 1);
}
65% {
transform-origin: center bottom;
transform: scale(1.3, 0.7);
}
72.5%, 77.5% {
transform-origin: center center;
transform: scale(0.8, 1.4);
}
85% {
transform-origin: center top;
transform: scale(1.3, 0.7);
}
95%, 100% {
transform: scale(1, 1);
}
}
</style>
</head>
<body> <div class="container">
<span class="girl"></span>
<div class="boys">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div> </body>
</html>
炫酷CSS3加载动画的更多相关文章
- 基于css3炫酷页面加载动画特效代码
基于CSS3实现35个动画SVG图标.这是一款基于jQuery+CSS3实现的SVG图标动画代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&qu ...
- 纯css3加载动画
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name= ...
- 我用 CSS3 实现了一个超炫的 3D 加载动画
今天给大家带来一个非常炫酷的CSS3加载Loading动画,它的特别之处在于,整个Loading动画呈现出了3D的视觉效果.这个Loading加载动画由12个3D圆柱体围成一个椭圆形,同时这12个圆柱 ...
- CSS3加载动画
图1 通常我们都使用gif格式的图片或者使用Ajax来实现诸如这类的动态加载条,但是现在CSS3也可以完成,并且灵活性更大. 选1个例子看看怎么实现的吧: 效果图: 图2 代码: 使用1个名为'l ...
- javascript,css3加载动画
html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <me ...
- css3 加载动画效果
Loading 动画效果一 HTML 代码: <div class="spinner"> <div class="rect1&quo ...
- css3 加载动画
代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...
- 16款纯CSS3实现的loading加载动画
分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div clas ...
- 几行css3代码实现超炫加载动画
之前为大家分享了css3实现的加载动画.今天为大家带来一款只需几行代码就可以实现超炫的动画加载特效.我们一起看下效果图: 在线预览 源码下载 实现代码: 极简的html代码: <div> ...
随机推荐
- const类型总结
const 表示常类型 作用: 1.具有不可变性. 2.可以很方便对参数进行调整和修改,和宏定义一样,不变则已,变都变. 3.保护被修饰的东西,防止被意外修改.(如:在修饰函数的形参时,加 ...
- R语言——ggplot2补充知识点
案例 ggplot(head(age_data,10),aes(x=reorder(Country,age_median),y=age_median))+ geom_bar(aes(fill=Coun ...
- spring+mybatis+log4j 输出SQL
1.在mybatis-config.xml配置中添加setting配置参数,会打印SQL执行结果 <?xml version="1.0" encoding="UTF ...
- jquery 模态对话框传值,删除,新增表格行
个人的练习代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- Vue 组件间的传值（通讯）
组件之间的通讯分为三种 父给子传 子给父传 兄弟组件之间的通讯 1 父组件给子组件传值 子组件嵌套在父组件内部,父组件给子组件传递一个标识,在子组件内部用props接收,子组件在模板里可以通过{{}} ...
- 【leetcode】1079. Letter Tile Possibilities
题目如下: You have a set of tiles, where each tile has one letter tiles[i]printed on it. Return the num ...
- 对排序（Sort）的研究
这一篇主要是介绍一些数据排序的基本算法和高级算法并利用JavaScript来逐一实现, 算法的说明: 稳定:如果a原本在b前面,当a=b时,排序之后a仍然在b的前面 不稳定:如果a原本在b的前面,当a ...
- Python3解leetcode Min Cost Climbing Stairs
问题描述: On a staircase, the i-th step has some non-negative cost cost[i]assigned (0 indexed). Once you ...
- easyui for jquery之tooltip
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Java继承基础版
继承是软件开发中实现代码复用的有效手段,如果一个类A继承了类B那么类B中的public.protected及默认修饰符修饰的实例成员或静态成员将被类A继承,也可以说类B的成员就是类A的成员而类A在此基 ...