<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS加载动画</title>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<style>
html, body {
margin: 0;
height: 100%;
background-color: #03002E;
}
body {
font-family: "Open Sans";
}
* {
box-sizing: border-box;
}
h1 {
text-align: center;
color: white;
font-size: 60px;
font-weight: 300;
margin-bottom: 30px;
}
.content {
max-width: 600px;
margin: auto;
padding: 5px;
height: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
align-content: flex-start;
}
.content .column {
width: calc(33.33% - 10px);
height: 170px;
background-color: #040038;
margin: 5px;
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
justify-content: center;
align-items: center;
}
.container {
width: 30px;
height: 30px;
position: relative;
}
.container.animation-1 {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.container.animation-2, .container.animation-4 {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
.container.animation-2 .shape, .container.animation-4 .shape {
border-radius: 5px;
}
.container.animation-2, .container.animation-3, .container.animation-4 {
-webkit-animation: rotation 1s infinite;
animation: rotation 1s infinite;
}
.container.animation-3 .shape1 {
border-top-left-radius: 10px;
}
.container.animation-3 .shape2 {
border-top-right-radius: 10px;
}
.container.animation-3 .shape3 {
border-bottom-left-radius: 10px;
}
.container.animation-3 .shape4 {
border-bottom-right-radius: 10px;
}
.container.animation-4, .container.animation-5 {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.container.animation-5 .shape {
width: 15px;
height: 15px;
}
.container.animation-6 {
-webkit-animation: rotation 1s infinite;
animation: rotation 1s infinite;
}
.container.animation-6 .shape {
width: 12px;
height: 12px;
border-radius: 2px;
}
.container .shape {
position: absolute;
width: 10px;
height: 10px;
border-radius: 1px;
}
.container .shape.shape1 {
left: 0;
background-color: #5C6BC0;
}
.container .shape.shape2 {
right: 0;
background-color: #8BC34A;
}
.container .shape.shape3 {
bottom: 0;
background-color: #FFB74D;
}
.container .shape.shape4 {
bottom: 0;
right: 0;
background-color: #F44336;
}
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotation {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.animation-1 .shape1 {
-webkit-animation: animation1shape1 0.5s ease 0s infinite alternate;
animation: animation1shape1 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation1shape1 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(16px, 16px);
transform: translate(16px, 16px);
}
}
@keyframes animation1shape1 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(16px, 16px);
transform: translate(16px, 16px);
}
}
.animation-1 .shape2 {
-webkit-animation: animation1shape2 0.5s ease 0s infinite alternate;
animation: animation1shape2 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation1shape2 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-16px, 16px);
transform: translate(-16px, 16px);
}
}
@keyframes animation1shape2 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-16px, 16px);
transform: translate(-16px, 16px);
}
}
.animation-1 .shape3 {
-webkit-animation: animation1shape3 0.5s ease 0s infinite alternate;
animation: animation1shape3 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation1shape3 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(16px, -16px);
transform: translate(16px, -16px);
}
}
@keyframes animation1shape3 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(16px, -16px);
transform: translate(16px, -16px);
}
}
.animation-1 .shape4 {
-webkit-animation: animation1shape4 0.5s ease 0s infinite alternate;
animation: animation1shape4 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation1shape4 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-16px, -16px);
transform: translate(-16px, -16px);
}
}
@keyframes animation1shape4 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-16px, -16px);
transform: translate(-16px, -16px);
}
}
.animation-2 .shape1 {
-webkit-animation: animation2shape1 0.5s ease 0s infinite alternate;
animation: animation2shape1 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation2shape1 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(20px, 20px);
transform: translate(20px, 20px);
}
}
@keyframes animation2shape1 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(20px, 20px);
transform: translate(20px, 20px);
}
}
.animation-2 .shape2 {
-webkit-animation: animation2shape2 0.5s ease 0s infinite alternate;
animation: animation2shape2 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation2shape2 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-20px, 20px);
transform: translate(-20px, 20px);
}
}
@keyframes animation2shape2 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-20px, 20px);
transform: translate(-20px, 20px);
}
}
.animation-2 .shape3 {
-webkit-animation: animation2shape3 0.5s ease 0s infinite alternate;
animation: animation2shape3 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation2shape3 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(20px, -20px);
transform: translate(20px, -20px);
}
}
@keyframes animation2shape3 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(20px, -20px);
transform: translate(20px, -20px);
}
}
.animation-2 .shape4 {
-webkit-animation: animation2shape4 0.5s ease 0s infinite alternate;
animation: animation2shape4 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation2shape4 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-20px, -20px);
transform: translate(
纯css3实现炫酷谷歌loading图标加载动画特效源码.zip
版权申诉
90 浏览量
2022-11-09
22:10:47
上传
评论
收藏 2KB ZIP 举报
纯css3实现炫酷谷歌loading图标加载动画特效源码.zip （1个子文件） 
132686845302239132 likecs.com_132686845303840667 
index.html 23KB资源评论
毕业_设计
- 粉丝: 1921
- 资源: 1万+
最新资源
- IMG_5905.PNG
- Cyclone Version 9.51
- 高性能量化回测工具 hikyuu 2.0.3 python 3.12 windows 安装包
- 省级城乡居民基本养老保险情况数据集（2010-2022年）.xlsx
- 舞队填写版.cpp
- 基于BP神经网络的多输入单输出回归预测.zip
- 高性能量化回测工具 hikyuu 2.0.3 python 3.9 windows 安装包
- 省级城镇职工基本养老保险情况2000-2022年.xlsx
- 高性能量化回测工具 hikyuu 2.0.3 python 3.10 windows 安装包
- 算法部署-使用OpenVINO+C#部署PaddleOCR字符识别算法-项目源码-优质项目实战.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
