仅仅CSS就实现了轮播图----利用关键帧动画实现轮播图效果

最新推荐文章于 2022-05-08 16:33:52 发布

原创

最新推荐文章于 2022-05-08 16:33:52 发布 · 779 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #动画 #css3

本文介绍了如何使用CSS关键帧动画来创建轮播图效果。通过设置CSS动画和@keyframes，结合浮动布局和overflow:hidden，可以在不依赖JavaScript的情况下实现图片轮播。示例代码展示了具体实现过程，最终呈现了轮播图效果。

利用CSS关键帧实现轮播图效果动画

最近梳理css的动画效果的时候，想到了原来学css的时候，有个好玩的轮播图效果，当时用的js写好的轮子，然后网上到处找，这次换自己来写一个css简单的轮播吧，给才接触的童鞋参考一下。

关键css技术：css的animation动画属性，@keyframes 关键帧

简单思路就是：
两个div，一个父div，一个子div，父div作为展示窗口，子div作为图片容器存放图片，设置浮动使得子div中图片依次在容器中横向排列，父div的宽高设置和图片一致，然后overflow:hidden把超出部分隐藏，用animation设置和@keyframes配置依据实际情况下调整就可以了。

这里不多废话了，直接上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css关键帧实现简单轮播图动画</title>
		<style type="text/css">
		*{
   
   
			margin: 0;
			padding: 0;