페이지 이력
...
Sv translation | ||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||
Erstellen von angepassten EffektenAngepasste Effekte können auf die für Animationseffekte erstellten CSS-Skript-Elemente angewendet werden.
Klicken Sie in der Werkzeugleiste am oberen Rand der Bearbeitungsseite von Web Author auf (Angepassten Effekt hinzufügen). Wenn ein Pop-up-Fenster erscheint, stellen Sie die folgenden Elemente der Reihe nach ein und erstellen Sie dann das CSS-Skript.
Empfehlungen für das Erstellen von CSS-SkriptBeim Erstellen eines Animationsskripts mithilfe von
Beispiel für das Erstellen eines CSS-SkriptsErstellen Sie in Bezugnahme auf das folgende Beispiel das CSS-Skript und wenden Sie die angepassten Effekte auf die Elemente an. Umwandlung der Bildfarbe in Graustufen .grayScale { animation: grayscale 1s infinite; } @keyframes grayscale { 0% { filter: grayscale(0%); } 50%{ filter: grayscale(100%); } 100%{ filter: grayscale(0%); } } Absteigend von oben nach unten .bounce-in { animation: bounce 1.1s both; } @keyframes bounce { 0% { transform: translateY(-500px); animation-timing-function: ease-in; opacity: 0; } 25% { transform: translateY(0); animation-timing-function: ease-out; opacity: 1; } 40% { transform: translateY(-250px); animation-timing-function: ease-in; } 60% { transform: translateY(0); animation-timing-function: ease-out; } 70% { transform: translateY(-100px); animation-timing-function: ease-in; } 78% { transform: translateY(0); animation-timing-function: ease-out; } 85% { transform: translateY(-30px); animation-timing-function: ease-out; } 90% { transform: translateY(0); animation-timing-function: ease-out; } 95% { transform: translateY(-20px); animation-timing-function: ease-in; } 100% { transform: translateY(0); animation-timing-function: ease-out; } } |
Sv translation | ||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||
Creazione di effetti personalizzatiGli effetti personalizzati possono essere applicati agli elementi di script CSS creati per gli effetti animazione.
Fare clic su (Aggiungi effetto personalizz.) nella barra degli strumenti nella parte superiore della pagina di modifica di Web Author. Quando viene visualizzata la finestra popup, impostare in sequenza gli elementi seguenti, quindi creare lo script CSS.
Consiglio per la creazione di script CSSQuando si crea lo script di animazione utilizzando
Esempio di creazione dello script CSSFacendo riferimento all'esempio seguente, creare lo script CSS e applicare effetti personalizzati agli elementi. Conversione del colore dell'immagine in scala dei grigi .grayScale { animation: grayscale 1s infinite; } @keyframes grayscale { 0% { filter: grayscale(0%); } 50%{ filter: grayscale(100%); } 100%{ filter: grayscale(0%); } } Decrescente dall'alto al basso .bounce-in { animation: bounce 1.1s both; } @keyframes bounce { 0% { transform: translateY(-500px); animation-timing-function: ease-in; opacity: 0; } 25% { transform: translateY(0); animation-timing-function: ease-out; opacity: 1; } 40% { transform: translateY(-250px); animation-timing-function: ease-in; } 60% { transform: translateY(0); animation-timing-function: ease-out; } 70% { transform: translateY(-100px); animation-timing-function: ease-in; } 78% { transform: translateY(0); animation-timing-function: ease-out; } 85% { transform: translateY(-30px); animation-timing-function: ease-out; } 90% { transform: translateY(0); animation-timing-function: ease-out; } 95% { transform: translateY(-20px); animation-timing-function: ease-in; } 100% { transform: translateY(0); animation-timing-function: ease-out; } } |