current location： Home > Download > JS effects > CSS3 special effects > CSS3 spherical web page loading animation icon special effect

CSS3 spherical web page loading animation icon special effect

Classify: JS effects / CSS3 special effects	Release time: 2018-01-08	visits: 1836
Download: 47

Click to download Preview effect

More>

Latest Downloads

‎Fantasy Aquarium

"Fantasy Aquarium" is a fantasy adventure game that allows players to explore the mysterious underwater world. In this imaginative aquarium, players will play the role of an aquarium manager and experience the fun of a fantasy world by managing and caring for various magical creatures. Game features: Diverse creatures: There are various fantasy creatures living in the aquarium, such as mysterious crystal fish, light mermaids, etc. Each creature has a unique appearance and characteristics. Interaction: Players can interact with the creatures in the aquarium, feed, play, and even perform tasks to make the creatures get closer to you. Decoration construction: You can decorate the aquarium according to your own preferences and customize it

0 2024-05-08

‎Girls Frontline

"Girls' Frontline" is a strategy role-playing game developed by SUNBORN Games. In this future world, humans and robot girls are fighting. You will play the role of a commander and lead a unique army of robot girls in a series of thrilling battles. Game features: A huge camp of robot girls: Collect and train robot girls with different styles and abilities to build your own strongest team. In-depth plot setting: Communicate with the robot girls and gain a deeper understanding of their story backgrounds, providing support and encouragement to them in battle. Exquisite battle graphics: Enjoy gorgeous battle scenes

832 2024-05-06

‎Wings of Stars

"Star Wings" is a 3D competitive game that perfectly combines mecha girl elements with classic GVG fighting gameplay. In the game, players will control a mecha girl with powerful combat power to engage in fierce 1V1 and 2V2 battles on the exciting battlefield, feeling the unparalleled charm of competition. The game uses high-precision 3D modeling technology to present gorgeous graphics. Each mecha is unique and delicately depicts the mechanical structure full of technology and the graceful figure of the girl, as if it is an animated blockbuster active in the palm of your hand. The beautiful girl pilots each have their own charms, and their different personality traits are revealed through their voices and actions.

521 2024-05-06

‎Little Flower Fairy Fairy Paradise

"Little Flower Fairy Fairy Paradise" is a casual game full of childlike fun and magic, bringing a wonderful gaming experience to the majority of players. In the game, you will play the role of a little flower fairy and enter the Elf Paradise with other players to embark on an adventure full of surprises. Game features: New magical adventure: Enjoy a new Elf Paradise adventure with more exquisite graphics. Exquisite game graphics: The game uses the latest 3D technology to create beautiful game graphics, giving players a brand new visual shock. Various activities: In the game, players can participate in various activities and obtain a large number of game rewards. rich

703 2024-05-06

‎Restaurant Cute Story

"Restaurant Cute Story" is a cute restaurant management simulation game. In this game, you will play the role of a young restaurant owner. By operating and managing the restaurant, you will welcome a group of cute customers and create a unique and busy restaurant. Game features: Cute animal customers: There are various cute animal characters as customers in the game. Each animal has its own preferences and needs. You need to provide the most suitable dishes according to their preferences. Customize your restaurant: From decoration to furniture, you can create a unique restaurant according to your own preferences and creativity to attract more customers. Diverse menu: in-game

574 2024-05-05

‎Shanhe Travel Exploration

"Shanhe Travel Detective" game introduction "Shanhe Travel Detective" is a fascinating storyline with a Chinese-style reasoning and investigation game. This game cleverly combines traditional Chinese cultural elements with classic reasoning and investigation gameplay, presenting players with a game world full of mystery and surprise. In the game, players will play the role of a talented young detective, traveling through mountains and rivers to explore various complicated and confusing cases. Each case is carefully designed and full of suspense and challenges. Players need to use wisdom and observation to collect clues and deduce the truth. The game has a unique graphic style, which adopts a beautiful Chinese style and combines ancient Chinese

946 2024-05-05

‎Love and Producer

"Love and Producer" is a female-oriented mobile game developed by Elex. It is a love development type game. In this game, you will play a producer and embark on a romantic journey with four distinctive male protagonists. Game features: Real-person dubbing, restoring the most realistic plot experience. The rich game plot and ups and downs of emotional stories make you immersed in the game. Perfectly restores the operation of AR games, allowing you to enjoy the game better. The unique gameplay allows you to understand the protagonist more deeply and experience a different kind of love. Earn props through tasks and activities, and use them to improve the hero's attributes.

519 2024-05-04

‎The most powerful brain 3

"The Biggest Brain 3" is an exciting and interesting intellectual competition game that challenges the limits of your brain and shows your wisdom and skills. In this game, players will face various mental challenges, including decryption, reasoning, memory and other topics, so that your brain can get an all-round exercise. Game features: Diverse challenge themes, covering multiple fields such as decryption, reasoning, memory, etc., ensuring that you will not be bored. Rich level design, gradually increasing difficulty, challenging the limit of your IQ. A variety of game modes are available, including single-player challenges and multi-player battles, allowing you to compete with your friends against IQ. Exquisite picture design and sound effects create a

869 2024-05-04

‎Odd Dust: Damila

"Earth: Damira" game introduction "Earth: Damira" is a fascinating full 3D alien light science fiction otaku tower defense game. In this game, players will play the role of the captain of the Atum, shouldering the important task of continuing the hope of mankind, leading a group of "newborn" girls full of vigor and vitality to set foot on the mysterious planet Damira to explore this green alien planet. everything of. With its unique sci-fi setting and exquisite 3D graphics, the game presents players with an alien world full of unknowns and challenges. In this mysterious land, players need to lead the girls to build strong defenses to resist threats from alien stars. At the same time, they need to

254 2024-05-03

‎Young Journey to the West 2

"Journey to the West 2" game introduction Stepping into the world of "Journey to the West 2" is to step into a magnificent and fantasy industrial punk adventure full of oriental charm. As the latest masterpiece of the juvenile card series, this game perfectly integrates national trend elements with punk style, presenting players with an unprecedented world of Journey to the West. First of all, the game's style is unique. The designers cleverly combined traditional Chinese painting and printmaking techniques with modern punk elements, making every character and every scene full of strong oriental charm and avant-garde punk atmosphere. Players seem to be in a world that combines classical and modern, oriental and

951 2024-05-03

24 HoursReading Leaderboard

More>

Latest Tutorials

[Web front-end] Node.js quick start

Complete collection of foreign web development full-stack courses

1682 2024-04-24
Go language practical GraphQL

1955 2024-04-19
550W fan master learns JavaScript from scratch step by step

3380 2024-04-18
Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours

2908 2024-04-10
Getting Started with MySQL (Teacher mosh)

1774 2024-04-07
Mock.js | Axios.js | Json | Ajax--Ten days of quality class

2592 2024-03-29

CSS3 spherical web page loading animation icon special effect

<head>
<meta charset="utf-8">
<title>CSS3球状网页加载动画图标特效</title>
<style>
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root, html, body {
font-family: 'Poiret One', 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
background: #222;
color: white;
}
h1 {
text-align: center;
margin: 1rem auto 2rem;
font-weight: normal;
}
p {
margin: 1rem;
}
.row {
width: 80%;
height: 150px;
margin: 2rem auto;
}
.cell {
display: inline-block;
width: 49%;
text-align: center;
}
.circle {
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
background: whiteSmoke;
box-shadow: 4px -40px 60px 5px rgb(26, 117, 206) inset;
}
.square {
display: inline-block;
width: 100px;
height: 100px;
border-radius: 20px;
background: whiteSmoke;
box-shadow: 4px -40px 60px 5px rgb(26, 117, 206) inset;
}

.loader {
background: linear-gradient(to right, rgb(22, 113, 202) 50%, transparent 50%);
animation: spin 1s infinite linear;
}
.loader:before {
display: block;
content: '';
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90px;
height: 90px;
background: #222;
border-radius: 50%;
}

.gelatine {
animation: gelatine 0.5s infinite;
}
@keyframes gelatine {
from, to { transform: scale(1, 1); }
25% { transform: scale(0.9, 1.1); }
50% { transform: scale(1.1, 0.9); }
75% { transform: scale(0.95, 1.05); }
}

.spin {
animation: spin 1s infinite linear;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

.elastic-spin {
animation: elastic-spin 1s infinite ease;
}
@keyframes elastic-spin {
from { transform: rotate(0deg); }
to { transform: rotate(720deg); }
}

.pulse {
animation: pulse 1s infinite ease-in-out alternate;
}
@keyframes pulse {
from { transform: scale(0.8); }
to { transform: scale(1.2); }
}

.flash {
animation: flash 500ms ease infinite alternate;
}
@keyframes flash {
from { opacity: 1; }
to { opacity: 0; }
}

.hithere {
animation: hithere 1s ease infinite;
}
@keyframes hithere {
30% { transform: scale(1.2); }
40%, 60% { transform: rotate(-20deg) scale(1.2); }
50% { transform: rotate(20deg) scale(1.2); }
70% { transform: rotate(0deg) scale(1.2); }
100% { transform: scale(1); }
}

.grow {
animation: grow 2s ease infinite;
}
@keyframes grow {
from { transform: scale(0); }
to { transform: scale(1); }
}

.fade-in {
animation: fade-in 2s linear infinite;
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}

.fade-out {
animation: fade-out 2s linear infinite;
}
@keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
}

.bounce {
animation: bounce 2s ease infinite;
}
@keyframes bounce {
70% { transform:translateY(0%); }
80% { transform:translateY(-15%); }
90% { transform:translateY(0%); }
95% { transform:translateY(-7%); }
97% { transform:translateY(0%); }
99% { transform:translateY(-3%); }
100% { transform:translateY(0); }
}

.bounce2 {
animation: bounce2 2s ease infinite;
}
@keyframes bounce2 {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}

.shake {
animation: shake 2s ease infinite;
}
@keyframes shake {
0%, 100% {transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
20%, 40%, 60%, 80% {transform: translateX(10px);}
}

.flip {
backface-visibility: visible !important;
animation: flip 2s ease infinite;
}
@keyframes flip {
0% {
transform: perspective(400px) rotateY(0);
animation-timing-function: ease-out;
}
40% {
transform: perspective(400px) translateZ(150px) rotateY(170deg);
animation-timing-function: ease-out;
}
50% {
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
animation-timing-function: ease-in;
}
80% {
transform: perspective(400px) rotateY(360deg) scale(.95);
animation-timing-function: ease-in;
}
100% {
transform: perspective(400px) scale(1);
animation-timing-function: ease-in;
}
}

.swing {
transform-origin: top center;
animation: swing 2s ease infinite;
}
@keyframes swing {
20% { transform: rotate(15deg); }
40% { transform: rotate(-10deg); }
60% { transform: rotate(5deg); }
80% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}

.wobble {
animation: wobble 2s ease infinite;
}
@keyframes wobble {
0% { transform: translateX(0%); }
15% { transform: translateX(-25%) rotate(-5deg); }
30% { transform: translateX(20%) rotate(3deg); }
45% { transform: translateX(-15%) rotate(-3deg); }
60% { transform: translateX(10%) rotate(2deg); }
75% { transform: translateX(-5%) rotate(-1deg); }
100% { transform: translateX(0%); }
}

.fade-in-down {
animation: fade-in-down 2s ease infinite;
}
@keyframes fade-in-down {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

.fade-in-left {
animation: fade-in-left 2s ease infinite;
}
@keyframes fade-in-left {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}

.fade-out-down {
animation: fade-out-down 2s ease infinite;
}
@keyframes fade-out-down {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(20px);
}
}

.fade-out-right {
animation: fade-out-right 2s ease infinite;
}
@keyframes fade-out-right {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(20px);
}
}

.bounce-in {
animation: bounce-in 2s ease infinite;
}
@keyframes bounce-in {
0% {
opacity: 0;
transform: scale(.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% { transform: scale(.9); }
100% { transform: scale(1); }
}

.bounce-in-right {
animation: bounce-in-right 2s ease infinite;
}
@keyframes bounce-in-right {
0% {
opacity: 0;
transform: translateX(2000px);
}
60% {
opacity: 1;
transform: translateX(-30px);
}
80% { transform: translateX(10px); }
100% { transform: translateX(0); }
}

.bounce-out {
animation: bounce-out 2s ease infinite;
}
@keyframes bounce-out {
0% { transform: scale(1); }
25% { transform: scale(.95); }
50% {
opacity: 1;
transform: scale(1.1);
}
100% {
opacity: 0;
transform: scale(.3);
}
}

.bounce-out-down {
animation: bounce-out-down 2s ease infinite;
}
@keyframes bounce-out-down {
0% { transform: translateY(0); }
20% {
opacity: 1;
transform: translateY(-20px);
}
100% {
opacity: 0;
transform: translateY(20px);
}
}

.rotate-in-down-left {
animation: rotate-in-down-left 2s ease infinite;
}
@keyframes rotate-in-down-left {
0% {
transform-origin: left bottom;
transform: rotate(-90deg);
opacity: 0;
}
100% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
}

.rotate-in-up-left {
animation: rotate-in-up-left 2s ease infinite;
}
@keyframes rotate-in-up-left {
0% {
transform-origin: left bottom;
transform: rotate(90deg);
opacity: 0;
}
100% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
}

.hinge {
animation: hinge 2s ease infinite;
}
@keyframes hinge {
0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }
20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }
40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; }
80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; }
100% { transform: translateY(700px); opacity: 0; }
}

.roll-in {
animation: roll-in 2s ease infinite;
}
@keyframes roll-in {
0% {
opacity: 0;
transform: translateX(-100%) rotate(-120deg);
}
100% {
opacity: 1;
transform: translateX(0px) rotate(0deg);
}
}

.roll-out {
animation: roll-out 2s ease infinite;
}
@keyframes roll-out {
0% {
opacity: 1;
transform: translateX(0px) rotate(0deg);
}
100% {
opacity: 0;
transform: translateX(100%) rotate(120deg);
}
}
</style>

</head>
<body><script src="/demos/googlegg.js"></script>
<h1>CSS Animation</h1>
<div class="row">
<div class="cell">
<div class="circle loader"></div>
<p>loader</p>
</div>
<div class="cell">
<div class="circle gelatine"></div>
<p>gelatine</p>
</div>
</div>
<div class="row">

多款CSS3 transform实现的网页加载动画代码，CSS3球状网页加载动画图标特效。

Statement of this Website

All resources on this website are contributed and published by netizens, or reprinted by major download sites. Please check the integrity of the software yourself! All resources on this website are for learning and reference only. Please do not use them for commercial purposes, otherwise you will be responsible for all consequences incurred! If there is any infringement, please contact us to delete and remove it. Contact information: admin@php.cn

Related recommendations

Mobile Happy Scratch HTML5 plug-in

The mobile Happy Scratch HTML5 plug-in is a mobile H5 Scratch plug-in suitable for Double 12 activities.

html5 special effects

2024-02-29

HTML5 paper folded into gift box animation special effects

The HTML5 paper folding into gift box animation effect is a Christmas gift animation effect implemented in CSS that is suitable for Christmas or any holiday.

html5 special effects

2024-02-29

Pure CSS3 retro film player special effects

Pure CSS3 retro film player special effects is a simple film music player and film recording player special effects.

Player special effects

2024-02-29

HTML5 video player window floating code

The HTML5 video player window floating code is a black and beautiful MP4 video player code.

Player special effects

2024-02-29

Lightweight html5 WinBox page pop-up plug-in

The lightweight html5 WinBox page pop-up plug-in is very convenient and easy to operate. It supports functions such as maximizing, minimizing, full screen, closing, moving, and opening multiple windows.

html5 special effects

2024-02-29

jQuery accordion picture sliding menu bar

jQuery accordion picture sliding menu bar is a cool accordion picture sliding effect navigation menu bar special effect.

accordion effect

2024-02-29

Pure CSS3 code to create red drop-down navigation menu

The pure CSS3 code to create a red drop-down navigation menu is a pure CSS3 transition attribute to create a red navigation menu. The drop-down menu is expanded by hovering the mouse and supports three-level drop-down menu code.

Menu navigation

2024-02-29

HTML5 mouse wheel rotation picture display special effects

The HTML5 mouse wheel rotation picture display effect is a web page special effect that allows the mouse wheel to rotate and click to enlarge the picture. You can enlarge the selected picture or click to restore it to the original position.

Picture special effects

2024-02-29

Popular Recommendations

jQuery+Html5 realizes beautiful confession animation code

jQuery+Html5 implements beautiful confession animation code, the animation effect is great, a must-have for programmers to confess!

Other special effects

2017-02-14

Couple's romantic confession js special effects code

JS special effects code for couples' romantic confession. Such special effects can be used on wedding photography websites or placed on personal websites. It is also a good special effect. PHP Chinese website recommends downloading!

Other special effects

2017-02-08

Cool system login page

jQuery effects

2019-12-30

H5 panda bouncing game source code

HTML5 Mobile Panda is also a crazy game source code. Game description: Press and hold the screen to adjust the strength of the panda spring and jump to the stone pillar. The game ends if you fall into the river.

html5 special effects

2019-08-22

H5 3D rolling ball game source code

HTML5 cool 3D ball rolling mobile game code download. Game introduction: A colored ball rolls, and the current track of the colored ball is controlled by dragging it with the mouse or the touch screen of the mobile phone. This is a simple and easy-to-operate mobile game source code.

html5 special effects

2019-08-26

HTML5 canvas duck shooting game

html5 special effects

2017-11-24

Simple js love confession artifact

Simple native js love confession artifact

Other special effects

2017-02-14

Bunker's html5 particle animation expressive effects

Bunker's html5 particle animation expression special effects code, the animated special effects text can be changed in the code, you can make a page where you can customize text input, it should be very popular, this HTML5 special effect is very beautiful.

Other special effects

2017-02-14