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

前言

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>

时间： 2024-10-20 02:25:23

CSS3: animation实现简易幻灯片(轮播)的相关文章

CSS3——animation的基础（轮播图）

作为前端刚入门的小菜鸟,只想记录一下每天的小收获对于animation动画 1.实现动画效果的组成: (1)通过类似Flash的关键帧来声明一个动画 (2)在animation属性中调用关键帧声明的动画 2.animation是一个复合属性包括很多的子属性: animation-name:用来指定一个关键帧动画的名称,这个动画名必须对应一个@keyframes 规则.CSS 加载时会应用animation-name 指定的动画,从而执行动画. animation-duration 用来设置动画

jQuery实现的简易幻灯片轮播

下载上图,把后缀改为7z解压就可以看到文件. <!DOCTYPE html> <html> <head> <meta charset="urf-8"> <title>jQuery Easy Slider</title> <style> * { margin: 0; padding: 0; } img { border: none; } #slider { overflow: hidden; width:

Framework7学习笔记之幻灯片(轮播图)

一:定义并初始化轮播图 <div class="swiper-container swiper-init" data-speed="轮播速度" data-pagination=".swiper-pagination"> <div class="swiper-wrapper"> <div class="swiper-slide">轮播页面内容</div> <

使用JQuery制作幻灯片(轮播图）

1.首先看一下目录结构 images文件夹放所需要播放的图片. js文件夹放jquery库和main.js 2.html代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>JQuery slideShow</title> 6 <style> 7 *{margin: 0;

css3爆炸效果更换图片轮播图

思路:给一个div设置一个背景图片1.jpg,然后在这个div上面用两个for循环动态的创建一个列数为C行数为R数量的span,并给这些span设置宽高.定位并设置背景图片0.jpg,然后设置每个span的background-position,使这组span平铺在div上.当点击div时换图,换图的实现方法是循环每个span,以div的宽度的中线为定位线,让这组span随机进行transform,然后在结束的时候让span的透明度变为透明,并且瞬间拉回全部span到原始位置并更换span和di

基于JQuery实现的幻灯片轮播（对时间间隔做严格控制）

<div class="tel_slide"> <div class="tel_slide_title">Title</div> <div class="slidebtn" id="left" > <img alt="" src="images/left.png"> </div> &l

仿flash的幻灯片轮播效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

CSS实现简易的轮播图

<html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin:0; padding:0; } ul { ist-style:none; } #wrap { width:600px; height:400px; margin:30px auto; border:1px solid #9cc5ef; overflow:hidden; }

js轮播（qq幻灯片效果）

<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>qq幻灯片轮播</title><style type="text/css"> *{margin:0