Tag: 动画 布局 设计
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>康桥地产</title>
<style>
body{
margin: 0;
}
img{
width: 100%;
display: block;
}
section{
position: relative;
}
span{
background-color: #000000;
color: white;
position: absolute;
top: 50px;
left: 0;
padding-top:10px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px;
border-top-right-radius: 10px;
border-bottom-right-radius:10px;
}
</style>
</head>
<body>
<section>
<a href="kangqiao2.html">
<img src="Image/jxj.jpg" alt="这是第一个图片">
<span>康桥西元前</span>
</a>
</section>
<section>
<a href="#">
<img src ="Image/yxl.jpg" alt="这是第二个图片">
<span>康桥锦绣缘</span>
</a>
</section>
<section>
<a href="#">
<img src="Image/yd.jpg" alt="这是第三个图片">
<span>康桥春晖园</span>
</a>
</section>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>康桥服务</title>
<style>
body{
width: 100%;
height: 100%;
background-image: url(Image/xt.jpg);
background-repeat:no-repeat;
background-size: 100% 100%;
}
ul{
list-style-type:none;
margin-top:80px;
}
li{
margin-bottom:100px;
animation-name:donghua;
animation-duration:2s;
animation-fill-mode:both;
}
a{
color: white;
background-color: black;
opacity:0.7;
text-decoration:none;
padding-top:20px;
padding-right: 60px;
padding-bottom:20px;
padding-left: 40px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
background-image: url(Image/right-arrow.png);
background-repeat: no-repeat;
background-position: 90%;
background-size: 8px 15px;
}
li:nth-child(1){
animation-delay: 0s;
}
li:nth-child(2){
animation-delay: 0.5s;
}
li:nth-child(3){
animation-delay:1s;
}
li:nth-child(4){
animation-delay:1.5s;
}
li:nth-child(5){
animation-delay:2s;
}
@keyframes donghua{
0%{
transform:translate(-100%,0);
}
100%{
transform:translate(0,0);
}
}
li:nth-child(1) a{
padding-right:100px;
}
li:nth-child(2) a{
padding-right:50px;
}
li:nth-child(3) a{
padding-right:30px;
}
li:nth-child(4) a{
padding-right:50px;
}
li:nth-child(5) a{
padding-right:100px;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">楼盘详情</a>
</li>
<li>
<a href="#">全景模式</a>
</li>
<li>
<a href="#">项目图册</a>
</li>
<li>
<a href="#">预约看房</a>
</li>
<li>
<a href="#">房贷计算器</a>
</li>
</ul>
</body>
</html>