Heim > Artikel > Web-Frontend > CSS, um einen Bildschleifen-Animationseffekt zu erzielen (Code)

CSS, um einen Bildschleifen-Animationseffekt zu erzielen (Code)

不言Original: 2018-08-18 14:52:385711Durchsuche

Der Inhalt dieses Artikels befasst sich mit dem Animationseffekt (Code) der Realisierung einer Bildschleife. Er hat einen gewissen Referenzwert. Ich hoffe, er wird für Sie hilfreich sein.

<style>
*{margin: 0;padding: 0;}
.robot{
	width: 167px;
    height: 191px;
    background: url(robot.png) no-repeat;
	position: absolute;
	left: 0px;
	top: 20px;
	animation:robotmove 10s linear infinite;
}
/*循环翻身*/
@keyframes robotmove{
	0%{}
	49%{transform:rotateY(0deg);}/*保障前面百分之四十九图片不会中途翻转*/
	50%{left:1000px; transform:rotateY(180deg);}/*49%-50%图片翻转*/
	100%{left:0px; transform:rotateY(180deg);}/*保障后百分之五十都是翻转了180度的形状*/
}
/*一直一个方向、无翻转*/
@keyframes robotmove2{
	0%{}
	100%{left: 1100px;}
}
/*兼容前面加-webkit*/
</style>
</head>
<body>
<p class="robot"></p>

Verwandte Empfehlungen:

CSS3-Animation, um 5 Vorlade-Animationseffekte zu erzielen

Verwenden Sie CSS + JQuery, um Bildgleiten zu erreichen Effect_html/css_WEB-ITnose

Teilen Sie den Effektcode einer CSS3-Kreis-Animation zum Vergrößern und Verkleinern des Zyklus

Das obige ist der detaillierte Inhalt vonCSS, um einen Bildschleifen-Animationseffekt zu erzielen (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

jquery css css3 循环

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：Wie füge ich CSS in HTML ein? Einführung in vier Methoden zum Einfügen von CSS in HTML (mit Code)Nächster Artikel：Wie füge ich CSS in HTML ein? Einführung in vier Methoden zum Einfügen von CSS in HTML (mit Code)

In Verbindung stehende Artikel

Mehr sehen