找回密码
当前位置：前端开发者 > CSS > 正文

Web前端页面开发CSS3综合运用

2018-07-23 分类：CSS / 面试 阅读(705) 评论(0)

web前端开发面试基本问题|web前端页面开发|前端开发面试题 掘金

html 代码
多行省略号
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>前端开发中跳转页面的方式总结</title>
    <script type=”text/javascript” src=”http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js”></script>
</head>
<body>
    <style type=”text/css”>
        h4,
        h5,
        h6,
        h1,
        h2,
        h3 {
            margin-top: 0;
        }
        ul,
        ol {
            margin: 0;
        }
        p {
            margin: 0;
        }
        html,
        body {
            font-family: ‘Hind-Regular’;
            font-size: 100%;
            background: #fff;
        }
        a {
            text-decoration: none;
        }
        .col1 figure {
            position: absolute;
            float: left;
            overflow: hidden;
            top: -16px;
            left: -40px;
            /*cursor: pointer;*/
            width: 265px;
            height: 470px;
        }
        .col1 figure img {
            margin-left: 0px;
            padding-left: 0px;
        }
        .col1 figure figcaption {
            position: absolute;
            top: 0;
            left: 0;
            width: 99%;
            height: 99%;
        }
        figure.effect-bubba {
            background: rgba(213, 38, 133, 0.83);
        }
        figure.effect-bubba:hover img {
            opacity: 0.3;
        }
        figure.effect-bubba figcaption::before,
        figure.effect-bubba figcaption::after {
            position: absolute;
            top: 30px;
            right: 30px;
            bottom: 30px;
            left: 30px;
            content: ”;
            opacity: 1;
        }
        figure.effect-bubba figcaption::before {
            border-top: 1px solid #fff;
            border-bottom: 1px solid #fff;
            -webkit-transform: scale(0, 1);
            -moz-transform: scale(0, 1);
            -o-transform: scale(0, 1);
            -ms-transform: scale(0, 1);
            transform: scale(0, 1);
        }
        figure.effect-bubba figcaption::after {
            border-right: 1px solid #fff;
            border-left: 1px solid #fff;
            -webkit-transform: scale(1, 0);
            -moz-transform: scale(1, 0);
            -o-transform: scale(1, 0);
            -ms-transform: scale(1, 0);
            transform: scale(1, 0);
        }
        figure.effect-bubba:hover figcaption::before,
        figure.effect-bubba:hover figcaption::after {
            -webkit-transform: scale(1, 1);
            -moz-transform: scale(1, 1);
            -o-transform: scale(1, 1);
            -ms-transform: scale(1, 1);
            transform: scale(1, 1);
            -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
            -moz-transition: opacity 0.35s, -moz-transform 0.35s;
            -o-transition: opacity 0.35s, -o-transform 0.35s;
            -ms-transition: opacity 0.35s, -ms-transform 0.35s;
            transition: opacity 0.35s, transform 0.35s;
        }
        figure.effect-bubba h4 p {
            -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
            -moz-transition: opacity 0.35s, -moz-transform 0.35s;
            -o-transition: opacity 0.35s, -o-transform 0.35s;
            -ms-transition: opacity 0.35s, -ms-transform 0.35s;
            transition: opacity 0.35s, transform 0.35s;
            -webkit-transform: translate3d(0, -100px, 0);
            -moz-transform: translate3d(0, -100px, 0);
            -o-transform: translate3d(0, -100px, 0);
            -ms-transform: translate3d(0, -100px, 0);
            transform: translate3d(0, -100px, 0);
            opacity: 0;
            color: #fff;
            font-family: ‘Signika-Regular’;
        }
        figure.effect-bubba h4.gal {
            padding-top: 51%;
        }
        .gal2 {
            font-size: 16px;
        }
        .gal3 {
            font-size: 14px;
        }
        .gal1 {
            padding: 0 0;
            margin-top: 20px;
        }
        figure.effect-bubba p {
            /* padding: 5px 3em; */
            padding: 5px 44px;
            opacity: 0;
            color: #fff;
            font-size: 14px;
            -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
            -moz-transition: opacity 0.35s, -moz-transform 0.35s;
            -o-transition: opacity 0.35s, -o-transform 0.35s;
            -ms-transition: opacity 0.35s, -ms-transform 0.35s;
            transition: opacity 0.35s, transform 0.35s;
            -webkit-transform: translate3d(0, 100px, 0);
            -moz-transform: translate3d(0, 100px, 0);
            -o-transform: translate3d(0, 100px, 0);
            -ms-transform: translate3d(0, 100px, 0);
            transform: translate3d(0, 100px, 0);
        }
        figure.effect-bubba:hover h4,
        figure.effect-bubba:hover p {
            opacity: 1;
            -webkit-transform: translate3d(0, 0, 0);
            -moz-transform: translate3d(0, 0, 0);
            -o-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
        .col {
            margin-right: 1%;
            margin-top: 10px;
            width: 265px;
            height: 470px;
            overflow: hidden;
            border: 1px solid #000000;
            position: relative;
        }
        .center {
            width: 1200px;
            margin: 0 auto;
        }
        .ssq {
            -webkit-animation: my5 4s linear infinite;
        }
        @-webkit-keyframes my5 {
            from {
                -webkit-transform: scale(1, 1);
            }
            to {
                -webkit-transform: scale(1.15, 1.15);
            }
        }
        .colq {
            float: left;
            margin-right: 100px;
        }
    </style>
    <div class=”center”>
        <div class=”colq”>
            <div class=”col col1 “>
                <a href=”” rel=”title”>
                    <figure class=”effect-bubba “>
                        <img src=”http://cdn.attach.w3cfuns.com/notes/pics/201609/30/140412stt0oyttupz2yv2q.jpg” alt=””>
                        <figcaption>
                            <h4 class=”gal”>
                                <p class=”gal2″>吴冰</b>
                                    <p class=”gal3″>星图艺考宣传部</p>
                            </h4>
                            <p class=”gal1″>
                                <p>中国教育界领军人物</p>
                                <p>全国十大名牌教师</p>
                                <p>出色的激励大师、孩子成才设计师</p>
                            </p>
                        </figcaption>
                    </figure>
                </a>
            </div>
        </div>
        <div class=”colq”>
            <div class=”col col1 “>
                <a href=”” rel=”title”>
                    <figure class=”effect-bubba c2″>
                        <img src=”http://cdn.attach.w3cfuns.com/notes/pics/201609/30/140412stt0oyttupz2yv2q.jpg” alt=””>
                        <figcaption>
                            <h4 class=”gal”>
                                <p class=”gal2″>吴冰</b>
                                    <p class=”gal3″>星图艺考宣传部</p>
                            </h4>
                            <p class=”gal1″>
                                <p>中国教育界领军人物</p>
                                <p>全国十大名牌教师</p>
                                <p>出色的激励大师、孩子成才设计师</p>
                            </p>
                        </figcaption>
                    </figure>
                </a>
            </div>
        </div>
    </div>
    <script>
        $(function () {
            $(“.c2”).hover(function () {
                $(“.c2”).addClass(“ssq”);
            }, function () {
                $(“.c2”).removeClass(“ssq”);
            });
        })
    </script>
</body>
</html>

前端html开发教学视频|前端页面开发项目视频|前端开发面试浏览器兼容性问题

赞(0)
前端开发者 » Web前端页面开发CSS3综合运用
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论