首页
所有分类
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 相关文章推荐
css实例教程 一款纯css3实现的超炫动画背画特效
Nov 05 HTML / CSS
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
Apr 26 HTML / CSS
CSS3近阶段篇之酷炫的3D旋转透视
Apr 28 HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
Jul 19 HTML / CSS
CSS3实现缺角矩形，折角矩形以及缺角边框
Dec 20 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
Jan 05 HTML / CSS
html5的新增的标签和废除的标签简要概述
Feb 20 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
Mar 15 HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
Sep 19 HTML / CSS
移动端Html5中百度地图的点击事件
Jan 31 HTML / CSS
H5最强接口之canvas实现动态图形功能
May 31 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 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
法国购物网站(144) 俄罗斯购物网站(137) 台湾购物网站(77) 印度购物网站(45) 印尼购物网站(37) 德国购物网站(227) 埃及购物网站(2) 马来西亚购物网站(41) 墨西哥购物网站(16) 日本购物网站(72)
You might like
PHP生成静态页面详解
2006/11/19 PHP
php 无限级数据JSON格式及JS解析
2010/07/17 PHP
PHP fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
php中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
php解析base64数据生成图片的方法
2016/12/06 PHP
PHP实现简易图形计算器
2020/08/28 PHP
禁止F5等快捷键的JS代码
2007/03/06 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
javascript实现五星评分功能
2015/11/10 Javascript
JavaScript事件详细讲解
2016/06/27 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
2016/09/01 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
2016/09/25 Javascript
Ajax 加载数据 练习代码
2017/01/05 Javascript
JS中关于正则的巧妙操作
2017/08/31 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
2017/09/26 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
关于TypeScript模块导入的那些事
2018/06/12 Javascript
vue结合axios与后端进行ajax交互的方法
2018/07/06 Javascript
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
python list中append()与extend()用法分享
2013/03/24 Python
Python实现图片拼接的代码
2018/07/02 Python
深入理解Django自定义信号（signals)
2018/10/15 Python
python实现栅栏加解密 支持密钥加密
2019/03/20 Python
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
Speedo速比涛中国官方网站：全球领先泳装运动品牌
2018/04/24 全球购物
Made in Design英国：设计家具、照明、家庭装饰和花园家具
2019/09/24 全球购物
应届大学生求职信
2014/07/20 职场文书
网络工程专业大学生求职信
2014/10/01 职场文书
委托公证书格式
2015/01/26 职场文书
导游词之苏州阳澄湖
2019/11/15 职场文书