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>