Heim >Web-Frontend >CSS-Tutorial >So erzielen Sie mit reinem CSS3 den Effekt eines Bildkarussells
So erzielen Sie mit reinem CSS3 den Effekt eines Bildkarussells
- 不言Original
- 2018-08-22 14:56:154319Durchsuche
Der Inhalt dieses Artikels befasst sich mit der Verwendung von reinem CSS3, um den Effekt eines Bildkarussells zu erzielen. Ich hoffe, dass er für Sie hilfreich ist.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
text-decoration: none;
}
ul{
list-style: none;
}
ul li{
width: 400px;
height:200px;
}
#container{
position: relative;
width: 400px;
height: 200px;
overflow: hidden;/*隐藏溢出的图片*/
}
.pic{
width:1600px;/*4张图的宽度*/
position: absolute;/*基于父容器进行定位*/
left:0;
animation-name: carousel;
animation-duration: 12s;
animation-iteration-count: infinite;/*//动画调用可以简写*/
}
@keyframes carousel {
0%,30%{
left: 0;
}
35%,65%{
left: -400px;
}
70%,99%{
left: -800px;
}
100%{
left: -1200px;
}
}
.pic li{
float: left;
background: #5dd94e;
}
.pic li img {
width: 400px;
height: 200px;
}
</style>
<body>
<p id="container">
<ul class="pic">
<li><a href="javascript:;">111</a></li>
<li><a href="javascript:;">222</a></li>
<li><a href="javascript:;">333</a></li>
<li><a href="javascript:;">111</a></li><!-- 克隆第一张 -->
</ul>
</p>
</body>
</html>Verwandte Empfehlungen:
Wie lasse ich Bilder in CSS3 kontinuierlich rotieren? [Detaillierte Erklärung]
Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit reinem CSS3 den Effekt eines Bildkarussells. 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：So implementieren Sie mit reinem CSS den Loader-Animationseffekt eines Rennwagens (mit Code)Nächster Artikel：So implementieren Sie mit reinem CSS den Loader-Animationseffekt eines Rennwagens (mit Code)