首页
所有分类
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 相关文章推荐
修复iPhone的safari浏览器上submit按钮圆角bug
Dec 24 HTML / CSS
发现两个有趣的CSS3动画效果
Aug 14 HTML / CSS
CSS的pointer-events属性详细介绍（作用和注意事项）
Apr 23 HTML / CSS
基于CSS3实现的漂亮Menu菜单效果代码
Sep 10 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
May 17 HTML / CSS
CSS3中媒体查询结合rem布局适配手机屏幕
Jun 10 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
Feb 27 HTML / CSS
HTML5 Canvas阴影使用方法实例演示
Aug 02 HTML / CSS
详解HTML5中rel属性的prefetch预加载功能使用
May 06 HTML / CSS
有关HTML5页面在iPhoneX适配问题
Nov 13 HTML / CSS
html5给汉字加拼音加进度条的实现代码
Apr 07 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
Sep 25 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
frg-100(1) SONY600GR(1) 根德5570(1) WR-800F(1) R9700(1) YAESU(1) DE1107(3) 239军机(1) DE1103(2) DE1105(1)
You might like
PHP 翻页 实例代码
2009/08/07 PHP
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
兼容PHP和Java的des加密解密代码分享
2014/06/26 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
php实现查询功能（数据访问）
2017/05/23 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
php实现 master-worker 守护多进程模式的实例代码
2019/07/20 PHP
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
JavaScript CSS菜单功能 改进版
2008/12/20 Javascript
jquery对象和javascript对象即DOM对象相互转换
2014/08/07 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用（四）
2017/06/04 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
webpack-mvc 传统多页面组件化开发详解
2019/05/07 Javascript
vue实现扫码功能
2020/01/17 Javascript
[43:47]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第一局
2016/03/05 DOTA
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python实现爬虫下载美女图片
2015/07/14 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
一行代码让 Python 的运行速度提高100倍
2018/10/08 Python
python opencv读mp4视频的实例
2018/12/07 Python
python实现flappy bird游戏
2018/12/24 Python
Python FFT合成波形的实例
2019/12/04 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
美国最大的农村生活方式零售店：Tractor Supply Company（TSC）
2017/05/15 全球购物
哈曼俄罗斯官方网上商店：Harman.club
2020/07/24 全球购物
2014新年元旦活动策划方案
2014/02/18 职场文书
2014年道德讲堂实施方案
2014/03/05 职场文书
法制演讲稿
2014/09/10 职场文书
社区党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
Python 数据可视化之Matplotlib详解
2021/11/02 Python