<!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. 修改MySQL的递增的起始值

    在mysql中,有时候需要把递增的值初始化为1(你也可以修改成其它起始值): alter table table_name auto_increment=; 不要设置为0......

  2. UNITY3D ShadeSH9

    UNITY3D ShadeSH9 属于Irradiance environment maps 方法,可以参考DX SDK PRTDemo,里面是几乎相同的实现,总之就是解光传输的积分方程 目前主流辐射 ...

  3. QT5.7.0在win10下使用visual studio 2015编译（目标平台 xp）

    环境:win10+vs2015+QT5.7.0 目标:编译出能在windows xp上运行的QT 通过baidu和bing找出来的结果没有一个能成功运行,大部分都能编译成功,并完美解决“exe不是有效 ...

  4. 在Ubuntu中安装Redis

    原文地址:http://blog.fens.me/linux-redis-install/ 在Ubuntu中安装Redis R利剑NoSQL系列文章,主要介绍通过R语言连接使用nosql数据库.涉及的 ...

  5. Reward（拓扑排序）

    http://acm.hdu.edu.cn/showproblem.php?pid=2647 题意: 老板要给n个员工发工资最低工资是888: 但是工人们是有要求的 如果输入 a b 表示a的工资要比 ...

  6. 《算法问题实战策略》-chaper21-树的实现和遍历

    这一章节开始介绍一个数据结构中的一个基本概念——树. 我们从数据结构的解读来解释树结构的重要性,现实世界的数据除了最基本的线性结构(我们常用队列.数组和链表等结构表征),还有一个重要的特性——层级结构 ...

  7. selenium webdriver启动Chrome浏览器后无法输入网址的解决办法

    通过selenium webdriver启动Chrome浏览器,脚本如下: from selenium import webdriver browser = webdriver.Chrome() br ...

  8. [置顶] C语言单元测试框架

    unitest.h /****************************************************************************** * * * This ...

  9. 设置IIS7文件上传的最大大小 maxAllowedContentLength，maxRequestLength

    当上传一个超过30M的文件时,服务器会重定向至404.13页面,报错如下: HTTP Error 404.13 - Not Found The request filtering module is ...

  10. evernote出现"Invalid username and/or password"的情况

    evernote出现"Invalid username and/or password"的情况 evernote挺好用的,可是这几年用下来也遇到过狗血情况,几乎每次都是更新后出状况 ...