首页
所有分类
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等相关属性制作分页导航实现代码
Dec 24 HTML / CSS
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
May 07 HTML / CSS
一款简洁的纯css3代码实现的动画导航
Oct 31 HTML / CSS
用CSS3写的模仿iPhone中的返回按钮
Apr 04 HTML / CSS
关于css兼容性问题及一些常见问题汇总
May 03 HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
Jun 22 HTML / CSS
详解Html5微信支付爬坑之路
Jul 24 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
Dec 25 HTML / CSS
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
Jul 15 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
Sep 02 HTML / CSS
HTML5拖拉上传文件的简单实例
Jan 11 HTML / CSS
HTML文本属性&amp;颜色控制属性的实现
Dec 17 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
enumerate(1) pytest(3) find(1) zip(1) metaclass(1) list(1) IOC(3) csv(4) 进销存(1) 自动化(1)
You might like
CodeIgniter配置之SESSION用法实例分析
2016/01/19 PHP
PHP精确计算功能示例
2016/11/29 PHP
PHP实现的用户注册表单验证功能简单示例
2019/02/25 PHP
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
js调用后台、后台调用前台等方法总结
2014/04/17 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
jQuery动态星级评分效果实现方法
2015/08/06 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
SpringMVC+bootstrap table实例详解
2017/06/02 Javascript
基于js文件加载优化(详解)
2018/01/03 Javascript
Js面试算法详解
2018/04/08 Javascript
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
Python使用MONGODB入门实例
2015/05/11 Python
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
Python实现自动为照片添加日期并分类的方法
2017/09/30 Python
使用numba对Python运算加速的方法
2018/10/15 Python
python selenium执行所有测试用例并生成报告的方法
2019/02/13 Python
python3人脸识别的两种方法
2019/04/25 Python
Python提取PDF内容的方法(文本、图像、线条等)
2019/09/25 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
Bergfreunde丹麦：登山装备网上零售商
2017/02/26 全球购物
美国全球旅游运营商：Pacific Holidays
2018/06/18 全球购物
internal修饰符起什么作用
2013/12/16 面试题
医药大学生求职简历的自我评价
2013/10/17 职场文书
干部选拔任用方案
2014/05/26 职场文书
图书室标语
2014/06/21 职场文书
中学生运动会通讯稿大全
2014/09/18 职场文书
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python
详解MongoDB的条件查询和排序
2021/06/23 MongoDB