<!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. MFC 显示CImg图片

    很多示例关于CImg都是基于控制台的,如何把它用于MFC中显示. Problem:直接按照控制台示例写入MFC程序中,当程序执行完display后,其后面的代码便不再执行. solution:开辟新的 ...

  2. AbpZero--4.不使用谷歌字体，提升加载速度

    jtable控件样式中会使用到谷歌字体,每次访问都特别慢 1.打开jtable.css文件 [..\MyCompanyName.AbpZeroTemplate.Web\libs\jquery-jtab ...

  3. linux —— 学习笔记（汇总）

    笔记目录:一.系统知识 和 基本概念                    二.常用操作                   三.系统管理(内存.设备.服务等管理)                   ...

  4. 005_MyEclipse编码设置

    方法一: 1.打开MyEclipse,windows---->Preferences打开"首选项"对话框. 2.左侧导航,导航中找到general---->Worksp ...

  5. Android RelativeLayout 布局android:layout_centerHorizontal="true"注意

    特别注意,如果要是 android:layout_alignTop="@id/bind_decode_item_layout" android:layout_centerHoriz ...

  6. android面试题及答案

    JAVA 1.GC是什么? 为什么要有GC? GC是垃圾收集的意思(Gabage Collection),内存处理是编程人员容易出现问题的地方,忘记或者错误的内存回收会导致程序或系统的不稳定甚至崩溃, ...

  7. 基于redis 内存数据库简单使用

    在ecplise中使用内存数据的客端户,前提要准备要下载两个jar包 commons-pool2-2.0.jar jedis-2.4.2.jar 前提准备做好了,那我们就开启redis的服务,打开一个 ...

  8. 再回首，Java温故知新（八）：Java基础之字符串

    字符串是Java中使用频率最高的类,但是它却不属于基本类型,而是预定义了String类来表示.从String类的源码可以看到,String是基于char[]实现的,而且Java中的String是不可变 ...

  9. Java 类的热替换---转载

    构建基于 Java 的在线升级系统 Java ClassLoader 技术剖析 在本文中,我们将不对 Java ClassLoader 的细节进行过于详细的讲解,而是关注于和构建在线升级系统相关的基础 ...

  10. Google开发规范

    v0.2 - Last updated November 8, 2013 源自 Google's C++ coding style rev. 3.274 目录 由 DocToc生成     头文件   ...