首页
所有分类
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结构性伪类选择器九种写法
Apr 18 HTML / CSS
利用CSS3的transition属性实现滑动效果
Aug 05 HTML / CSS
纯css3实现思维导图样式示例
Nov 01 HTML / CSS
CSS3 实现飘动的云朵动画
Dec 01 HTML / CSS
HTML5的标签的代码的简单介绍 HTML5标签的简介
May 28 HTML / CSS
html5实现微信打飞机游戏
Mar 27 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
Apr 23 HTML / CSS
HTML5 客户端数据库简易使用:IndexedDB
Dec 19 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
Dec 04 HTML / CSS
html+css实现分层金字塔的实例
Jun 02 HTML / CSS
深入理解CSS 中 transform matrix矩阵变换问题
Aug 30 HTML / CSS
浅谈为什么我的 z-index 又不生效了
Jul 15 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) 区块链(2) text-shadow(1) 双向链表(6) TypeScript(2) 单向链表(1) location(2) NumPy(2) RTMP(1) keeplive_timeout(1)
You might like
PHP网站安装程序制作的原理、步骤、注意事项和示例代码
2010/08/01 PHP
php 抽象类的简单应用
2011/09/06 PHP
PHP实现的AES 128位加密算法示例
2019/09/16 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
PHP执行系统命令函数实例讲解
2021/03/03 PHP
jQuery 开天辟地入门篇一
2009/12/09 Javascript
很棒的学习jQuery的12个网站推荐
2011/04/28 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
2011/10/24 Javascript
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
JQuery获取表格数据示例代码
2014/05/26 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
2016/01/03 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
2016/08/01 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
2016/08/02 Javascript
Angularjs2不同组件间的通信实例代码
2017/05/06 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
2018/05/04 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
JavaScript进阶（一）变量声明提升实例分析
2020/05/09 Javascript
js实现拖拽元素选择和删除
2020/08/25 Javascript
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
vue监听键盘事件的相关总结
2021/01/29 Vue.js
[01:01:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第一场 3月4日
2021/03/11 DOTA
Python中用sleep()方法操作时间的教程
2015/05/22 Python
Python读取MRI并显示为灰度图像实例代码
2018/01/03 Python
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
python flask安装和命令详解
2019/04/02 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
使用Matplotlib 绘制精美的数学图形例子
2019/12/13 Python
Python hashlib模块的使用示例
2020/10/09 Python
HTML5图片预览实例分享
2014/06/04 HTML / CSS
为中国消费者甄选天下优品：网易严选
2016/08/11 全球购物
New Balance俄罗斯官方网上商店：购买运动鞋
2020/03/02 全球购物
你对IPv6了解程度
2016/02/09 面试题
《自选商场》教学反思
2014/02/14 职场文书
党的群众路线教育实践活动心得体会（教师）
2014/10/31 职场文书