前端CSS3巧用border做翻页效果

gulp构建前端开发环境 集成开发环境前端 web前端开发环境搭建

这里主要用到了transition的过渡效果,boder包括left right top bottom 当我们分别给它们赋值的时候会出现很多有趣的效果。本例中用到的就是上图的效果,将left-border,bottom-border设置宽度颜色等规则,当鼠标hover的时候改变它们的width,当点击时再次修改width,以此来实现效果。

代码片段 1

<!doctype html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>Document</title>
    <style>
        body {
            background-color: #ccc;
        }
        .page {
            position: relative;
            width: 400px;
            height: 250px;
            padding: 10px;
            background: #fff;
            overflow: hidden;
            cursor: pointer;
        }
        .page img {
            width: 100%;
            height: 100%;
        }
        .page .angle {
            position: absolute;
            top: 0;
            right: 0;
            border: 0 solid #fff;
            border-left: 0 solid #ccc;
            border-bottom: 0 solid #ccc;
            transition: border-left-width 0.8s, border-top-width 0.8s;
        }
        .page:hover .angle {
            border-left-width: 40px;
            border-top-width: 40px;
        }
        .page.tag .angle {
            border-left-width: 840px;
            border-top-width: 540px;
        }
    </style>
</head>
<body>
    <div class=”page” id=”tag”>
        <div class=”angle”></div>
        <img src=”http://www.33lc.com/article/UploadPic/2012-10/2012102416202559471.jpg” alt=””>
    </div>
    <script>
        var tagEl = document.getElementById(“tag”);
        tagEl.onclick = function () {
            this.className = “page tag”;
        }
    </script>
</body>
</html>

前端开发测试环境域名 开发前端的搭建环境 前端开发本地环境

» 本文来自:前端开发者 » 《前端CSS3巧用border做翻页效果》
» 本文链接地址:https://www.rokub.com/5957.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!