<!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. 【动态规划】Vijos P1616 迎接仪式

    题目链接: https://vijos.org/p/1616 题目大意: 长度为N的字符串,只含‘j’和‘z’,可以将任意两个字符调换K次,求能够拥有的最多的'jz'串. 题目思路: [动态规划] 首 ...

  2. JEFF BANKS_百度百科

    JEFF BANKS_百度百科 JEFF BANKS

  3. Chapter 1. OpenGL基础回顾 - Review of OpenGL Basics

    译自<OpenGL® Shading Language, Second Edition> 本章主要回顾OpenGL应用编程接口,为后续章节中的材质铺垫基础.这并不是详尽的回顾.如果你已经 ...

  4. Android中为图标加上数字--用于未读短信数提醒，待更新应用数提醒等

    本文属于原创,转载请著名出处:http://flysnow.iteye.com/blog/906770 写道 在我们开发一些如短消息.应用商店等应用时,会考虑在短消息的图标上加上未读短信的数量,在应用 ...

  5. Quarts SimpleTrigger going to BLOCKED state after few repeat intervals--stackoverflow

    question: I am using SimpleTrigger to schedule a job which is supposed to run indefinitely (repeat c ...

  6. java中-静态代码块、构造代码块、构造方法的联系

    例如该题: 1 class Fu{ static { System.out.println("这是父类静态代码块"); } { System.out.println("这 ...

  7. CDOJ 92 Journey(LCA&RMQ)

    题目连接:http://acm.uestc.edu.cn/#/problem/show/92 题意:给定一棵树,最后给加一条边,给定Q次查询,每次查询加上最后一条边之后是否比不加这条边要近,如果近的话 ...

  8. 关于C#中get和set

    在看书的时候看见了一段代码,有两个类person: public class person { public string name; } public class person { public s ...

  9. 将从网上下载下来的javaweb项目继续配置

    1.将下载下来的项目,看有没有报错,这里推荐的是不变成web项目的方法,直接通过编译到服务器目录 2.报错的问题,一般是包,服务器的包,(tomcat-home)指向自己的bin目录 3.然后是添加s ...

  10. XlFileFormat

    -----转载:http://hi.baidu.com/liu_haitao/item/900ddb38979188c22f8ec26e 18 XlFileFormat.xlAddIn Microso ...