炫酷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> ...
随机推荐
- Log4Net 之走进Log4Net （四）
原文:Log4Net 之走进Log4Net (四) 一.Log4net的结构 log4net 有四种主要的组件,分别是Logger(记录器), Repository(库), Appender(附着器) ...
- nginx入门(一)
什么是nginx? nginx是一款高性能的http 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器.由俄罗斯的程序设计师Igor Sysoev所开发,官方测试nginx能够支支撑5 ...
- 部分DOM事件总结
复习: 1.1 DOM:Docment Object Model 文档对象模型 当页面加载时,就会创建文档对象模型.文档对象模型被构造为DOM树: DOM树种任何一个部分都可以看做是节点对象,结构中 ...
- [Tyvj1423]GF和猫咪的玩具（最短路）
[Tyvj1423]GF和猫咪的玩具 题目描述 GF同学和猫咪得到了一个特别的玩具,这个玩具由n个金属环(编号为1---n),和m条绳索组成,每条绳索连接两个不同的金属环,并且长度相同.GF左手拿起金 ...
- Flutter-SearchDelegate搜索框
搜索欄 import 'package:flutter/material.dart'; typedef SearchItemCall = void Function(String item); cla ...
- js 鼠标效果
一. 鼠标悬停效果和离开效果 鼠标效果和v-if 配合使用效果很好 <a class="all btn" href="#" v-on:mouseover= ...
- LOJ 2840「JOISC 2018 Day 4」糖
有趣的脑子题(可惜我没有脑子 好像也可以称为模拟费用流(? 我们考虑用链表维护这个东西 再把贡献扔到堆里贪心就好了 大概就是类似于有反悔机制的贪心?我们相当于把选中的一个打上一个-v的tag然后如果选 ...
- Python之批量读取文件【面试必学】
python的os模块可以实现普遍的操作系统功能,并且和平台无关.以下为实现根目录下文件的批量读取. os.listdir(dirname)可以列出dirname下的目录和文件,依次读取相应的文件即可 ...
- java实现简单的控制台的计算器
要用面向对象的思维写. //我是代码的搬运工import java.util.Scanner;public class Main { public static void main(String[] ...
- Selenium-WebDriverApi介绍
浏览器操作: #刷新 driver.refresh() from selenium import webdriver driver=webdriver.Chrome() driver.get('htt ...