<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title>CSS3 Full Background Slider</title>

    <link rel="stylesheet" type="text/css" href="http://www.w3cplus.com/demo/css3/base.css" media="all" />

    <link href='http://fonts.googleapis.com/css?family=Yesteryear' rel='stylesheet' type='text/css'>

<style type="text/css">

html,body {

  height: %;

}

img.bg {

  min-height: %;

  min-width: 1024px;

  width: %;

  height: auto !important;

  height: %;

  position: fixed;

  left: ;

  z-index:;

}

.slider{

    position: absolute;

    bottom: 10px;

    text-align: center;

    width: %;

    z-index: ;

    font-size: .5em;

}

.slideLeft:target {

    -webkit-animation-name: slideLeft;

    -webkit-animation-duration: 1s;

    z-index: ;

}

@-webkit-keyframes 'slideLeft' {

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

    % { -webkit-transform: none; }

}

@-moz-keyframes 'slideLeft' {

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

    % { -moz-transform: none; }

}

@-ms-keyframes 'slideLeft' {

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

    % { -ms-transform: none; }

}

@-o-keyframes 'slideLeft' {

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

    % { -o-transform: none; }

}

@keyframes 'slideLeft' {

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

    % { transform: none; }

}

.slideBottom:target {

    z-index: ;

}

.zoomIn:target {

    z-index: ;

}

.zoomOut:target {

    z-index: ;

}

.rotate:target {

    z-index: ;

}

</style>

</head>

<body>

    <section class="demo">

        <div class="slider">

            <ul class="clearfix">

                <li><a href="#bg1">Hipster Fashion Haircut </a></li>

                <li><a href="#bg2">Cloud Computing Services &amp; Consulting</a></li>

                <li><a href="#bg3">My haire is sooo fantastic!</a></li>

                <li><a href="#bg4">Eat healthy &amp; excersice!</a></li>

                <li><a href="#bg5">Lips so kissable I could die ...</a></li>

            </ul>

        </div>

        <img src="bg1.jpg" alt="" class="bg slideLeft" id="bg1" />

        <img src="bg2.jpg" alt="" class="bg slideBottom" id="bg2" />

        <img src="bg3.jpg" alt="" class="bg zoomIn" id="bg3" />

        <img src="bg4.jpg" alt="" class="bg zoomOut" id="bg4" />

        <img src="bg5.jpg" alt="" class="bg rotate" id="bg5" />

    </section>

</body>

</html>

Css 描点的更多相关文章

  1. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. css之描点定位方式

    <!-- 描点定位的两张方式 --> <!-- 1.通过id定位 --> <!-- 2.通过name定位 只能用a--> <div> <a hre ...

  3. css学习（2）-- 常见的CSS属性和值

    1.CSS中修饰字体的属性 属    性 描    述 属  性  值 font-family 字体族科 任意字体族科名称都可以使用例如Times.serif等,而且多个族科的赋值是可以使用的,中间用 ...

  4. PHP.9-HTML+CSS（三）-CSS样式

    CSS样式 CSS是Cascading Style Sheets的简写,它除了可以轻松设置网页元素的显示位置和格式处,甚至还能产生滤镜,图像淡化,网页淡入淡出的渐变效果.CSS就是要对网页的显示效果实 ...

  5. PHP.4-DIV+CSS标准网页布局准备工作（下）

    DIV+CSS标准网页布局准备工作 区块属性(区块模型) 属 性 描 述 Margin(注) 是定义区块外边界与上级元素距离的属性,用1到4个值来设置元素的边界,每个值都是长度.百分比或者auto,百 ...

  6. PHP.3-DIV+CSS标准网页布局准备工作（上）

    DIV+CSS标准网页布局准备工作(上) 概述 使用"DIV+CSS"对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.因为现在的网站设计标 ...

  7. 幻灯片の纯CSS，NO JavaScript

    之前就遇到有人问,不用js,纯css实现幻灯片. 那么对于使用纯的css + html 怎样来实现幻灯片呢?下面有几种方法可供参考,有些还不成熟. 方案一:利用css3的animation 例子传送门 ...

  8. css Tab选项卡

    css tab 选项卡据说有2中实现方式 1. target css3 2. 描点 2的 核心原理是利用描点显示问题(描点父级 overflow). <style> body,div,ul ...

  9. Javaweb 第1天 HTML和CSS课程

    HTML和CSS课程 今日大纲 ● 了解Java    Web开发 ● HTML常用标签 ● CSS的使用 ********************************************** ...

随机推荐

  1. delphi笔记之nativeXml 转

    delphi笔记之nativeXml   使用 CreateName 建立可直接指定根节点的名称 var XmlDoc: TnativeXml; Node:TxmlNode; Begin XmlDoc ...

  2. UNIX环境下的共享内存

    好久没更新博客了,最近几个月一直在忙项目,现在终于有时间进一步学习了.这次记录的是unix环境中共享内存的使用方法.  在我理解,共享内存就是在内存中开辟一段空间,各个毫不相干的进程就可以通过访问这段 ...

  3. Cstyle的UEFI导读之SEC第一篇 Reset Vector

        最近小看了一下SEC部分的code,现在来做个总结.所谓SEC就是CPU刚刚完成硬件初始化的是时候执行的和CPU体系架构息息相关的代码.主要是为后续CPU以及Chipset初始化代码所需的必备 ...

  4. Hibernate学习笔记(一)：级联删除

    一对多的关系映射 在一的一方配置文件中将会配置set节点信息: *.hbm.xml配置文件中set节点的属性: Lazy:默认是true 即使用延迟加载,false表示即时加载: Order-by:一 ...

  5. MYSQL用户权限管理学习笔记

    MYSQL 用户管理 1.权限表 MYSQL是一个多用户的数据库,MYSQL的用户可以分为两大类: (1)       超级管理员用户(root),拥有全部权限 (2)       普通用户,由roo ...

  6. FreeRTOS学习笔记——任务间使用队列同步数据

    1.前言 在嵌入式操作系统中队列是任务间数据交换的常用手段,队列是生产者消费者模型的重要组成部分.FreeRTOS的队列简单易用,下面结合一个具体例子说明FreeRTOS中的队列如何使用. 2.参考代 ...

  7. 老鸟的Python新手教程

    重要说明 这不是给编程新手准备的教程,假设您入行编程不久,或者还没有使用过1到2门编程语言,请移步!这是有一定编程经验的人准备的.最好是熟知Java或C,懂得命令行,Shell等.总之,这是面向老鸟的 ...

  8. 计数dp-hdu-4054-Number String

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4055 题目大意: 给一个只含‘I','D','?'三种字符的字符串,I表示当前数字大于前面的数字,D ...

  9. SCI科技论文写作技巧-核心价值

    第一次写SCI论文写作技巧,本身不是大牛,也许没有资金格谈论这个. 这里仅仅是一些个人思考,不正确,好还是不好.而当另一种理论. 对于工程专业的学生,谁往往应用,书写SCI事情.当然,也不是没可能.全 ...

  10. Android（java）学习笔记234： 服务（service）之音乐播放器

    1.我们播放音乐,希望在后台长期运行,不希望因为内存不足等等原因,从而导致被gc回收,音乐播放终止,所以我们这里使用服务Service创建一个音乐播放器. 2.创建一个音乐播放器项目(使用服务) (1 ...