*{

    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. spring源码学习（一）

    由于本人水平有限,本文内容较为简单,仅供个人学习笔记,或者大家参考,如果能够帮助大家,荣幸之至!本文主要分析AnnotationConfigApplicationContext实例化之后,到底干了那些 ...

  2. SqlServer示例数据库Northwind（一）——实体关系

    在学习Spss统计分析.EA画实体关系图.PowerDesigner画数据库模型图等时,苦于找不到一个好的实例.由于实际工作中项目使用的表结构属于公司的商业保密内容,且在和大家交流时,其结构大家也不熟 ...

  3. java设计模式-----5、原型模式

    原型(Prototype)模式是一种对象创建型模式,他采取复制原型对象的方法来创建对象的实例.使用原型模式创建的实例,具有与原型一样的数据. 原型模式的特点: 1.由原型对象自身创建目标对象.也就是说 ...

  4. DBUtils结果集处理器介绍

    common-dbutils.jar是Apache组织提供的一个对JDBC进行简单封装的开源工具类库,使用它能够简化JDBC应用程序的开发,同时也不会影响程序的性能. 1.QueryRunner类 ① ...

  5. C#学习笔记-接口与抽象类

    namespace ClassLesson { class Program { static void Main(string[] args) { ); Console.WriteLine(perso ...

  6. BZOJ2568 [国家集训队2012]比特集合

    Description 比特集合是一种抽象数据类型(Abstract Data Type) ,其包含一个集合S,并支持如下几种操作: INS M : 将元素 M 插入到集合S中: DEL M : 将集 ...

  7. 用SumatraPdf实现PDF静默打印

    原文:https://yutuo.net/archives/24a22d50d6001564.html 之前做一系统,有一个打印PDF文件的需求,需求如下: 能指定打印机 能两面打印 最好能静默打印 ...

  8. 谁动了我的Mac ？？

    教大家一种方法,看看有没有人在自己对Mac睡眠后对其进行唤醒 一:应用程序里有个控制台,可以将这个打开,输入wake reason 二:在终端输入:syslog |grep -i "Wake ...

  9. Azure Linux 虚机上配置 RAID 的常见问题及解决方案

    简介 独立硬盘冗余阵列(RAID, Redundant Array of Independent Disks),简称磁盘阵列.能增强数据集成度,增强容错功能,增加处理量或容量.详情参见这篇文章. 配置 ...

  10. 【Leetcode】【Easy】Isomorphic Strings

    Given two strings s and t, determine if they are isomorphic. Two strings are isomorphic if the chara ...