Gemeinschaft
Lernen
Tools-Bibliothek
KI-Tools
Freizeit
suchen
Deutsch
Heim Web-Frontend H5-Tutorial Beispiele zur Erläuterung der Verwendung von SVG zum Erstellen von Ladeanimation_html5-Tutorialfähigkeiten

Beispiele zur Erläuterung der Verwendung von SVG zum Erstellen von Ladeanimation_html5-Tutorialfähigkeiten

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 16, 2016 pm 03:45 PM
svg 加载

Heute möchte ich eine auf SVG-Bildern basierende Ladeanimation mit Ihnen teilen. Wenn Sie zum Laden von Bildern auch GIF verwenden, kann dies die Verwendung von SVG beeinträchtigen ein guter Weg.

Der dieses Mal gezeigte Code wurde von Aurer geschrieben. Das Frontend-Personal muss nur den gewünschten SVG-Code direkt kopieren, um ihn direkt zu verwenden, und die Farbe kann geändert werden. Natürlich können lernbegierige Studenten auch das Schreibprinzip dieses Codes studieren.

Nutzungsanleitung

Als nächstes erklärt der Herausgeber von Design Expert Network, wie man das nutzt. Es ist eigentlich ganz einfach.

SCHRITT 1: Kopieren Sie den gewünschten SVG-Ladeanimationscode in den . Der Editor kann einen Code wie folgt kopieren:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <svg Version="1.1"  id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http:// www.w3.org/1999/xlink" x="0px" y="0px" Breite="24px"  Höhe="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">  
  2. <rect x="0"  y="0" Breite="4" Höhe="10" füllen ="#333" transformieren="translate(0 15.1665)" >  
  3. <animateTransform attributeType="xml"  attributeName="transform" type="translate" values="0 0; 0 20; 0 0" Anfang="0" Dauer=" 0,6s" repeatCount="indefinite">animateTransform>  
  4. rect>  
  5. <rect x="10"  y="0" Breite="4" Höhe="10" füllen ="#333" transformieren="translate(0 11.5002)" >  
  6. <animateTransform attributeType="xml"  attributeName="transform" type="translate" values="0 0; 0 20; 0 0" Anfang="0,2s" Dauer= "0,6s" repeatCount="indefinite">animateTransform>  
  7. rect>  
  8. <rect x="20"  y="0" Breite="4" Höhe="10" füllen ="#333" transformieren="translate(0 1.83315)" >  
  9. <animateTransform attributeType="xml"  attributeName="transform" type="translate" values="0 0; 0 20; 0 0" Anfang="0,4s" Dauer= "0,6s" repeatCount="indefinite">animateTransform>  
  10. rect>  
  11. svg>  

此时代码已经可以带动画了，但没颜色，请继续看STEP2添加颜色。

SCHRITT 2: 为SVG图像添加颜色

给你的样式表添加如下样式，里面的颜色代码换上你喜欢的即！

XML/HTML-Code复制内容到剪贴板
  1. <Stil>  
  2. svg path,svg rect{fill: #FF6700;}   
  3. Stil>  

Fertig! Letzte DEMO:
201645112526157.gif (500×250)

Die Ladeanimation in der ionic-Bibliothek wird verwendet
ionic ist eine Open-Source-Bibliothek mit kostenlosem Code, die zur Entwicklung hybrider mobiler Anwendungen verwendet wird. Es kann die Leistung von HTML, CSS und JS optimieren, effiziente Anwendungen erstellen und kann auch zum Erstellen von Optimierungen für Sass und AngularJS verwendet werden. ionic wird ein vertrauenswürdiges Framework sein.
Die Installation ist sehr einfach. Öffnen Sie das Befehlszeilentool unter Windows und Linux und führen Sie den folgenden Befehl aus:

Code kopieren
Der Code lautet wie folgt:
$ npm install -g cordova ionic

Verwenden Sie den folgenden Befehl auf einem Mac-System:

Code kopieren
Der Code lautet wie folgt:
sudo npm install -g cordova ionic

Tipps: IOS muss kann unter Mac OS X und Xcode-Umgebungen installiert und verwendet werden.
Wenn Sie die oben genannte Umgebung bereits installiert haben, können Sie den folgenden Befehl ausführen, um die Version zu aktualisieren:

Kopieren Sie den Code
Der Code lautet wie folgt:
npm update -g cordova ionic

oder

Code kopieren
Code wie folgt:
sudo npm update -g cordova ionic

201645112554683.jpg (642×270)

Werfen wir einen Blick auf zwei spezifische Verwendungen im Zusammenhang mit dem Laden:

ionische Ladeaktion $ionicLoading
$ionicLoading ist ein Standard-Ladeinteraktionseffekt von ionic. Der darin enthaltene Inhalt kann auch in der Vorlage geändert werden.
Verwendungsbeispiel:
HTML-Code:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <html ng-app="ionicApp">  
  2.   <Kopf>  
  3.     <meta charset="utf- 8">  
  4.     <meta name="viewport"  Inhalt="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width ">    
  5.        
  6.     <Titel>Ionic ModalTitel>  
  7.   
  8.      <link href="http: //www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">  
  9.     <script src="http: //www.runoob.com/static/ionic/js/ionic.bundle.min.js">Skript>  
  10.   Kopf>  
  11. <body ng-controller=" AppStrg">  
  12.        
  13.       <ion-view title=" Startseite“>  
  14.         <ion-header-bar>  
  15.           <h1 Klasse="Titel" >The Stoogesh1>  
  16.         ion-header-bar>  
  17.         <ion-content has-header="wahr">  
  18.           <ion-list>  
  19.             <ion-item ng-repeat="Stooge in Stooges" href="#">{ {stooge.name}}ion-item>  
  20.           ion-list>  
  21.         ionengehalt>  
  22.       ion-view>  
  23.        
  24.   Körper>  
  25. html>  

JavaScript 代码

JavaScript-Code复制内容到剪贴板
  1. angular.module(‘ionicApp‘, [‘ionic‘])   
  2. .controller(‘AppCtrl‘, function($scope, $timeout, $ionicLoading) {   
  3.   
  4.   // Loader einrichten   
  5.   $ionicLoading.show({   
  6.     Inhalt: ‘Laden‘,   
  7.     Animation: ‘fade-in‘,   
  8.     showBackdrop: true,   
  9.     maxWidth: 200,   
  10.     showDelay: 0   
  11.   });   
  12.      
  13.   // Legen Sie eine Zeitüberschreitung fest, um den Loader zu löschen, unabhängig davon, ob Sie $ionicLoading.hide() aufrufen würden. Methode immer dann, wenn alles fertig oder geladen ist.   
  14.   $timeout(function () {   
  15.     $ionicLoading.hide();   
  16.     $scope.stooges = [{name: ‘Moe‘}, {name: ‘Larry‘}, {name: ‘Curly‘}];   
  17.   }, 2000);   
  18.      
  19. });  

$ionicLoadingConfig
使用实例：

HTML 代码

XML/HTML-Code复制内容到剪贴板
  1. <ion-content scroll="false" class="has-header">  
  2.   <p>  
  3.     <Ionenspinner Symbol=" android">ion-spinner>  
  4.     <Ionenspinner Symbol=" ios">ion-spinner>  
  5.     <Ionenspinner Symbol=" ios-small">ion-spinner>  
  6.     <Ionenspinner Symbol=" Blasen" Klasse="spinner-balanced">Ionenspinner>  
  7.     <Ionenspinner Symbol=" Kreise" Klasse="spinner-energized">Ionenspinner>  
  8.   p>  
  9.   
  10.   <p>  
  11.     <Ionenspinner Symbol=" Halbmond" Klasse="spinner-royal">Ionenspinner>  
  12.   
  13.     <Ionenspinner Symbol=" dots" class="spinner-dark">Ionenspinner>  
  14.     <Ionenspinner Symbol=" Zeilen" Klasse="spinner-calm">Ionenspinner>  
  15.     <Ionenspinner Symbol=" Ripple" class="spinner-assertive">Ionenspinner>  
  16.     <Ionenspinner Symbol=" Spirale">Ionenspinner>  
  17.   p>  
  18.   
  19.   
  20. ionengehalt>  

 
CSS-Code

CSS-Code复制内容到剪贴板
  1. Körper {   
  2.   Cursor: URL('http://www.runob.com/try/demo_source/finger .png'), auto;   
  3. }       
  4. p {   
  5.   text-align: center;   
  6.   Rand unten: 40px !wichtig;   
  7. }   
  8. .spinner svg {   
  9.   Breite: 19 % !wichtig;   
  10.   Höhe: 85px !wichtig;   
  11. }  

JavaScript 代码

JavaScript-Code复制内容到剪贴板
  1. angular.module(‘ionicApp‘, [‘ionic‘])   
  2.   
  3. .controller(‘MyStrg‘, function($scope) {    
  4.      
  5. });  
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Mehr anzeigen

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Wie lange dauert es, um Split Fiction zu schlagen?
1 Monate vor By DDD
R.E.P.O. Beste grafische Einstellungen
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Assassin's Creed Shadows: Seashell Riddle -Lösung
1 Wochen vor By DDD
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Mehr anzeigen

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Mehr anzeigen

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?
7403
15
Java-Tutorial
1630
14
CakePHP-Tutorial
1358
52
Laravel-Tutorial
1268
25
PHP-Tutorial
1218
29
Mehr anzeigen
Related knowledge
Fehler beim Laden des Plugins in Illustrator [Behoben] Fehler beim Laden des Plugins in Illustrator [Behoben] Feb 19, 2024 pm 12:00 PM

Erscheint beim Starten von Adobe Illustrator eine Meldung über einen Fehler beim Laden des Plug-Ins? Bei einigen Illustrator-Benutzern ist dieser Fehler beim Öffnen der Anwendung aufgetreten. Der Meldung folgt eine Liste problematischer Plugins. Diese Fehlermeldung weist darauf hin, dass ein Problem mit dem installierten Plug-In vorliegt, es kann jedoch auch andere Gründe haben, beispielsweise eine beschädigte Visual C++-DLL-Datei oder eine beschädigte Einstellungsdatei. Wenn dieser Fehler auftritt, werden wir Sie in diesem Artikel bei der Behebung des Problems unterstützen. Lesen Sie daher weiter unten weiter. Fehler beim Laden des Plug-Ins in Illustrator Wenn Sie beim Versuch, Adobe Illustrator zu starten, die Fehlermeldung „Fehler beim Laden des Plug-Ins“ erhalten, können Sie Folgendes verwenden: Als Administrator

Stremio-Untertitel funktionieren nicht; Fehler beim Laden der Untertitel Stremio-Untertitel funktionieren nicht; Fehler beim Laden der Untertitel Feb 24, 2024 am 09:50 AM

Untertitel funktionieren bei Stremio auf Ihrem Windows-PC nicht? Einige Stremio-Benutzer berichteten, dass in den Videos keine Untertitel angezeigt wurden. Viele Benutzer berichteten, dass ihnen die Fehlermeldung „Fehler beim Laden der Untertitel“ angezeigt wurde. Hier ist die vollständige Fehlermeldung, die bei diesem Fehler angezeigt wird: Beim Laden der Untertitel ist ein Fehler aufgetreten. Untertitel konnten nicht geladen werden: Dies könnte ein Problem mit dem von Ihnen verwendeten Plugin oder Ihrem Netzwerk sein. Wie in der Fehlermeldung angegeben, könnte es Ihre Internetverbindung sein, die den Fehler verursacht. Überprüfen Sie daher bitte Ihre Netzwerkverbindung und stellen Sie sicher, dass Ihr Internet ordnungsgemäß funktioniert. Abgesehen davon könnte es auch andere Gründe für diesen Fehler geben, darunter ein widersprüchliches Untertitel-Add-on, nicht unterstützte Untertitel für bestimmte Videoinhalte und eine veraltete Stremio-App. wie

Lassen Sie uns darüber sprechen, wie Sie mit SVG einen Bildmosaikeffekt erzielen Lassen Sie uns darüber sprechen, wie Sie mit SVG einen Bildmosaikeffekt erzielen Sep 01, 2022 am 11:05 AM

Wie kann man mit SVG einen Bildmosaikeffekt erzielen, ohne Javascript zu verwenden? Der folgende Artikel wird Ihnen ein detailliertes Verständnis vermitteln, ich hoffe, er wird Ihnen hilfreich sein!

Outlook friert beim Einfügen eines Hyperlinks ein Outlook friert beim Einfügen eines Hyperlinks ein Feb 19, 2024 pm 03:00 PM

Wenn beim Einfügen von Hyperlinks in Outlook Probleme beim Einfrieren auftreten, kann dies an instabilen Netzwerkverbindungen, alten Outlook-Versionen, Störungen durch Antivirensoftware oder Add-In-Konflikten liegen. Diese Faktoren können dazu führen, dass Outlook Hyperlink-Vorgänge nicht ordnungsgemäß verarbeitet. Beheben, dass Outlook beim Einfügen von Hyperlinks einfriert. Verwenden Sie die folgenden Korrekturen, um das Einfrieren von Outlook beim Einfügen von Hyperlinks zu beheben: Überprüfen Sie installierte Add-Ins. Aktualisieren Sie Outlook. Deaktivieren Sie vorübergehend Ihre Antivirensoftware und versuchen Sie dann, ein neues Benutzerprofil zu erstellen. Office-Apps reparieren. Programm deinstallieren und neu installieren. Los geht's. 1] Überprüfen Sie die installierten Add-Ins. Möglicherweise verursacht ein in Outlook installiertes Add-In das Problem.

PHP implementiert das unendliche Scrollen PHP implementiert das unendliche Scrollen Jun 22, 2023 am 08:30 AM

Mit der Entwicklung des Internets müssen immer mehr Webseiten das Laden durch Scrollen unterstützen, und das Laden durch unendliches Scrollen ist eine davon. Dadurch kann die Seite kontinuierlich neue Inhalte laden, sodass Benutzer reibungsloser im Internet surfen können. In diesem Artikel stellen wir vor, wie man das Laden von unendlichem Scrollen mit PHP implementiert. 1. Was ist unendliches Scrollen? Infinite Scroll Loading ist eine Methode zum Laden von Webinhalten basierend auf Bildlaufleisten. Sein Prinzip besteht darin, dass, wenn der Benutzer zum Ende der Seite scrollt, Hintergrunddaten asynchron über AJAX abgerufen werden, um kontinuierlich neue Inhalte zu laden. Diese Art von Lademethode

So lösen Sie das Problem, dass CSS nicht geladen werden kann So lösen Sie das Problem, dass CSS nicht geladen werden kann Oct 20, 2023 am 11:29 AM

Zu den Lösungen für das Problem, dass CSS nicht geladen werden kann, gehören die Überprüfung des Dateipfads, die Überprüfung des Dateiinhalts, das Löschen des Browser-Cache, die Überprüfung der Servereinstellungen, die Verwendung von Entwicklertools und die Überprüfung der Netzwerkverbindung. Detaillierte Einführung: 1. Überprüfen Sie zunächst den Pfad der CSS-Datei. Wenn sich die CSS-Datei in einem anderen Teil oder Unterverzeichnis der Website befindet, müssen Sie den richtigen Pfad angeben Die CSS-Datei befindet sich im Stammverzeichnis. 2. Überprüfen Sie den Dateiinhalt. Wenn der Pfad korrekt ist, liegt das Problem möglicherweise in der CSS-Datei usw.

So konvertieren Sie SVG in das JPG-Format So konvertieren Sie SVG in das JPG-Format Nov 24, 2023 am 09:50 AM

SVG kann mit Bildverarbeitungssoftware, Online-Konvertierungstools und der Python-Bildverarbeitungsbibliothek in das JPG-Format konvertiert werden. Detaillierte Einführung: 1. Bildverarbeitungssoftware umfasst Adobe Illustrator, Inkscape und GIMP; 2. Online-Konvertierungstools umfassen CloudConvert, Zamzar, Online Convert usw.;

Was soll ich tun, wenn Windows 7 den USB-Treiber nicht laden kann? Was soll ich tun, wenn Windows 7 den USB-Treiber nicht laden kann? Jul 11, 2023 am 08:13 AM

Bei der Installation des Win7-Systems stießen einige Internetnutzer auf eine Situation, in der das Laden des USB-Treibers fehlschlug. Das USB-Gerät konnte im neuen Win7-System nicht erkannt werden und gängige USB-Sticks, Mäuse und andere Geräte konnten nicht verwendet werden. Was soll ich also tun, wenn bei der Installation von Win7 der USB-Treiber nicht geladen werden kann? Lassen Sie sich von Xiaobai zeigen, wie Sie das Problem lösen können, dass der USB-Treiber bei der Installation von Win7 nicht geladen werden kann. Methode 1: 1. Zuerst schalten wir den Computer ein, rufen das Computersystem auf und überprüfen die Computersystemversion im Computersystem. Überprüfen Sie, ob die Version des Computersystems mit der Version des Gerätetreibers übereinstimmt. 2. Nachdem Sie die Treiberversion bestätigt haben, schließen Sie das USB-Gerät an das Computersystem an. Das Computersystem zeigt an, dass das Gerät keine Verbindung zum System herstellen kann. 3. Klicken Sie auf der Seite mit den Verbindungsinformationen auf die Schaltfläche „Hilfe“, um die Hilfeinformationen anzuzeigen. 4. Wenn die Computerabteilung

See all articles