H5的动画

最新推荐文章于 2021-07-06 10:11:03 发布

SXS120730

最新推荐文章于 2021-07-06 10:11:03 发布

阅读量855

点赞数

分类专栏： Angularjs

本文链接：https://blog.csdn.net/SXS120730/article/details/78177536

版权

Angularjs 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
    <title>第一周周考</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="da clear">
    <div class="xiao">
        <p class="blue">Blue App <span style="font-weight: 100">Template</span></p>
        <div class="one">
            One page Responsive HTML5 parallax business landing page
        </div>
        <p class="lorem">
            Lorem ipsum dolor sit amet,consectetur adipisicing elit. Similique autem,atque in voluptatibus repellat nostrum iustoarchitecto vel placeat numquam omnis assumenda.
        </p>
        <div class="down"></div>
    </div>
    <img class="phone" src="images/phone.png">
</div>
</body>
</html>

css样式

* {
    margin: 0;
    padding: 0;
}
.da {
    width: 1400px;
    height: 700px;
    background: url("../images/bg.jpg");
    margin: 0 auto;
}

.clear:after {
    display: block;
    content: '';
    clear: both;
}
.xiao{
    width: 600px;
    height: 500px;
    margin: 150px;
    float: left;
}
.down{
    margin-top: 100px;
    width: 280px;
    height:70px;
    background:url(../images/003.png);
    transition: all 1s ease;
}
.down:hover{
    line-height: 280px;
    background: url("../images/001.png");
}
.phone {
    display: block;
    margin-top: 50px;
    float: left;
    transition: all 2s ease;
}
.phone:hover{
    transform: rotate(25deg) skew(-25deg);
}
.blue{
    height: 70px;
    font-size: 50px;
    color: white;
    transition: all 2s ease;
}
.blue:hover{
    font-size: 60px;
    color: yellow;
}
.one{
    font-size: 25px;
    color: white;
    width: 400px;
    height: 100px;
    margin-top: 30px;
    transition: all 2s ease;
}
.one:hover{
    transform: rotate(360deg);
}
.lorem{
    width: 600px;
    color: white;
    font-size: 20px;
    line-height: 30px;
}

@media screen and (max-width: 600px){
    .da {
        width: 600px;
        height: 1400px;
        background: url("../images/bg.jpg");
        margin: 0 auto;
    }
    .xiao{
        margin:0 auto;
        float: none;
        padding-left: 20px;
    }
    .blue{
        width:90%;
    }
    .one{
        width:80%;
    }
    .phone{
        margin-left: 100px;
        float: none;
    }
}

SXS120730

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5的动画

布局第一周周考 Blue App Template One page Responsive HTML5 parallax business landing page Lorem ipsum dolor sit amet
复制链接

扫一扫