Heim > Artikel > Web-Frontend > CSS-Animations-Tutorial

CSS-Animations-Tutorial

墨辰丷Original: 2018-05-11 15:32:362037Durchsuche

In diesem Artikel wird hauptsächlich die Verwendung von CSS zum Erstellen einfacher Animationen vorgestellt.

Fall 1:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	animation:myfirst 5s;
	-moz-animation:myfirst 5s; /* Firefox */
	-webkit-animation:myfirst 5s; /* Safari and Chrome */
	-o-animation:myfirst 5s; /* Opera */
}

@keyframes myfirst
{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}

@-moz-keyframes myfirst /* Firefox */
{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}

Fall 2 :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:myfirst 5s;
	-webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>

Verwandte Empfehlungen:

PHP Full Site Development Engineer – erweiterte CSS-Animation und animierte .css und wow .js

Vues CSS-Animation

Verwenden Sie CSS, um die Pausen- und Wiedergabefunktionen des CSS-Animations-Tutorials zu implementieren

Das obige ist der detaillierte Inhalt vonCSS-Animations-Tutorial. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

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

Vorheriger Artikel：Ein Beispiel für eine Schaltfläche, die mithilfe von CSS mit einem Bild implementiert wurdeNächster Artikel：Ein Beispiel für eine Schaltfläche, die mithilfe von CSS mit einem Bild implementiert wurde

In Verbindung stehende Artikel

Mehr sehen