首页
所有分类
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 object-fit属性
Jul 27 HTML / CSS
css3 给背景设置渐变色的方法
Sep 12 HTML / CSS
CSS3的RGBA中关于整数和百分比值的转换
Aug 04 HTML / CSS
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
Nov 16 HTML / CSS
详解CSS3中字体平滑处理和抗锯齿渲染
Mar 29 HTML / CSS
详解Html5原生拖拽操作
Jan 12 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
Sep 02 HTML / CSS
html5指南-7.geolocation结合google maps开发一个小的应用
Jan 07 HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
Oct 23 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
Jun 13 HTML / CSS
Canvas 像素处理之改变透明度的实现代码
Jan 08 HTML / CSS
浅析HTML5 Landmark
Sep 11 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
阿里云(6) ipyvizzu(1) 可视化动图(1) 蒙特卡罗(1) redis shake(1) pdfkit(1) 条形图(1) 数据同步(1) matplotlib(7) bufio(1)
You might like
PHP MVC模式在网站架构中的实现分析
2010/03/04 PHP
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
一个小型js框架myJSFrame附API使用帮助
2008/06/28 Javascript
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
跟我学习javascript的Date对象
2015/11/19 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
2017/03/14 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
2017/08/04 jQuery
详解操作虚拟dom模拟react视图渲染
2018/07/25 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
通过JS判断网页是否为手机打开
2020/10/28 Javascript
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python获取运行目录与当前脚本目录的方法
2015/06/01 Python
Using Django with GAE Python 后台抓取多个网站的页面全文
2016/02/17 Python
Python中Numpy包的安装与使用方法简明教程
2018/07/03 Python
Python文件读写保存操作的示例代码
2018/09/14 Python
[原创]Python入门教程2. 字符串基本操作【运算、格式化输出、常用函数】
2018/10/29 Python
python增加图像对比度的方法
2019/07/12 Python
python实现飞机大战小游戏
2019/11/08 Python
Tensorflow 模型转换 .pb convert to .lite实例
2020/02/12 Python
python实现俄罗斯方块游戏（改进版）
2020/03/13 Python
基于Python的身份证验证识别和数据处理详解
2020/11/14 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
美国波西米亚风格精品店：South Moon Under
2019/10/26 全球购物
PHP经典面试题
2016/09/03 面试题
会计专业大学生求职信范文
2014/01/28 职场文书
2014年五四青年节活动方案
2014/03/29 职场文书
文明礼仪主题班会
2015/08/13 职场文书
CSS实现鼠标悬浮动画特效
2023/05/07 HTML / CSS