屏幕适配And动画效果

最新推荐文章于 2020-10-22 02:17:49 发布

Yw_Ambition

最新推荐文章于 2020-10-22 02:17:49 发布

阅读量1.2w

点赞数

分类专栏： Web前端文章标签：动画

本文链接：https://blog.csdn.net/Yw59792649/article/details/78179039

版权

Web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏


 <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>屏幕适配And动画效果</title>
    <link href="css/style.css" rel="stylesheet"/>
    <style>
        .no{
             margin-right: -200px;
            margin-top: 230px;
            width: 570px;
            height: 700px;
            background: url("images/phone.png" ) no-repeat;
            transition:all 2s ease-in-out;
        }
        body{
            width: 1295px;
            height: 1000px;
            background: url("images/bg.jpg") no-repeat;
        }
        .is{
            width: 650px;
            height: 500px;
            margin-left: 50px;
            margin-top: 190px;
            float: left;
            /*position:absolute;*/

        }

        p{
            font-size: 32px;
            color: #fff;
        }
        span{
            font-size: 14px;
            color: #fff;
        }
        .down{
            margin-top: 100px;
            margin-left: -10px;
            width: 280px;
            height:70px;
            background:url("images/003.png") no-repeat;
            transition:all 2s ease-in-out;
        }
        .down:hover{
            background:url("images/001.png") no-repeat;
        }

        .lll{
            font-size: 60px;
            color: #fff;
        }
        .lll:hover{
            font-size: 75px;
            color:red;
        }
        .xuanzhuan{
            display: block;
            text-align: center;
            /*-webkit-transition:all 2s ease-in-out;*/
            /*-moz-transition:all 2s ease-in-out;*/
            /*-o-transition:all 2s ease-in-out;*/
            /*-ms-transition:all 2s ease-in-out;*/
            transition:all 2s ease-in-out;
        }
        .xuanzhuan:hover{
            /*-webkit-transform:rotate(360deg) scale(1,1);*/
            /*-moz-transform:rotate(360deg) scale(1,1);*/
            /*-o-transform:rotate(360deg) scale(1,1);*/
            /*-ms-transform:rotate(360deg) scale(1,1);*/
            transform:rotate(360deg) scale(1,1);
        }

        .no:hover{
            transform:rotate(45deg) scale(1,1);
        }

        @media screen and (max-width: 600px){
            .is{
                width: 100%;

            }
            .no{
                width: 100%;
                float: left;
            }
        }

    </style>
</head>

<body>
    <div class="da">
        <div class="is">
            <a class="lll">Blue App Template</a><br><br><br><br>
            <p class="xuanzhuan">One page Responsive HTML5 parallax business landing page</p>
            <br><br><br><br><br><br><br>
            <span>Lorem ipsum dolor sit amet,
                 consectetur adipisicing elit. Similique autem,
                 atque in voluptatibus repellat nostrum iusto
                 architecto vel placeat numquam omnis assumenda.</span>
                <div class="down"></div>
        </div>

        <div class="no" >
        </div>
    </div>
</body>
</html>、

Yw_Ambition

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
屏幕适配And动画效果

<html lang="en"><head> <meta charset="UTF-8"> <title>屏幕适配And动画效果</title> <link href="css/style.css" rel="stylesheet"/> <style> .no{ margin-right: -200px;
复制链接

扫一扫

专栏目录