*{

    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. java类加载机制及方法调用

    类加载机制 概述 类从被加载到虚拟机内存中开始,到卸载出内存为止,它的整个生命周期包括:加载(Loading).验证(Verification).准备(Preparation).解析(Resoluti ...

  2. IDEA使用maven建web项目示例

    运行环境:OSX-10.13.3. IDEA-2017.3.3. maven-3.5.2 步骤1:选择maven-webapp模板新建web项目 步骤2:设置项目GroupId等 需从网上下载相关构件 ...

  3. python学习之老男孩python全栈第九期_day025知识点总结——接口类、抽象类、多态、封装

    一. 接口类 java:面向对象编程 设计模式 -- 接口类 接口类:python原生不支持 抽象类:python 原生支持的 from abc import abstractclassmethod, ...

  4. process对象

    一.目录 process对象是Node的一个全局对象,提供当前Node进程的信息.它可以在脚本的任意位置使用,不必通过require命令加载.该对象部署了EventEmitter接口. 二.属性 pr ...

  5. 停课+2week

    可真是,累啊. 本以为停课之后会轻松一点,结果天天好累的说... 今天开始得去锻炼锻炼了... 已经好几次突然一阵晕眩了qwq... 希望我还能挺得住吧,至少要挺到WC结束啊... 这次,可是关系到我 ...

  6. HTML5之新增的元素和废除的元素 （声明：内容节选自《HTML 5从入门到精通》）

    新增结构元素: section元素 section元素定义文档或应用程序中的一个区段,比如章节.页眉.页脚或文档中的其他部分.它可以与h1,h2,h3,h4,h5,h6元素结合起来使用,标示文档结构. ...

  7. 利用PHP QR Code生成二维码（带logo）

    转自:http://www.cnblogs.com/txw1958/p/phpqrcode.html HP QR Code是一个PHP二维码生成类库,利用它可以轻松生成二维码,官网提供了下载和多个演示 ...

  8. Node服务端极速搭建 －－ nvmhome

    > 本文意在让你掌握极速搭建Node服务端(任何Project) ```$ whoaminame: kelvinemail: kelvv@outlook.comhomepage: www.kel ...

  9. seacms 6.45 命令执行漏洞分析

    前言 这是一个比较老的漏洞了,不过漏洞原理还是挺有意思的. 正文 漏洞位于 search.php 文件中. 首先包含了 common.php, 这个文件里面做了一些初始化工作,其中最重要的是对提交参数 ...

  10. MySQL两个表联合查询并按时间排序

    有一张资金记录表,一张金币记录表,想以时间为单位,降序合并排列他们之间的信息,查询SQL如下: select * from (select * from t_money_logs union sele ...