*{

    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. LeetCode刷题第一天

    1 . 两数之和 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用 ...

  2. Java基础——String

    前言 从去年八月末开始工作一年了,有了大半年的java开发经验,自认为比在大学时期编码能力强了很多,但是基础方面概念模糊的地方感觉越来越多了 (:´д｀)ゞ 所以,我准备把这些问题以及工作中遇到的问题 ...

  3. 进度监视器--ProgressMonitorInputStream

    进度监视器--ProgressMonitorInputStream ProgressMonitorInputStream 可以创建一个进度监视器,以监视读取输入流的进度.如果需要一段时间,将会弹出 P ...

  4. sublime 在Mac终端下设置快捷打开方式

    vi ~/.zshrc alias subl='open -a "Sublime Text"' source ~/.zshrc 打开 ~/.zshrc,然后写入第二行,然后执行第三 ...

  5. python学习之老男孩python全栈第九期_day023知识点总结——类和对象命名空间、组合

    一. 类和对象命名空间类里 可以定义两种属性: 1. 静态属性 2. 动态属性 class Course: language = 'Chinese' def __init__(self, teache ...

  6. HEOI2017 游记

    你若安好,便是晴天. …… 人就像命运下的蝼蚁,谁也无法操控自己的人生. ——阮行止 …… Day 0 中午就要出发了,上午教练还搞了一场欢乐信心赛,然而还是挂惨了.T3是bzoj的原题,但是当时写的 ...

  7. Spring Data MongoDB 级联操作

    DBRef 方式关联 DBRef 就是在两个Collection之间定义的一个关联关系,暂不支持级联的保存功能 例子:一个Person对象有多个Book对象,一对多关系 实体Person public ...

  8. FineReport和泛微OA(Ecology)的单点登录集成方案

    最近出现了很多关于帆软报表和泛微OA的集成问题,均出现在“单点登录”上.直接也有相关的文章介绍一些FineReport和泛微集成的背景.价值等,以及FineReport和OA的深度集成的方案,但是并没 ...

  9. GetModuleFileName和获取应用程序当前目录

    原文:http://www.cnblogs.com/xuemaxiongfeng/articles/2465544.html API函数GetModuleFileName():获得应用程序目录相对路径 ...

  10. Android 解决NestedScrollView 嵌套 RecyclerView出现的卡顿，上拉刷新无效

    解决卡顿的方法最简单的就是设置RecyclerView的android:nestedScrollingEnabled="false",放弃自己的滑动,交给外部的NestedScro ...