zoukankan      html  css  js  c++  java
  • css3实现切片动画

    <!DOCTYPE html>
    <html>

    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纯CSS3实现图文切换特效 - 何问起</title>
    <base target="_blank" />
    <link rel="stylesheet" href="http://hovertree.com/texiao/css3/39/themes/csslider.default.css" />
    <style>
    * {
    margin: 0;
    padding: 0;
    }

    ::-webkit-scrollbar {
    2px;
    background: rgba(255, 255, 255, 0.1);
    }

    ::-webkit-scrollbar-track {
    background: none;
    }

    ::-webkit-scrollbar-thumb {
    background: rgba(74, 168, 0, 0.6);
    }

    ul,
    ol {
    padding-left: 40px;
    }

    html,
    body {
    height: 100%;
    text-align: center;
    font: 400 100% 'Raleway', 'Lato';
    background-color: #282828;
    color: #CCC;
    }

    h1 {
    font-weight: 700;
    font-size: 310%;
    }

    h2 {
    font-weight: 400;
    font-size: 120%;
    color: #71AD37;
    }

    #hewenqislider {
    margin: 20px;
    font-family: 'Lato';
    }

    #hewenqislider> ul> li:nth-of-type(3) {
    background: url(http://hovertree.com/texiao/css3/39/themes/fruit.jpg);
    }

    #hewenqislider> input:nth-of-type(3):checked~ ul #hovertreebg {
    80%;
    padding: 22px;
    -moz-transition: .5s .5s;
    -o-transition: .5s .5s;
    -webkit-transition: .5s .5s;
    transition: .5s .5s;
    }

    #hewenqislider> input:nth-of-type(3):checked~ ul #hovertreebg div {
    -moz-transform: translate(0);
    -ms-transform: translate(0);
    -o-transform: translate(0);
    -webkit-transform: translate(0);
    transform: translate(0);
    -moz-transition: .5s .9s;
    -o-transition: .5s .9s;
    -webkit-transition: .5s .9s;
    transition: .5s .9s;
    }

    #hovertreebg {
    color: #000;
    padding: 22px 0;
    position: absolute;
    left: 0;
    top: 16%;
    height: 20%;
    0;
    z-index: 10;
    overflow: hidden;
    }

    #hovertreebg:before {
    content: '';
    position: absolute;
    left: -1px;
    top: 1px;
    height: 100%;
    100%;
    z-index: -1;
    background: url(http://hovertree.com/texiao/css3/39/themes/fruit.jpg) 1px 23%;
    -webkit-filter: blur(7px);
    }

    #hovertreebg:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    100%;
    z-index: 20;
    background: rgba(0, 0, 0, 0.35);
    pointer-events: none;
    }

    #hovertreebg div {
    -moz-transform: translate(120%);
    -ms-transform: translate(120%);
    -o-transform: translate(120%);
    -webkit-transform: translate(120%);
    transform: translate(120%);
    }

    .scrollable p {
    padding: 30px;
    text-align: justify;
    line-height: 140%;
    font-size: 120%;
    }

    #hewenqislider a {
    color: greenyellow
    }

    .csslider>ul {
    500px;
    /*在这里改变宽度 何问起*/
    }
    </style>
    </head>

    <body>

    <div style="padding: 1em 0;">
    <div id="hewenqislider" class="csslider">
    <input type="radio" name="slides" id="slides_1" />
    <input type="radio" name="slides" id="slides_2" />
    <input type="radio" name="slides" id="slides_3" checked />
    <input type="radio" name="slides" id="slides_4" />
    <ul>
    <li>
    <h1>欢迎光临何问起</h1>
    <p>CSSlider is lightweight & easy to use slider. No JS - pure CSS.
    <br />这是一个使用纯CSS3实现的图文切换效果,没使用js脚本。点击左右箭头或者索圆点引按钮可以切换内容。
    <br /> by
    <a href="http://hovertree.com">何问起</a>
    <a href="http://hovertree.com/h/bjaf/3ciuqvoq.htm">说明</a>
    </p>
    </li>
    <li>
    <a href="http://hovertree.com/texiao/"><img src="http://hovertree.com/texiao/css3/39/themes/stones.jpg" /></a>
    </li>
    <li>
    <div id="hovertreebg">
    <div>
    <h1>CSS Events</h1>
    <p>When slide 3 is reached - play CSS animation! 纯CSS3的图文切换 hovertree.com </p>
    </div>
    </div>
    </li>
    <li class="scrollable">
    <h1>Lots of text</h1>
    <h2>Scrollable one</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada mi, semper id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus. 还可以有长文本,会显示滚动条。这是一个使用纯CSS3实现的图文切换效果,没使用js脚本。点击左右箭头或者索圆点引按钮可以切换内容。by 何问起。 还可以有长文本,会显示滚动条。这是一个使用纯CSS3实现的图文切换效果,没使用js脚本。点击左右箭头或者索圆点引按钮可以切换内容。by 何问起。 还可以有长文本,会显示滚动条。这是一个使用纯CSS3实现的图文切换效果,没使用js脚本。点击左右箭头或者索圆点引按钮可以切换内容。by 何问起。 还可以有长文本,会显示滚动条。这是一个使用纯CSS3实现的图文切换效果,没使用js脚本。点击左右箭头或者索圆点引按钮可以切换内容。by 何问起。

    </p>
    </li>
    </ul>
    <div class="arrows">
    <label for="slides_1"></label>
    <label for="slides_2"></label>
    <label for="slides_3"></label>
    <label for="slides_4"></label>
    </div>
    <div class="navigation">
    <div>
    <label for="slides_1"></label>
    <label for="slides_2"></label>
    <label for="slides_3"></label>
    <label for="slides_4"></label>
    </div>
    </div>
    </div>
    </div>

    <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
    <p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
    <p>来源:
    <a href="http://hovertree.com/" target="_blank">何问起</a>
    </p>
    </div>
    </body>

    </html>

  • 相关阅读:
    MapReduce中压缩的使用体验
    weblogic 12安装及和Eclipse的整合
    常用正则表达式补充1
    C# 中利用 Conditional 定义条件方法
    金额文本框
    C#中的List<string>泛型类示例
    HTML ID和Name属性的区别
    CSS的position:fixed的使用
    C# 匿名方法和Lambda表达式
    C#设置开机启动程序
  • 原文地址:https://www.cnblogs.com/panda-ling/p/6323277.html
Copyright © 2011-2022 走看看