炫酷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> ...
随机推荐
- CSS3实现小于1px的边框(移动端)
<!doctype html> <html lang="en"> <head> <meta content="width=dev ...
- C++ 数组动态分配
数组的动态内存分配 #include <iostream> //一维数组 void oneDimensionalArray() { //定义一个长度为10的数组 int* array = ...
- 跨域问题解决----NO 'Access-Control-Allow-Origin' header is present on the requested resource.Origin'http://localhost:11000' is therfore not allowed access'
NO 'Access-Control-Allow-Origin' header is present on the requested resource.Origin'http://localhost ...
- centos7操作防火墙
1.firewalld的基本使用 启动: systemctl start firewalld 关闭: systemctl stop firewalld 查看状态: systemctl status f ...
- webGL 旋转算法
lon = 0,//y旋转角度 lat = 0, onMouseDownLat = 0, phi = 0, theta = 0; if ( isUserInteracting === false ) ...
- visual studio 中添加命令行参数
argc argv
- Java中数组在内存中的存放原理？
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/yangyong0717/article/details/79165685Java中数组被实现为对象, ...
- [thinkphp 5.0源码阅读] 缓存（一）
保存缓存: user表数据: cache()方法保存缓存: 访问 http://mythinkphp.com/index/index/cache ,两个缓存被保存(runtime/cache目录下): ...
- Java 逻辑运算符相关解析
问:定简单说说 Java 中 & 与 && 有什么区别?| 与 || 呢? 答:& 是位运算符,&& 是布尔逻辑运算符,| 与 || 类似同理.在进行逻 ...
- RMQ Direct
原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11792398.html RMQ Direct Project Directory Maven Depe ...