首页
所有分类
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 相关文章推荐
浅析两列自适应布局的3种思路
May 03 HTML / CSS
45个非常奇妙的CSS3 特性应用示例
Jan 01 HTML / CSS
CSS3 display知识详解
Nov 25 HTML / CSS
前端隐藏出边界内容的实现方法
Apr 14 HTML / CSS
CSS3实现多背景模拟动态边框的效果
Nov 08 HTML / CSS
CSS3 :default伪类选择器使用简介
Mar 15 HTML / CSS
关于css中margin的值和垂直外边距重叠问题
Oct 27 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
Jan 30 HTML / CSS
HTML5学习笔记之History API
Feb 26 HTML / CSS
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
Aug 18 HTML / CSS
HTML5离线应用与客户端存储的实现
May 03 HTML / CSS
CSS3 实现NES游戏机的示例代码
Apr 21 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
DE1105(1) 根德5570(1) DE1107(3) frg-100(1) 239军机(1) SONY600GR(1) AN-LP1(1) ICF-903L(1) YAESU(1) DE1103(2)
You might like
php 一元分词算法
2009/11/30 PHP
PHP中的array数组类型分析说明
2010/07/27 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
php实现的简单数据库操作Model类
2016/11/16 PHP
javascript控制frame,iframe的src属性代码
2009/12/31 Javascript
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
JavaScript设置表单上传时文件个数的方法
2015/08/11 Javascript
js制作网站首页图片轮播特效代码
2016/08/30 Javascript
Angularjs2不同组件间的通信实例代码
2017/05/06 Javascript
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
微信小程序 如何获取网络状态
2019/07/26 Javascript
JavaScript实现背景自动切换小案例
2019/09/27 Javascript
浅探express路由和中间件的实现
2019/09/30 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
原生js实现贪食蛇小游戏的思路详解
2019/11/26 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
Python 代码性能优化技巧分享
2012/08/07 Python
Python实例之wxpython中Frame使用方法
2014/06/09 Python
Python深入学习之对象的属性
2014/08/31 Python
Python2.X/Python3.X中urllib库区别讲解
2017/12/19 Python
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
Python学习小技巧总结
2018/06/10 Python
对python多线程与global变量详解
2018/11/09 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
详解Python绘图Turtle库
2019/10/12 Python
使用python制作一个解压缩软件
2019/11/13 Python
python重要函数eval多种用法解析
2020/01/14 Python
css3 flex布局 justify-content:space-between 最后一行左对齐
2020/01/02 HTML / CSS
很酷的小工具和电子产品商城：GearBest
2016/11/19 全球购物
婚前协议书
2014/04/15 职场文书
研究生简历自我评价范文
2014/09/13 职场文书
2015年先进个人自荐书
2015/03/24 职场文书
2015年计划生育责任书
2015/05/08 职场文书
消防安全培训工作总结
2015/10/23 职场文书
2016年教师学习廉政准则心得体会
2016/01/20 职场文书
慰问信的写作格式及范文！
2019/06/24 职场文书