您的位置：首页 > Web前端 > HTML5

H5的动画

2017-10-08 21:10 106 查看

布局

<!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;
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航