CSS3: animation实现简易幻灯片(轮播)

来源：互联网发布：花椒网络直播编辑：程序博客网时间：2024/05/17 22:20

前言

CSS3有个别特性,可以触发硬件GPU来加速渲染,而不是调用默认浏览器引擎渲染;

但是很多属性,默认都是不开启硬件加速的;需要触发条件,一个最简单的触发条件就是使用3D属性(对Z轴的操作)

效果图

这里写图片描述

代码

<!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>    <div class="slider">        <div class="items"></div>    </div></body></html>

0 0