css给你灵感-纯css做的翻页效果

Freeren希望以下小小的效果，能给做网站设计的你提供些许灵感。

看看下面的效果，纯css制作的哦。第一个是图片的翻页效果，第二个是文字的翻页效果。

123

资讯标准设计

• freeren资讯freeren资讯freeren资
• freeren资讯freeren资讯freeren资
• freeren资讯freeren资讯freeren资
• freeren资讯freeren资讯freeren资
• freeren资讯freeren资讯freeren资
• freeren资讯freeren资讯freeren资

• web标准web标准web标准web标准web
• web标准web标准web标准web标准web
• web标准web标准web标准web标准web
• web标准web标准web标准web标准web
• web标准web标准web标准web标准web
• web标准web标准web标准web标准web

• web设计web设计web设计web设计web
• web设计web设计web设计web设计web
• web设计web设计web设计web设计web
• web设计web设计web设计web设计web
• web设计web设计web设计web设计web
• web设计web设计web设计web设计web

如果点完了页面不动就最好了。谁有办法吗？

第一个效果的代码：

样式表：

dl#example  {
    width:240px;
    height:170px;
    border:10px solid #eee;
    position:relative;
}
#example dd {
    margin:0;
    width:240px;
    height:230px;
    overflow:hidden;
}
#example img {
    width:240px;
    height:230px;
}
#example dt {
    position:absolute;
    right:3px;
    top:90px;
}
#example a {
    display:block;
    margin:1px;
    width:20px;
    height:20px;
    text-align:center;
    font:bold 12px/20px "宋体", sans-serif;
    color:#fff;
    text-decoration:none;
    background:#666;
    border:1px solid #fff;
    filter:alpha(opacity=50);
    opacity:.5;
}
#example a:hover {
    background:#000;
}

html代码：

<dl id="example">
        <dt><a href="#a" title="翻页按钮">1</a><a href="#b" title="">2</a><a href="#c" title="">3</a></dt>
        <dd>
            <img src="a.jpg" alt="" title="" id="a" />
            <img src="b.jpg" alt="" title="" id="b" />
            <img src="c.jpg" alt="" title="" id="c" />
        </dd>
</dl>

第二个效果的代码：

样式表：

dl#example2 {
    width:240px;
    height:170px;
    border:1px solid #eee;
    position:relative;
}
#example2 dd {
    margin:0;
    width:240px;
    height:170px;
    overflow:hidden;
}
#example2 dt {
    position:absolute;
    right:1px;
}
#example2 ul {
    margin:0;
    padding:0 8px;;
    width:224px;
    height:170px;
    list-style:none;
    background:url("arrow.gif") no-repeat 92% 16px;
    border:1px solid #fff;
}
#example2 #b {
    background-position:92% center
}
#example2 #c {
    background-position:92% 92%
}
#example2 li {
    width:205px;
    height:27px;
    font:12px/27px "宋体", sans-serif;
    white-space:nowrap;
    overflow:hidden;
}
#example2 dt a {
    display:block;
    margin:1px;
    width:15px;
    height:28px;
    text-align:center;
    font:bold 12px "宋体", sans-serif;
    color:#fff;
    text-decoration:none;
    background:#ffcc66;
    padding:14px 0;
}
#example2 dt a:hover {
    background:orange;
}

html代码
<dl id="example2">
        <dt><a href="#a" title="">资讯</a><a href="#b" title="">标准</a><a href="#c" title="">设计</a></dt>
        <dd>
                <ul id="a">
                        <li><a href="#" title="css给你灵感 freeren.org">freeren资讯freeren资讯freeren资</a></li>
                        <li><a href="#" title="css给你灵感 freeren.org">freeren资讯freeren资讯freeren资</a></li>
                        <li><a href="#" title="css给你灵感 freeren.org">freeren资讯freeren资讯freeren资</a></li>
                        <li><a href="#" title="css给你灵感 freeren.org">freeren资讯freeren资讯freeren资</a></li>
                        <li><a href="#" title="css给你灵感 freeren.org">freeren资讯freeren资讯freeren资</a></li>
                        <li><a href="#" title="css给你灵感 freeren.org">freeren资讯freeren资讯freeren资</a></li>
                </ul>
                <ul id="b">
                        <li><a href="#" title="css给你灵感 freeren.org">web标准web标准web标准web标准web</a></li>
                        <li><a href="#" title="css给你灵感 freeren.org">web标准web标准web标准web标准web</a></li>
                        <li><a href="#" title="css给你灵感 freeren.org">web标准web标准web标准web标准web</a></li>
                        <li><a href="#" title="css给你灵感 freeren.org">web标准web标准web标准web标准web</a></li>
                        <li><a href="#" title="css给你灵感 freeren.org">web标准web标准web标准web标准web</a></li>
                        <li><a href="#" title="css给你灵感 freeren.org">web标准web标准web标准web标准web</a></li>
                </ul>
                <ul id="c">
                        <li><a href="#" title="css给你灵感 freeren.org">web设计web设计web设计web设计web</a></li>
                        <li><a href="#" title="css给你灵感 freeren.org">web设计web设计web设计web设计web</a></li>
                        <li><a href="#" title="css给你灵感 freeren.org">web设计web设计web设计web设计web</a></li>
                        <li><a href="#" title="css给你灵感 freeren.org">web设计web设计web设计web设计web</a></li>
                        <li><a href="#" title="css给你灵感 freeren.org">web设计web设计web设计web设计web</a></li>
                        <li><a href="#" title="css给你灵感 freeren.org">web设计web设计web设计web设计web</a></li>
                </ul>
        </dd>
</dl>
 

想像一下，你还能设计出什么样子的翻页效果？可以在下面留言。