炫酷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> ...
随机推荐
- 一台电脑关联多个git账号
一台电脑连接多个git账号 现需要一台电脑连接gitlab,github,码云,之前的操作时,用公司账号,在这几个地方都注册一遍,导致自己就有两类号,一个自己的,一个公司的,这样也是可以,但总是不太好 ...
- 奇葩问题：Invalid bound statement (not found): cn.zss.zsdemo.mapper.RoleMapper.selectByPrimaryKey
使用mybatis,遇到Invalid bound statement (not found): cn.zss.zsdemo.mapper.RoleMapper.selectByPrimaryKey ...
- 微信小程序request(ajax)接口请求封装
微信小程序request(ajax)接口请求封装 最近在进行小程序的编写,需要调用后端接口,经常要用到wx.request方法,所以就自己封装了一下,简化一下代码,如果能给大家提供帮助更好,在封装的时 ...
- 第三讲JdbcRealm及Authentication Strategy
1.使用shiro框架来完成认证工作,默认情况下使用的是IniRealm.如果需要使用其他Realm,那么需要进行相关的配置. 2.ini配置文件讲解: [main] section是你配置应用程序的 ...
- CentOS7 systemctl 命令
*启动.重启.停止.重载服务 # systemctl start httpd.service # systemctl restart httpd.service # systemctl stop ht ...
- 03scikit-learn非监督学习
In [1]: from sklearn.decomposition import PCA from sklearn.datasets import load_iris pca = PCA(n_com ...
- P2617 Dynamic Rankings(待修改区间第k大)
题目链接:https://www.luogu.org/problemnew/show/P2617 题目: 题目描述 给定一个含有n个数的序列a[1],a[2],a[3]……a[n],程序必须回答这样的 ...
- Fiddler过滤css、js、图片等静态文件
REGEX:(?insx)/[^\?/]*\.(css|ico|jpg|png|gif|bmp|wav)(\?.*)?$ REGEX:(?insx)/[^\?/]*\.(action|do)(\?.* ...
- highlight语法高亮推荐样式
最近在弄一个类似博客的东西,需要高亮显示代码,所以用了highlight.js来完成 highlight提供了不同的风格我们可以通过更改css样式表来找到适合我们的. 我罗列一部分看看有哪些风格 以下 ...
- vue2.0 之 nextTick
Vue.nextTick 将回调延迟到下次 DOM 更新循环之后执行.在修改数据之后立即使用它,然后等待 DOM 更新. 它跟实例方法vm.$nextTick() 一样,不同的是 this 自动绑定到 ...