那你帮我写一个网页,让我参考一下
时间: 2023-08-28 22:27:03 浏览: 89
好的,我可以提供一个简单的参考网页供您参考。以下是一个包含十个网页特效的示例网页:
```html
<!DOCTYPE html>
<html>
<head>
<title>网页特效示例</title>
<!-- 引入 Bootstrap -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<!-- 引入 jQuery -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- 引入 Cascading Select -->
<script src="https://cdn.staticfile.org/cascading-select/1.4.1/jquery.cascading-select.min.js"></script>
<!-- 引入瀑布流布局插件 -->
<script src="https://cdn.staticfile.org/masonry/4.2.2/masonry.pkgd.min.js"></script>
<!-- 引入网页样式 -->
<style>
/* 计算器样式 */
.calculator {
background-color: #f8f9fa;
padding: 20px;
border-radius: 5px;
}
.calculator .btn {
margin: 5px;
width: 80px;
height: 80px;
font-size: 24px;
border-radius: 50%;
}
/* 时钟样式 */
.clock {
display: flex;
align-items: center;
justify-content: center;
background-color: #f8f9fa;
padding: 20px;
border-radius: 5px;
}
.clock .hour,
.clock .minute,
.clock .second {
position: relative;
width: 120px;
height: 120px;
border-radius: 50%;
border: 2px solid #343a40;
margin: 10px;
}
.clock .hour::before,
.clock .minute::before,
.clock .second::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 4px;
height: 40%;
background-color: #343a40;
border-radius: 5px;
}
.clock .hour::before {
height: 30%;
}
.clock .minute::before {
height: 45%;
}
.clock .second::before {
height: 50%;
background-color: #dc3545;
}
.clock .hour-hand {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -100%);
width: 6px;
height: 40%;
background-color: #343a40;
border-radius: 5px;
transform-origin: bottom center;
animation: rotate-hour 12h linear infinite;
}
.clock .minute-hand {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -100%);
width: 4px;
height: 45%;
background-color: #343a40;
border-radius: 5px;
transform-origin: bottom center;
animation: rotate-minute 60s linear infinite;
}
.clock .second-hand {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -100%);
width: 2px;
height: 50%;
background-color: #dc3545;
border-radius: 5px;
transform-origin: bottom center;
animation: rotate-second 60s linear infinite;
}
@keyframes rotate-hour {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes rotate-minute {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes rotate-second {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 图片悬停放大效果样式 */
.image:hover {
transform: scale(1.2);
transition: all 0.3s ease-in-out;
}
/* 跟随效果样式 */
.follower {
position: absolute;
background-color: #dc3545;
color: #fff;
width: 80px;
height: 40px;
border-radius: 5px;
text-align: center;
visibility: hidden;
opacity: 0;
transition: all 0.3s ease-in-out;
}
/* 瀑布流布局样式 */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-auto-rows: 0;
grid-gap: 10px;
margin: 20px;
}
.grid-item {
background-color: #f8f9fa;
padding: 10px;
border-radius: 5px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}
.grid-item img {
width: 100%;
height: auto;
border-radius: 5px;
}
/* 音乐播放器样式 */
.music-player {
display: flex;
align-items: center;
background-color: #f8f9fa;
padding: 20px;
border-radius: 5px;
}
.music-player .icon {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
font-size: 24px;
border-radius: 50%;
background-color: #343a40;
color: #fff;
margin-right: 20px;
cursor: pointer;
}
.music-player .icon:hover {
background-color: #dc3545;
}
.music-player audio {
flex: 1;
}
</style>
</head>
<body>
<!-- 轮播图 -->
<div class="container">
<h1>简易轮播图</h1>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/id/1019/600/400" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/id/1020/600/400" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/id/1021/600/400" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- 计算器 -->
<div class="container">
<h1>简易计算器</h1>
<div class="calculator">
<div class="row">
<div class="col"><input type="text" class="form-control" id="result" readonly></div>
</div>
<div class="row">
<div class="col"><button class="btn btn-secondary" onclick="clearResult()">C</button></div>
<div class="col"><button class="btn btn-secondary" onclick="backspace()">←</button></div>
<div class="col"><button class="btn btn-secondary" onclick="input('%')">%</button></div>
<div class="col"><button class="btn btn-danger" onclick="input('/')">÷</button></div>
</div>
<div class="row">
<div class="col"><button class="btn btn-secondary" onclick="input('7')">7</button></div>
<div class="col"><button class="btn btn-secondary" onclick="input('8')">8</button></div>
<div class="col"><button class="btn btn-secondary" onclick="input('9')">9</button></div>
<div class="col"><button class="btn btn-danger" onclick="input('*')">x</button></div>
</div>
<div class="row">
<div class="col"><button class="btn btn-secondary" onclick="input('4')">4</button></div>
<div class="col"><button class="btn btn-secondary" onclick="input('5')">5</button></div>
<div class="col"><button class="btn btn-secondary" onclick="input('6')">6</button></div>
<div class="col"><button class="btn btn-danger" onclick="input('-')">-</button></div>
</div>
<div class="row">
<div class="col"><button class="btn btn-secondary" onclick="input('1')">1</button></div>
<div class="col"><button class="btn btn-secondary" onclick="input('2')">2</button></div>
<div class="col"><button class="btn btn-secondary" onclick="input('3')">3</button></div>
<div class="col"><button class="btn btn-danger" onclick="input('+')">+</button></div>
</div>
<div class="row">
<div class="col"><button class="btn btn-secondary" onclick="input('0')">0</button></div>
<div class="col"><button class="btn btn-secondary" onclick="input('.')">.</button></div>
<div class="col"><button class="btn btn-danger" onclick="calculate()">=</button></div>
</div>
</div>
</div>
<!-- 级联下拉菜单 -->
<div class="container">
<h1>级联下拉菜单</h1>
<form>
<div class="form-group">
<label for="province">省份</label>
<select class="form-control" id="province">
<option value="">请选择省份</option>
<option value="1">浙江省</option>
<option value="2">江苏省</option>
</select>
</div>
<div class="form-group">
<label for="city">城市</label>
<select class="form-control" id="city">
<option value="">请选择城市</option>
</select>
</div>
<div class="form-group">
<label for="district">区县</label>
<select class="form-control" id="district">
<option value="">请选择区县</option>
</select>
</div>
</form>
</div>
<!-- 简易留言板 -->
<div class="container">
<h1>简易留言板</h1>
<form method="post" action="submit-message.php">
<div class="form-group">
<label for="name">姓名</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">邮箱</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="form-group">
<label for="message">留言内容</label>
<textarea class="form-control" id="message" name="message" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
</div>
<!-- 动态时钟 -->
<div class="container">
<h1>动态时钟</h1>
<div class="clock">
<div class="hour"><div class="hour-hand"></div></div>
<div class="minute"><div class="minute-hand"></div></div>
<div class="second"><div class="second-hand"></div></div>
</div>
</div>
<!-- 图片悬停放大效果 -->
<div class="container">
<h1>图片悬停放大效果</h1>
<div class="row">
<div class="col-md-4">
<img class="image" src="https://picsum.photos/id/100/300/200" alt="">
</div>
<div class="col-md-4">
<img class="image" src="https://picsum.photos/id/200/300/200" alt="">
</div>
<div class="col-md-4">
<img class="image" src="https://picsum.photos/id/300/300/200" alt="">
</div>
</div>
</div>
<!-- 折叠菜单 -->
<div class="container">
<h1>折叠菜单</h1>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
点击展开折叠菜单
</button>
<div class="collapse" id="collapseExample">
<div class="card card-body">
这是一个折叠菜单的内容。
</div>
</div>
</div>
<!-- 简易音乐播放器 -->
<div class="container">
<h1>简易音乐播放器</h1>
<div class="music-player">
<div class="icon"><i class="fa fa-play"></i></div>
<audio src="https://www.runoob.com
阅读全文