L'animation CSS3 implémente des effets de carrousel de diapositives simples-tutoriel CSS-php.cn

L'animation CSS3 implémente des effets de carrousel de diapositives simples

不言

Libérer： 2018-06-20 18:01:03

original

2145 Les gens l'ont consulté

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>

Copier après la connexion

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!