*{

    margin:;

    padding:;

}

div{

    margin: auto;

    width: 800px;

    height: 681px;

    position: relative;

    overflow: hidden;

}

div>img{

    width: 100%;

    height: auto;

    position: absolute;

    z-index:;

    left: -100%;

    animation: out 1s;

}

ul{

    position: absolute;

    top:560px;

    margin: 0 60px;

    z-index:;

}

li{

    list-style: none;

    float: left;

    margin-right: 20px;

}

li:last-child{

    margin:;

}

li a{

    display: inline-block;

    background-color: #000;

    width: 120px;

    height: 102px;

}

li a img{

    opacity: 0.8;

    width: 100%;

    height:auto;

}

li a img:hover{

    opacity:;

}

div img:target{

    left:;

    z-index:;

}

@keyframes sport1{

    0%{left: 500px;}

    100%{left:;}

}

@keyframes sport2{

    0%{top:350px}

    100%{top:;}

}

@keyframes sport3{

    0%{transform: scale(0.1,0.1);}

    100%{transform: scale(1,1);}

}

@keyframes sport4{

    0%{transform: scale(2,2);}

    100%{transform: scale(1,1);}

}

@keyframes sport5{

    0%{transform: scale(0.1,0.1) rotate(-360deg);}

    100%{transform: scale(1,1) rotate(0deg);}

}

@keyframes out{

    0%{left:;}

    100%{left:;}

}

#img1:target{

    animation: sport1 0.5s;

    animation-timing-function:ease-out;

}

#img2:target{

    animation: sport2 0.5s;

    animation-timing-function:ease-out;

}

#img3:target{

    animation: sport3 1s;

    animation-timing-function:ease-in;

}

#img4:target{

    animation: sport4 1s;

    animation-timing-function:ease-out;

}

#img5:target{

    animation: sport5 0.7s;

    animation-timing-function:ease-in-out;

}
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>CSS animation 制作一个 Slider</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

<div>

    <img src="600x600bb.jpg" alt="img1" id="img1">

    <img src="600x600bb (2).jpg" alt="img2" id="img2">

    <img src="600x600bb (5).jpg" alt="img3" id="img3">

    <img src="600x600bb (7).jpg" alt="img4" id="img4">

    <img src="600x600bb (8).jpg" alt="img5" id="img5">

    <ul>

        <li><a href="#img1"><img src="600x600bb.jpg" alt="img1"></a></li>

        <li><a href="#img2"><img src="600x600bb (2).jpg" alt="img2"></a></li>

        <li><a href="#img3"><img src="600x600bb (5).jpg" alt="img3"></a></li>

        <li><a href="#img4"><img src="600x600bb (7).jpg" alt="img4"></a></li>

        <li><a href="#img5"><img src="600x600bb (8).jpg" alt="img5"></a></li>

    </ul>

</div>

</body>

</html>

①relative不脱离原文档流，这是和absolute最大的区别

②

浅谈CSS3中display属性的Flex布局

三里屯柯南

https://www.cnblogs.com/xuyuntao/articles/6391728.html

③z-index和display

④CSS3 :target 选择器

定义和用法

URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。

:target 选择器可用于选取当前活动的目标元素。

⑤用:hover等伪类改变样式类似于添加样式

⑥animation-fill-mode：forwards

⑦animation 100%{left:0}无过程  100%{transform:rotate(-360deg)}有过程？？？

⑧overflow:hidden;

No.6 - 利用 CSS animation 制作一个炫酷的 Slider的更多相关文章

  1. 百度前端技术学院2018笔记 之 利用 CSS animation 制作一个炫酷的 Slider

    前言 题目地址 利用 CSS animation 制作一个炫酷的 Slider 思路整理 首先页面包含三种东西 一个是type为radio的input其实就是单选框 二是每个单选框对应的label 三 ...

  2. 2019基于Hexo快速搭建个人博客，打造一个炫酷博客(1)-奥怪的小栈

    本文转载于:奥怪的小栈 这篇文章告诉你如何在2019快速上手搭建一个像我一样的博客:基于HEXO+Github搭建.并完成SEO优化,打造一个炫酷博客. 本站基于HEXO+Github搭建.所以你需要 ...

  3. 一个炫酷的Actionbar效果

    今天在网上看到一个炫酷的Actionbar效果,一个老外做的DEMO,目前很多流行的app已经加入了这个效果. 当用户初始进入该界面的时候,为一个透明的 ActiionBar ,这样利用充分的空间显示 ...

  4. Android一个炫酷的树状图组织架构图开源控件实现过程

    Android一个炫酷的树状图组织架构图开源控件 文章目录 [1 简介] [2 效果展示] [3 使用步骤] [4 实现基本布局流程] [5 实现自由放缩及拖动] [6 实现添加删除及节点动画] [7 ...

  5. 学习animate.css包含了一组炫酷、有趣、跨浏览器的动画

    1.animate.css包含了一组炫酷.有趣.跨浏览器的动画,可以在你的项目中直接使用. 第一步:引入animate.css样式文件或者引入某些平台的CDN文件: <head> < ...

  6. 一个炫酷的flash网站模板

    这是一个炫酷的flash欧美网站模板,它包括首页,公司简介,留言等五个页面,界面转换非常的炫酷!他还有时间.全屏.背景音乐开关的功能!有兴趣的朋友可以看看!贴几张网站图片给大家看看! 下载后直接找到s ...

  7. 教你用canvas打造一个炫酷的碎片切图效果

    前言 今天分享一个炫酷的碎片式切图效果,这个其实在自己的之前的博客上有实现过,本人觉得这个效果还是挺炫酷的,这次还是用我们的canvas来实现,代码量不多,但有些地方还是需要花点时间去理解的,需要点数 ...

  8. 利用 CSS animation 和 CSS sprite 制作动画

    CSS3 大大强化了制作动画的能力,但是如果要做出图案比较复杂的动画,选择 GIF 依然是一个不错的选择.今天给大家介绍一个使用 CSS animation 配合雪碧图(CSS sprite)来制作动 ...

  9. 如何利用GitHub设计一个炫酷的个人网站（含代码）

    1.在开始制作之前我们先预览一下我的网站吧! 1.方式一: 由于是手机版的所以用手机访问下面的链接体验比较好一点: https://tom-shushu.github.io/MyWeb.github. ...

随机推荐

  1. C#操作xml文件:使用XmlDocument 实现读取和写入

    XML文件是一种常用的文件格式,例如WinForm里面的app.config以及Web程序中的web.config文件,还有许多重要的场所都有它的身影.Xml是Internet环境中跨平台的,依赖于内 ...

  2. SpringBoot之整合Redis

    一.SpringBoot整合单机版Redis 1.在pom.xml文件中加入redis的依赖 <dependency> <groupId>org.springframework ...

  3. win下环境变量的设置

    Windows 和 linux 区别 一.查看所有环境变量的名称和值: Linux下:export Windows下:set 二.根据名称查该环境变量的值: Linux下:echo $环境变量名 比如 ...

  4. Mac下使用sublime Text打开隐藏目录

    我们用 sublime Text 打开时,默认是看到非隐藏的目录和文件,如下图: 这时候在这个节目,按下 command +shift + 句号 快捷键,会自动切换 隐藏状态的, 这时候就可以切换成下 ...

  5. RDCMan之DPI 和 Screen Resolution设置

    Customer要求在以下环境验证几个bug DPI setting Minimum   resolution 96 / 100% 1024x768 120 /125% 1280x960 144 / ...

  6. "Error: ANDROID_HOME is not set and "android" command not in your PATH. You must fulfill at least one of these conditions.".

    设置环境变量 set ANDROID_HOME=C:\\android-sdk-windows set PATH=%PATH%;%ANDROID_HOME%\tools;%ANDROID_HOME%\ ...

  7. Java线程的周期及五种状态

    线程的生命周期及五种基本状态 关于Java中线程的生命周期,首先看一下下面这张较为经典的图: 上图中基本上囊括了Java中多线程各重要知识点.掌握了上图中的各知识点,Java中的多线程也就基本上掌握了 ...

  8. css中小知识点总结

    rgba:即rgb+a, a为图片透明度,a范围是0~1,越小就表示越透明 :hover 即鼠标悬停时改变样式,不仅仅能用在a元素上. <form>标签表示向浏览器提交表单,一般会包裹着输 ...

  9. Hello,world的几种写法！

    这是我的第一篇文章!开个玩笑~~“你知道回字的四种写法吗”? printf("Hello,world!"); cout<<"Hello,world!" ...

  10. Maximum Depth of Binary Tree 二叉树的深度

    Given a binary tree,find its maximum depth. The maximum depth is the number of nodes along the longe ...