CSS3 animation实现简易幻灯片轮播特效 - 网站

CSS3 animation实现简易幻灯片轮播特效

分类：CSS_CSS3 答疑 - 常见问题 · 发布时间：2021-12-01 03:14 · 阅读：5459

这篇文章主要为大家详细介绍了CSS3 animation实现简易幻灯片轮播特效,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

CSS3有个别特性,可以触发硬件GPU来加速渲染,而不是调用默认浏览器引擎渲染;

但是很多属性,默认都是不开启硬件加速的;需要触发条件,一个最简单的触发条件就是使用3D属性(对Z轴的操作)

效果图

代码

XML/HTML Code复制内容到剪贴板
  1. >  
  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-600) ;   
  30.             }   
  31.             25% {   
  32.                 background-image: url(2.jpg-600) ;   
  33.   
  34.             }   
  35.             50% {   
  36.                 background-image: url(3.jpg-600) ;   
  37.   
  38.             }   
  39.             75% {   
  40.                 background-image: url(4.jpg-600);   
  41.   
  42.             }   
  43.             100% {   
  44.                 background-image: url(5.jpg-600);   
  45.   
  46.             }   
  47.         }   
  48. @keyframes slider {   
  49.             0% {   
  50.                 background-image: url(1.jpg-600) ;   
  51.   
  52.             }   
  53.             25% {   
  54.                 background-image: url(2.jpg-600) ;   
  55.   
  56.             }   
  57.             50% {   
  58.                 background-image: url(3.jpg-600) ;   
  59.   
  60.             }   
  61.             75% {   
  62.                 background-image: url(4.jpg-600);   
  63.   
  64.             }   
  65.             100% {   
  66.                 background-image: url(5.jpg-600);   
  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.   

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持html中文网。

标签：
CSS3 Animation 幻灯片 轮播

相关文章

css3媒体查询中device-width和width的区别详解

这篇文章主要介绍了css3媒体查询中device-width和width的区别详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

CSS3媒体查询实现不同宽度的下不同内容的展示功能

这篇文章主要介绍了CSS3媒体查询实现不同宽度的下不同内容的展示功能,本章节我们将为大家演示一些多媒体查询实例，需要的朋友可以参考下

CSS3几种实现子容器水平垂直居中的方法

本文有几种方法可以实现容器与子容器水平垂直居中，主要包括Flexbox布局，position绝对定位+transform，表格布局，具有一定的参考价值，感兴趣的可以了解一下

css3实现文字首尾衔接跑马灯的示例代码

这篇文章主要介绍了css3实现文字首尾衔接跑马灯的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

CSS的浮动及清除浮动的5种方法介绍

这篇文章主要为大家介绍了CSS的浮动及清除浮动的5种方法介绍，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
返回分类 返回首页