Maison > Article > interface Web > L'animation CSS3 implémente des effets de carrousel de diapositives simples
L'animation CSS3 implémente des effets de carrousel de diapositives simples
- 不言original
- 2018-06-20 18:01:032213parcourir
Cet article présente principalement l'animation CSS3 pour implémenter en détail des effets de carrousel de diapositives simples. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer
CSS3 a des fonctionnalités individuelles qui peuvent être déclenchées. pour accélérer le rendu au lieu d'appeler le rendu du moteur de navigateur par défaut ;
Cependant, de nombreux attributs n'activent pas l'accélération matérielle par défaut ; une condition de déclenchement est requise, et l'une des conditions de déclenchement les plus simples consiste à utiliser des attributs 3D (pour Fonctionnement sur l'axe Z)
Rendu
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3幻灯片</title>
<style type="text/css" media="screen">
.items {
width: 280px;
height: 150px;
border: 1px solid #ddd;
box-sizing: border-box;
border-radius:10px;
background-size: cover;
-webkit-transform: translateZ(0);
transform: translateZ(0);
background-repeat: no-repeat;
-webkit-animation: slider 15s linear infinite alternate;
animation: slider 15s linear infinite alternate;
-webkit-transform-origin: center center;
transform-origin: center center;
}
@-webkit-keyframes slider {
0% {
background-image: url(1.jpg) ;
}
25% {
background-image: url(2.jpg) ;
}
50% {
background-image: url(3.jpg) ;
}
75% {
background-image: url(4.jpg);
}
100% {
background-image: url(5.jpg);
}
}
@keyframes slider {
0% {
background-image: url(1.jpg) ;
}
25% {
background-image: url(2.jpg) ;
}
50% {
background-image: url(3.jpg) ;
}
75% {
background-image: url(4.jpg);
}
100% {
background-image: url(5.jpg);
}
}
</style>
</head>
<body>
<p class="slider">
<p class="items"></p>
</p>
</body>
</html>Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !
Recommandations associées :
À propos de l'utilisation des modifications graphiques de transformation courantes dans CSS3
À propos de l'animation CSS3 pour obtenir des images Effet d'animation par image
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!