aktueller Standort： Heim > Herunterladen > JS-Effekte > CSS3-Spezialeffekte > CSS3球状网页加载动画图标特效

CSS3球状网页加载动画图标特效

Klassifizieren: JS-Effekte / CSS3-Spezialeffekte	Veröffentlichkeitsdatum: 2018-01-08	Besuche: 1849
Herunterladen: 47

Klicken Sie hier zum Herunterladen Vorschaueffekt

Mehr>

Neueste Downloads

‎Fantasy-Aquarium

„Fantasy Aquarium“ ist ein Fantasy-Abenteuerspiel, das es Spielern ermöglicht, die geheimnisvolle Unterwasserwelt zu erkunden. In diesem fantasievollen Aquarium schlüpfen die Spieler in die Rolle eines Aquarienmanagers und Experten

0 2024-05-08

‎Girls Frontline

„Girls‘ Frontline“ ist ein von SUNBORN Games entwickeltes Strategie-Rollenspiel. In dieser zukünftigen Welt kämpfen Menschen und Robotermädchen in der Rolle eines Kommandanten und führen eine einzigartige Armee von Robotermädchen in einer Reihe spannender Schlachten an. Spielfunktionen: Ein riesiges Lager von Robotermädchen: Sammle und trainiere Robotermädchen mit unterschiedlichen Stilen und Fähigkeiten, um dein eigenes stärkstes Team aufzubauen. Tiefgründige Handlung: Kommunizieren Sie mit den Robotermädchen und gewinnen Sie ein tieferes Verständnis für den Hintergrund ihrer Geschichte, indem Sie ihnen im Kampf Unterstützung und Ermutigung bieten. Exquisite Kampfgrafiken: Genießen Sie wunderschöne Kampfszenen

832 2024-05-06

‎Flügel der Sterne

„Star Wings“ ist ein 3D-Wettbewerbsspiel, das Mecha-Girl-Elemente perfekt mit klassischem GVG-Kampfspiel kombiniert. Im Spiel steuern die Spieler ein Mecha-Mädchen mit starker Kampfkraft, um auf dem aufregenden Schlachtfeld erbitterte 1-gegen-1- und 2-gegen-2-Kämpfe auszutragen und dabei den unvergleichlichen Charme des Wettbewerbs zu spüren. Das Spiel nutzt hochpräzise 3D-Modellierungstechnologie, um wunderschöne Grafiken zu präsentieren. Jeder Mecha ist einzigartig und stellt die mechanische Struktur voller Technologie und die anmutige Figur des Mädchens feinfühlig dar, als wäre es ein animierter Blockbuster, der in Ihrer Handfläche läuft. Die schönen Pilotinnen haben jeweils ihren eigenen Charme und ihre unterschiedlichen Persönlichkeitsmerkmale kommen in ihren Stimmen und Handlungen zum Ausdruck.

521 2024-05-06

‎Kleine Blumenfee, Feenparadies

„Little Flower Fairy Fairy Paradise“ ist ein Gelegenheitsspiel voller kindlichem Spaß und Magie, das den meisten Spielern ein wunderbares Spielerlebnis bietet. Im Spiel schlüpfen Sie in die Rolle einer kleinen Blumenfee und betreten mit anderen Spielern das Elfenparadies, um sich auf ein Abenteuer voller Überraschungen einzulassen. Spielfunktionen: Neues magisches Abenteuer: Genießen Sie ein neues Elf Paradise-Abenteuer mit exquisiteren Grafiken. Exquisite Spielgrafiken: Das Spiel nutzt die neueste 3D-Technologie, um wunderschöne Spielgrafiken zu erstellen und den Spielern einen völlig neuen visuellen Schock zu bieten. Verschiedene Aktivitäten: Im Spiel können Spieler an verschiedenen Aktivitäten teilnehmen und zahlreiche Spielbelohnungen erhalten. reich

703 2024-05-06

‎Restaurant Cute Story

„Restaurant Cute Story“ ist ein niedliches Restaurant-Management-Simulationsspiel. In diesem Spiel schlüpfen Sie in die Rolle eines jungen Restaurantbesitzers. Indem Sie das Restaurant leiten und leiten, begrüßen Sie eine Gruppe netter Kunden und schaffen ein einzigartiges und geschäftiges Restaurant. Spielfunktionen: Niedliche Tierkunden: Es gibt verschiedene niedliche Tierfiguren als Kunden im Spiel. Jedes Tier hat seine eigenen Vorlieben und Bedürfnisse. Sie müssen die am besten geeigneten Gerichte entsprechend seinen Vorlieben bereitstellen. Passen Sie Ihr Restaurant individuell an: Von der Dekoration bis zu den Möbeln können Sie ein einzigartiges Restaurant nach Ihren eigenen Vorlieben und Ihrer Kreativität gestalten, um mehr Kunden anzulocken. Vielfältiges Menü: im Spiel

574 2024-05-05

‎Shanhe Reiseerkundung

„Shanhe Travel Detective“-Spieleinführung „Shanhe Travel Detective“ ist eine faszinierende Handlung mit einem Denk- und Ermittlungsspiel im chinesischen Stil. Dieses Spiel kombiniert geschickt traditionelle chinesische Kulturelemente mit klassischem Denk- und Ermittlungsspiel und präsentiert den Spielern eine Spielwelt voller Geheimnisse und Überraschungen. Im Spiel schlüpfen die Spieler in die Rolle eines talentierten jungen Detektivs, der durch Berge und Flüsse reist, um verschiedene komplizierte und verwirrende Fälle zu untersuchen. Jeder Fall ist sorgfältig konzipiert und voller Spannung und Herausforderungen. Die Spieler müssen Weisheit und Beobachtungsgabe einsetzen, um Hinweise zu sammeln und die Wahrheit herauszufinden. Das Spiel hat einen einzigartigen Grafikstil, der einen wunderschönen chinesischen Stil annimmt und altes Chinesisch kombiniert

946 2024-05-05

‎Liebe und Produzent

„Love and Producer“ ist ein von Elex entwickeltes Handyspiel für Frauen. In diesem Spiel schlüpfst du in die Rolle eines Produzenten und begibst dich auf eine romantische Reise mit vier markanten männlichen Protagonisten. Spielfunktionen: Synchronisation mit echten Personen, um das realistischste Handlungserlebnis wiederherzustellen. Die reichhaltige Spielhandlung und die Höhen und Tiefen emotionaler Geschichten lassen Sie in das Spiel eintauchen. Stellt den Betrieb von AR-Spielen perfekt wieder her, sodass Sie das Spiel besser genießen können. Das einzigartige Gameplay ermöglicht es Ihnen, den Protagonisten tiefer zu verstehen und eine andere Art von Liebe zu erleben. Verdiene dir Requisiten durch Aufgaben und Aktivitäten und verbessere damit die Eigenschaften des Helden.

519 2024-05-04

‎Das stärkste Gehirn 3

„The Biggest Brain 3“ ist ein spannendes und interessantes intellektuelles Wettkampfspiel, das die Grenzen Ihres Gehirns herausfordert und Ihre Weisheit und Fähigkeiten unter Beweis stellt. In diesem Spiel müssen sich die Spieler verschiedenen mentalen Herausforderungen stellen, darunter Entschlüsselung, Argumentation, Gedächtnis und andere Themen, damit Ihr Gehirn rundum trainiert werden kann. Spielfunktionen: Verschiedene Herausforderungsthemen, die mehrere Bereiche wie Entschlüsselung, Argumentation, Gedächtnis usw. abdecken und dafür sorgen, dass Sie sich nicht langweilen. Reichhaltiges Leveldesign, allmählich steigender Schwierigkeitsgrad, der die Grenzen Ihres IQ herausfordert. Es stehen verschiedene Spielmodi zur Verfügung, darunter Einzelspieler-Herausforderungen und Mehrspieler-Kämpfe, in denen Sie mit Ihren Freunden gegen den IQ antreten können. Exquisites Bilddesign und Soundeffekte sorgen für ein

869 2024-05-04

‎Odd Dust: Damila

„Earth: Damira“-Spieleinführung „Earth: Damira“ ist ein faszinierendes 3D-Science-Fiction-Otaku-Tower-Defense-Spiel mit außerirdischem Licht. In diesem Spiel schlüpfen die Spieler in die Rolle des Kapitäns der Atum und übernehmen die wichtige Aufgabe, die Hoffnung der Menschheit aufrechtzuerhalten, indem sie eine Gruppe „neugeborener“ Mädchen voller Kraft und Vitalität anführen, um den mysteriösen Planeten Damira zu erkunden dieser grüne außerirdische Planet. Mit seinem einzigartigen Science-Fiction-Setting und der exquisiten 3D-Grafik präsentiert das Spiel den Spielern eine fremde Welt voller Unbekannter und Herausforderungen. In diesem geheimnisvollen Land müssen die Spieler die Mädchen dazu anleiten, starke Verteidigungsanlagen aufzubauen, um Bedrohungen durch außerirdische Sterne zu widerstehen

254 2024-05-03

‎Junge Reise in den Westen 2

Spieleinführung „Journey to the West 2“ Wenn Sie in die Welt von „Journey to the West 2“ eintauchen, betreten Sie ein großartiges und fantasievolles Industrial-Punk-Abenteuer voller orientalischem Charme. Als neuestes Meisterwerk der Jugendkartenserie integriert dieses Spiel perfekt nationale Trendelemente mit Punk-Stil und präsentiert den Spielern eine beispiellose Welt von Journey to the West. Zunächst einmal ist der Stil des Spiels einzigartig. Die Designer kombinierten geschickt traditionelle chinesische Mal- und Drucktechniken mit modernen Punk-Elementen und machten so jeden Charakter und jede Szene voller starkem orientalischem Charme und avantgardistischer Punk-Atmosphäre. Die Spieler scheinen sich in einer Welt zu befinden, die Klassik und Moderne, Orientalische und Moderne verbindet

951 2024-05-03

24 StundenBestenliste lesen

Mehr>

Neueste Tutorials

【web前端】Node.js快速入门

国外Web开发全栈课程全集

1717 2024-04-24
Go语言实战之 GraphQL

2000 2024-04-19
550W粉丝大佬手把手从零学JavaScript

3418 2024-04-18
python大神Mosh，零基础小白6小时完全入门

2949 2024-04-10
MySQL 初学入门（mosh老师）

1803 2024-04-07
Mock.js | Axios.js | Json | Ajax--十天精品课堂

2616 2024-03-29

CSS3球状网页加载动画图标特效

<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球状网页加载动画图标特效。

Erklärung dieser Website

Alle Ressourcen auf dieser Website werden von Internetnutzern beigesteuert und veröffentlicht oder von großen Download-Sites nachgedruckt. Bitte überprüfen Sie selbst die Integrität der Software! Alle Ressourcen auf dieser Website dienen nur zum Lernen und Nachschlagen. Bitte verwenden Sie sie nicht für kommerzielle Zwecke, da Sie sonst für alle daraus entstehenden Folgen verantwortlich sind! Wenn es einen Verstoß gibt, kontaktieren Sie uns bitte, um ihn zu löschen und zu entfernen. Kontaktinformationen: admin@php.cn