CSS3: animation实现简易幻灯片效果(轮播)

最新推荐文章于 2024-07-12 18:27:51 发布

crper

最新推荐文章于 2024-07-12 18:27:51 发布

阅读量1.6w

点赞数 1

分类专栏：笔记-HTML4&amp;5/CSS2.1&amp;3 CSS3及HTML5折腾记文章标签： css3 动画硬件加速浏览器硬件

本文链接：https://blog.csdn.net/crper/article/details/51384145

版权

笔记-HTML4&5/CSS2.1&3 同时被 2 个专栏收录

29 篇文章 1 订阅

订阅专栏

CSS3及HTML5折腾记

23 篇文章 25 订阅

订阅专栏

前言

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

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

效果图

这里写图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>CSS3幻灯片</title>
	<style type="text/css" media="screen">
		.items {
		    width: 280px;
		    height: 150px;
		    border: 1px solid #ddd;
				box-sizing: border-box;
				border-radius:10px;
				background-size: cover;
		    -webkit-transform: translateZ(0);
		    transform: translateZ(0);
				background-repeat: no-repeat;
		    -webkit-animation: slider 15s linear infinite alternate;
		    animation: slider 15s linear infinite alternate;
		    -webkit-transform-origin: center center;
		            transform-origin: center center;

		}



		@-webkit-keyframes slider {
		    0% {
		        background-image: url(1.jpg) ;
		    }
		    25% {
		        background-image: url(2.jpg) ;

		    }
		    50% {
		        background-image: url(3.jpg) ;

		    }
		    75% {
		        background-image: url(4.jpg);

		    }
		    100% {
		        background-image: url(5.jpg);

		    }
		}
@keyframes slider {
		    0% {
		        background-image: url(1.jpg) ;

		    }
		    25% {
		        background-image: url(2.jpg) ;

		    }
		    50% {
		        background-image: url(3.jpg) ;

		    }
		    75% {
		        background-image: url(4.jpg);

		    }
		    100% {
		        background-image: url(5.jpg);

		    }
		}


	</style>
</head>

<body>
	<div class="slider">
		<div class="items"></div>
	</div>
</body>

</html>