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

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

效果图

代码

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。