HTML5+CSSday4综合案例二——banner效果

作者：System 时间：2024年08月15日分类：所有,html5 字数：1472

这篇文章距离上次修改已过197天，其中的内容可能已经有所变动。

以下是实现banner效果的核心HTML和CSS代码。

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Banner Effect</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="banner">
  <div class="banner-content">
    <h1>欢迎来到我的网站</h1>
    <p>这里有你需要的所有信息。</p>
    <a href="#" class="btn">了解更多</a>
  </div>
</div>
</body>
</html>

CSS (style.css):




* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
body {
  font-family: Arial, sans-serif;
}
 
.banner {
  width: 100%;
  height: 100vh;
  background-image: url('your-image.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 75vh, 25% 100%, 0 75vh);
}
 
.banner-content {
  position: absolute;
  bottom: 50px;
  left: 50px;
  color: white;
  max-width: 700px;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
 
.banner-content h1 {
  font-size: 50px;
  margin-bottom: 10px;
}
 
.banner-content p {
  font-size: 20px;
  margin-bottom: 30px;
}
 
.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #333;
  color: white;
  text-decoration: none;
  border: 1px solid #333;
  transition: background-color 0.3s;
}
 
.btn:hover {
  background-color: transparent;
  color: #333;
}

确保替换your-image.jpg为实际的图片文件路径。这个示例展示了如何创建一个带有图像背景和文本内容的切角式banner，并使用clip-path属性来剪裁不需要的部分，从而形成一种特殊的banner效果。

HTML5+CSSday4综合案例二——banner效果

评论已关闭

推荐阅读