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

html5+css 及其效果

2017-11-06 08:10 162 查看

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>
<div class="left">
<div class="top">
Blue App <span style="font-size: 55px;font-weight: 90px">Template</span>
</div>

<div class="cen">
One page Responsive HTML5 parallax<br>business landing page
</div>
<div class="bom">
Lorem ipsum dolor sit amet,consectetur adipisicing elit. Similique autem,<br>
atque in voluptatibus repellat nostrum iusto architecto vel placeat<br>
numquam omnis assumenda.
</div>

<div class="ximg">

</div>

</div>

<div class="right">
<img src="img/phone.png">
</div>

</body>
</html>

//css

body{
width: 100%;
background:url(img/bg.jpg);
background-size: cover;

}

.left{
width: 760px;
height: 580px;
float: left;
margin-top: 180px;
margin-left: 110px;

}

.top{
width: 760px;
height: 100px;
font-size: 60px;
color:#fff; font-weight:500;

}

.top:hover{
transform:scale(1.2);
color: #000;

}

.ximg{
width: 300px;
height: 75px;
margin-top: 80px;
background: url(img/003.png);
background-size: cover;

}

.ximg:hover{
background: url(img/001.png);
background-size: cover;
transition: 3s;

}

.right{
float: left;
margin-top: 160px;
margin-left: 200px;

}

.right:hover{
transform: skew(-25deg);
transition: 1s;

}

.cen{
width: 600px;
height: 120px;
font-size: 28px;
color: #fff;
margin-top: 40px;

}

.cen:hover{
transform:rotate(360deg);
transition: 3s;

}

.bom{
width: 500px;
height: 130px;
font-size: 18px;
color: #fff;
margin-top: 60px;

}

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

标签：

相关文章推荐

新的分享

章节导航