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

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

不言
Freigeben: 2018-08-18 14:52:38
Original
5734 Leute haben es durchsucht

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
css
Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage