首页
所有分类
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强大的动画效果animate使用说明及浏览器兼容介绍
Jan 09 HTML / CSS
css3一款3D字体带阴影效果的实现步骤
Mar 20 HTML / CSS
纯css3实现的鼠标悬停动画按钮
Dec 23 HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 HTML / CSS
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
Oct 15 HTML / CSS
10种CSS3实现的loading动画，挑一个走吧？
Nov 16 HTML / CSS
网页中的电话号码如何实现一键直呼效果_附示例
Mar 15 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
Jul 02 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
Jan 29 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
Aug 08 HTML / CSS
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
Jul 16 HTML / CSS
使用CSS实现小三角边框原理解析
Nov 07 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
冰岛购物网站(1) DB面试题(126) 哈萨克斯坦购物网站(2) C++面试题(199) 保加利亚购物网站(3) Android面试题(6) JAVA面试题(401) 白俄罗斯购物网站(3) PHP面试题(54) 约旦购物网站(1)
You might like
PHP编程网上资源导航
2006/10/09 PHP
php性能优化分析工具XDebug 大型网站调试工具
2011/05/22 PHP
10个超级有用值得收藏的PHP代码片段
2015/01/22 PHP
PHP实现的oracle分页函数实例
2016/01/25 PHP
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
2007/04/21 Javascript
Jquery选择器 $实现原理
2009/12/02 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
2012/12/28 Javascript
表单验证的完整应用案例探讨
2013/03/29 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
2016/02/16 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
基于React实现表单数据的添加和删除详解
2017/03/14 Javascript
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
最简单的vue消息提示全局组件的方法
2019/06/16 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
Python中分数的相关使用教程
2015/03/30 Python
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
python随机数分布random均匀分布实例
2019/11/27 Python
关于tf.reverse_sequence()简述
2020/01/20 Python
tensorflow模型文件(ckpt)转pb文件的方法（不知道输出节点名）
2020/04/22 Python
Python 实现敏感目录扫描的示例代码
2020/05/21 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
莫斯科隐形眼镜网上商店：Linzi
2019/07/22 全球购物
领导干部考察材料
2014/02/08 职场文书
后备干部培训方案
2014/05/22 职场文书
员工安全责任协议书
2016/03/22 职场文书
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技
JavaScript实现队列结构过程
2021/12/06 Javascript
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript