首页
所有分类
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制作3D效果文字具体实现样式
May 02 HTML / CSS
一款利用纯css3实现的超炫3D表单的实例教程
Dec 01 HTML / CSS
CSS3的first-child选择器实战攻略
Apr 28 HTML / CSS
CSS3的calc()做响应模式布局的实现方法
Sep 06 HTML / CSS
详解HTML5 LocalStorage 本地存储
Dec 23 HTML / CSS
基于 HTML5 WebGL 实现的垃圾分类系统
Oct 08 HTML / CSS
20佳惊艳的HTML5应用程序示例分享
May 03 HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
Jan 02 HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
Dec 06 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
Jan 20 HTML / CSS
浅谈css清除浮动(clearfix和clear)的用法
May 21 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
E1-XM(1) DSP(2) 海燕B411(1) 接收机(2) 放大器(1) 修复(2) R601SW(1) 电子管(5) 矿石收音机(1) 车机(1)
You might like
PHP脚本的10个技巧(2)
2006/10/09 PHP
PHP 地址栏信息的获取代码
2009/01/07 PHP
PHP 压缩文件夹的类代码
2009/11/05 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
escape、encodeURI、encodeURIComponent等方法的区别比较
2006/12/27 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
vue组件 $children,$refs，$parent的使用详解
2017/07/31 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
jquery实现广告上下滚动效果
2021/03/04 jQuery
[34:08]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS EG
2018/03/30 DOTA
[00:08]DOTA2勇士令状等级奖励“天外飞星”
2019/05/24 DOTA
Python 的 with 语句详解
2014/06/13 Python
python实现下载文件的三种方法
2017/02/09 Python
Python快速排序算法实例分析
2017/11/29 Python
django模板语法学习之include示例详解
2017/12/17 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
三星俄罗斯授权在线商店：Samsung俄罗斯
2019/09/28 全球购物
Fabletics官网：美国运动服饰品牌，由好莱坞女演员凯特·哈德森创立
2019/10/19 全球购物
求两个数的乘积和商数，该作用由宏定义来实现
2013/03/13 面试题
自荐信如何制作？
2014/02/21 职场文书
安全承诺书范文
2014/03/26 职场文书
法人委托书范本
2014/09/15 职场文书
意外伤害赔偿协议书范文
2014/09/23 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
2016继续教育培训学习心得体会
2016/01/19 职场文书
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript
pandas提升计算效率的一些方法汇总
2021/05/30 Python
js中Object.create实例用法详解
2021/10/05 Javascript
win10电脑双屏显示一个黑屏怎么办?win10电脑双屏显示一个黑屏解决方法
2022/07/15 数码科技