Home > Article > Web Front-end > CSS3 animation implements simple slide carousel effects
CSS3 animation implements simple slide carousel effects
- 不言Original
- 2018-06-20 18:01:032211browse
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>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!