CSS3 animation implements simple slide carousel effects-CSS Tutorial-php.cn

CSS3 animation implements simple slide carousel effects

不言

Release： 2018-06-20 18:01:03

Original

2188 people have browsed it

This article mainly introduces CSS3 animation to implement simple slide carousel effects in detail, which has certain reference value. Interested friends can refer to it

CSS3 has individual features that can be triggered The hardware GPU is used to accelerate rendering instead of calling the default browser engine rendering;

However, many properties do not enable hardware acceleration by default; a trigger condition is required, and one of the simplest trigger conditions is to use 3D attributes (for Z-axis operation)

Rendering

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>

Copy after login

The above is the entire content of this article, I hope It will be helpful for everyone’s learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About the usage of common transformation graphic changes in CSS3

About CSS3 animation to achieve frame-by-frame animation Effect

The above is the detailed content of CSS3 animation implements simple slide carousel effects. For more information, please follow other related articles on the PHP Chinese website!