*{

    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. linux的目录结构及文件基本操作

    1. linux的文件组织目录结构 linux的目录与window的区别 win以存储介质为主,主要以盘符及分区实现文件 管理,再下面才是目录. linux以树形目录结构的形式来构造整个系统,每一个目 ...

  2. golang 的 sync.WaitGroup

    WaitGroup的用途:它能够一直等到所有的goroutine执行完成,并且阻塞主线程的执行,直到所有的goroutine执行完成. 官方对它的说明如下: A WaitGroup waits for ...

  3. Qless 相关知识

    Qless是一个基于redis的分布式任务架构.相关代码在 https://github.com/seomoz/qless 它是完全有lua实现的,依靠 redis 对lua的支持,http://ww ...

  4. 解决docker启动错误 error creating overlay mount to /var/lib/docker/overlay2

    原文 最近在centos7.1使用docker运行redis镜像,出现下面的错误: /usr/bin/docker-current: Error response from daemon: error ...

  5. Web运行控制台输出乱码解决总结

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. jsp页面乱码

  7. html基础概念

    一.HyperText Markup Language   内容,html是弱代码语言,代码编写不严谨 1.超链接  <a href="#">超级链接(anchor)& ...

  8. C# 按部门拆分excel文件

    按照所属部门不同将excel文件拆分成多个文件 string excel_path = @"G:\zhyue\backup\2018-08-01 读取腾讯邮箱接口-获取一个月内未接收到外部邮 ...

  9. Java设计模式—命令模式

    命令模式是一个高内聚的模式. 定义如下:将一个请求封装成一个对象,从而让你使用不同的请求把客户端参数化,对请求排队或者记录请求日志,可以提供命令的撤销和恢复功能. 通用类图如下: 角色说明: ● Re ...

  10. 如何让转换的视频支持HTML5在线播放

    转换工具当然是ffmpeg了,那么如何让转换后的视频支持所有支持HTML5的浏览器在线播放?只需要如下命令行代码就行了: ffmpeg -i output.mpg -vcodec libx264 -a ...