利用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