<!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. Jenkins 二：邮件配置

    默认邮件的配置 假设管理员邮箱是 user1@domain1.com,密码是pw1. 1. 打开“系统管理”-> “系统设置”. 2. 找到“Jenkins Location”-> “系统 ...

  2. N - Tram - poj1847（简单最短路）

    题意:火车从一点开到另一点,轨道上有很多岔路口,每个路口都有好几个方向(火车能够选任意一个方向开),但是 默认的是 第一个指向的方向,所以如果要选择别的方向的话得 进行一次切换操作 ,给定一个起点一个 ...

  3. 低版本Xcode 出现could not find developer disk image问题

    解决Xcode在ipad/iphone9.2系统真机测试时出现could not find developer disk image问题,只要拷贝这个文件(链接: http://pan.baidu.c ...

  4. ISAP 简介

    刘汝佳的蓝书上已经给出了大部分,先给上完整代码(以草地排水为例). #include<iostream> #include<algorithm> #include<cst ...

  5. string和stringbuffer stringbuilder的快速理解。

    这三个对象都可操作字符串,区别string定义的变量除非重新赋值,否则是不可改变的.调用string的方法不会改变,但是其他两个有对象的方法可改变,比如apend的方法,后两个区别一个是线程安全不安全 ...

  6. JS 操作 HTML 自定义属性

    <input type="text" id="txtBox" displayName="123456" /> 获取自定义属性值: ...

  7. cocos2dx c++ 在mac下写的中文凝视，在win32下编译时不通过

    今天遇到个奇怪的问题,在mac下写的程序,加的中文凝视,编译没有问题,可是在win32下(使用的时vs2012, win7 64bit 系统)编译就总是报错 最后在中文凝视后 加一个空格,或者 换行, ...

  8. [转] Epoll 相对Poll和Select的优点

    http://blog.csdn.net/summerhust/article/details/18260117 PS: 相对select来说,Poll的监听列表比select更短,并且Poll的监听 ...

  9. [转] boost.circular_buffer简介

    http://www.cnblogs.com/TianFang/archive/2013/02/05/2892503.html 很多时候,我们需要在内存中记录最近一段时间的数据,如操作记录等.由于这部 ...

  10. Android Camera开发:使用GLSurfaceView预览Camera 基础拍照

    GLSurfaceView是OpenGL中的一个类,也是可以预览Camera的,而且在预览Camera上有其独到之处.独到之处在哪?当使用Surfaceview无能为力.痛不欲生时就只有使用GLSur ...