炫酷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> ...
随机推荐
- Docker实战部署应用——Tomcat
Tomcat 部署 拉取tomcat镜像 docker pull tomcat:8 创建tomcat容器 创建tomcat容器用于 Web应用,并且进行目录映射 docker run -id --na ...
- CentOS下性能监测工具 dstat
原文链接:http://www.bkjia.com/Linuxjc/935113.html 参考链接:https://linux.cn/article-3215-1.html,http://lhfli ...
- python基础模块,包
#import cal,time #导入模块名可以看作导入一个变量 #from cal import add # from cal import *#引入所有变量 *代表所有 占内存 不推荐 # # ...
- 【转】 linux硬链接与软链接
转自:http://www.cnblogs.com/yfanqiu/archive/2012/06/11/2545556.html Linux 系统中有软链接和硬链接两种特殊的“文件”. 软链接可以看 ...
- 漫谈五种IO模型
阅读目录 1 基础知识回顾 2 I/O模式 3 事件驱动编程模型 网络编程里常听到阻塞IO.非阻塞IO.同步IO.异步IO等概念,搞清楚这些概念之前,还得先回顾一些基础的概念. 1 基础知识回顾 注意 ...
- div+css做出带三角的弹出框 和箭头
一.三角形 https://blog.csdn.net/Szu_AKer/article/details/51755821 notice:三角的那部分可以用图片作为背景,但是容易出现杂边.所以利用cs ...
- 免插件，简单实现上拉加载loading
上拉加载是前端经常遇到的问题,采用插件往往能够轻松解决,这里介绍一种免插件简单实现上拉加载的方法,参考一下,下面分享一下代码. html <body> <ul> <li& ...
- js reduce用法
let books = [ 0, {bookName:"python",price:10,count:1}, {bookName:"Ruby",count:2, ...
- Spring---数据访问
1.Spring Data概述 1.1.Spring Data 项目 是 Spring用来解决数据访问问题 的一站式解决方案,包含了 大量关系型数据库.非关系型数据库 的 数据访问解决方案 ...
- Python---基础---dict和set2
2019-05-21 写一个程序来管理用户登陆系统的用户信息:登陆名字和密码,登陆用户账号建立后,已存在用户可以用登陆名字和密码重返系统,新用户不能用别人的用户名建立用户账号 ------------ ...