首页
所有分类
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中动画属性transform、transition和animation属性的区别
Sep 25 HTML / CSS
css3的@media属性实现页面响应式布局示例代码
Feb 10 HTML / CSS
CSS3 animation实现逐帧动画效果
Jun 02 HTML / CSS
css3动画 小球滚动 js控制动画暂停
Nov 29 HTML / CSS
HTML5 Canvas API中drawImage()方法的使用实例
Mar 25 HTML / CSS
html5指南-7.geolocation结合google maps开发一个小的应用
Jan 07 HTML / CSS
程序设计HTML5 Canvas API
Apr 08 HTML / CSS
html5画布旋转效果示例
Jan 27 HTML / CSS
HTML5 canvas基本绘图之文字渲染
Jun 27 HTML / CSS
H5混合开发app如何升级的方法
Jan 10 HTML / CSS
html2canvas生成的图片偏移不完整的解决方法
May 19 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
May 28 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
Seaborn(1) PostMapping(1) ResNet50(1) yolo3(1) tensorflow(2) 字符串(2) Spring(9) Xception(1) 内存泄露(1) Inception(2)
You might like
php生成二维码的几种方式整理及使用实例
2013/06/03 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
PHP多个图片压缩成ZIP的方法
2020/08/18 PHP
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
JS常用表单验证方法总结
2014/05/22 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
ajax实现动态下拉框示例
2017/01/10 Javascript
JS中mouseup事件丢失的原因与解决办法
2017/06/14 Javascript
解析Vue.js中的组件
2018/02/02 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
深入剖析Node.js cluster模块
2018/05/23 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
python-str,list,set间的转换实例
2018/06/27 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
Python Web框架之Django框架Form组件用法详解
2019/08/16 Python
使用Python实现画一个中国地图
2019/11/23 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
Django接收照片储存文件的实例代码
2020/03/07 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
Priority Pass机场贵宾室会籍计划：全球超过1200间机场贵宾室
2018/08/26 全球购物
集体婚礼策划方案
2014/02/22 职场文书
司仪主持词两篇
2014/03/22 职场文书
省级优秀班集体申报材料
2014/05/25 职场文书
2014年店长工作总结
2014/11/17 职场文书
超市收银员岗位职责
2015/04/07 职场文书
七一晚会主持词
2015/06/29 职场文书
军训新闻稿范文
2015/07/17 职场文书
2016应届毕业生就业指导课心得体会
2016/01/15 职场文书
祝福语集锦：送给闺蜜的生日祝福语
2019/10/08 职场文书
俄罗斯十大城市人口排名，第三首都仅排第六，第二是北方首都
2022/03/20 杂记
nginx日志格式分析和修改
2022/04/28 Servers