首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

CSS3 animation实现简易幻灯片轮播特效

Posted in HTML / CSS onSeptember 27, 2016

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

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

效果图

CSS3 animation实现简易幻灯片轮播特效

代码

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <meta charset="UTF-8">  
  6.     <title>CSS3幻灯片</title>  
  7.     <style type="text/css" media="screen">  
  8.         .items {   
  9.             width: 280px;   
  10.             height: 150px;   
  11.             border: 1px solid #ddd;   
  12.                 box-sizing: border-box;   
  13.                 border-radius:10px;   
  14.                 background-size: cover;   
  15.             -webkit-transform: translateZ(0);   
  16.             transform: translateZ(0);   
  17.                 background-repeat: no-repeat;   
  18.             -webkit-animation: slider 15s linear infinite alternate;   
  19.             animation: slider 15s linear infinite alternate;   
  20.             -webkit-transform-origin: center center;   
  21.                     transform-origin: center center;   
  22.   
  23.         }   
  24.   
  25.   
  26.   
  27.         @-webkit-keyframes slider {   
  28.             0% {   
  29.                 background-image: url(1.jpg) ;   
  30.             }   
  31.             25% {   
  32.                 background-image: url(2.jpg) ;   
  33.   
  34.             }   
  35.             50% {   
  36.                 background-image: url(3.jpg) ;   
  37.   
  38.             }   
  39.             75% {   
  40.                 background-image: url(4.jpg);   
  41.   
  42.             }   
  43.             100% {   
  44.                 background-image: url(5.jpg);   
  45.   
  46.             }   
  47.         }   
  48. @keyframes slider {   
  49.             0% {   
  50.                 background-image: url(1.jpg) ;   
  51.   
  52.             }   
  53.             25% {   
  54.                 background-image: url(2.jpg) ;   
  55.   
  56.             }   
  57.             50% {   
  58.                 background-image: url(3.jpg) ;   
  59.   
  60.             }   
  61.             75% {   
  62.                 background-image: url(4.jpg);   
  63.   
  64.             }   
  65.             100% {   
  66.                 background-image: url(5.jpg);   
  67.   
  68.             }   
  69.         }   
  70.   
  71.   
  72.     </style>  
  73. </head>  
  74.   
  75. <body>  
  76.     <div class="slider">  
  77.         <div class="items"></div>  
  78.     </div>  
  79. </body>  
  80.   
  81. </html>  
  82.   

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

CSS3 animation实现简易幻灯片轮播特效

- Author -

crper

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
纯css3实现效果超级炫的checkbox复选框和radio单选框
Sep 01 HTML / CSS
一款简洁的纯css3代码实现的动画导航
Oct 31 HTML / CSS
CSS3的first-child选择器实战攻略
Apr 28 HTML / CSS
HTML+CSS3模拟心的跳动实例代码
Sep 05 HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
Mar 26 HTML / CSS
基于HTML5 Canvas 实现弹出框效果
Jun 05 HTML / CSS
html5中canvas学习笔记2-判断浏览器是否支持canvas
Jan 06 HTML / CSS
html5实现微信打飞机游戏
Mar 27 HTML / CSS
html5+svg学习指南之SVG基础知识
Dec 17 HTML / CSS
HTML5页面中尝试调起APP功能
Sep 12 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
Jan 03 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
Sep 16 HTML / CSS
CSS3实现复选框动画特效示例代码
Sep 27 #HTML / CSS
利用CSS3实现单选框动画特效示例代码
Sep 26 #HTML / CSS
利用纯CSS3实现tab选项卡切换示例代码
Sep 21 #HTML / CSS
css3 盒模型以及box-sizing属性全面了解
Sep 20 #HTML / CSS
CSS3按钮鼠标悬浮实现光圈效果源码
Sep 11 #HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
Sep 06 #HTML / CSS
利用CSS3实现的文字定时向上滚动
Aug 29 #HTML / CSS
斯洛伐克购物网站(7) 新西兰购物网站(42) 阿联酋购物网站(26) 沙特阿拉伯购物网站(9) 奥地利购物网站(28) 卡塔尔购物网站(3) 波兰购物网站(52) 捷克购物网站(26) 菲律宾购物网站(13) 智利购物网站(5)
You might like
php 遍历数据表数据并列表横向排列的代码
2009/09/05 PHP
PHP原理之异常机制深入分析
2010/08/08 PHP
php提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
php的常量和变量实例详解
2017/06/27 PHP
PHP设计模式之适配器模式定义与用法详解
2018/04/03 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
初探jquery——表单应用范例
2007/02/20 Javascript
禁止js文件缓存的代码
2010/04/09 Javascript
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
2013/05/06 Javascript
JavaScript实现动态添加，删除行的方法实例详解
2015/07/02 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
理解Javascript图片预加载
2016/02/23 Javascript
jQuery窗口拖动功能的实现代码
2017/02/04 Javascript
webpack安装配置与常见使用过程详解（结合vue）
2020/06/01 Javascript
[12:51]71泪洒现场！是DOTA2让经典重现
2014/03/24 DOTA
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
一个简单的python程序实例(通讯录)
2013/11/29 Python
python k-近邻算法实例分享
2014/06/11 Python
Python Paramiko模块的安装与使用详解
2016/11/18 Python
Python实现字符串反转的常用方法分析【4种方法】
2017/09/30 Python
python中pika模块问题的深入探究
2018/10/13 Python
Python实现代码块儿折叠
2020/04/15 Python
Python日志:自定义输出字段 json格式输出方式
2020/04/27 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
Python函数参数分类原理详解
2020/05/28 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
Html5新增标签有哪些
2017/04/13 HTML / CSS
Electric官网：美国高级眼镜和配件品牌
2020/06/04 全球购物
金融学专业大学生职业生涯规划
2014/03/07 职场文书
绿化工程实施方案
2014/03/17 职场文书
个人求职自荐信范文
2014/06/20 职场文书
高中生旷课检讨书
2014/10/08 职场文书
网站文案策划岗位职责
2015/04/14 职场文书
企业党员岗位承诺书
2015/04/27 职场文书
MySQL系列之八 MySQL服务器变量
2021/07/02 MySQL