目录
1.Table
效果图
?表格的HTML部分代码
<div class="container">
<table>
<thead>
<tr><th colspan="2"><h1>My Schedule</h1></th></tr>
<tr><th><h2>Time</h2></th>
<th ><h2>Event</h2></th></tr>
</thead>
<tbody>
<tr><td class="left"><h3>07:30 AM-8:10 AM</h3></td>
<td class="left"><h3>Codeing</h3></td>
</tr>
<tr><td class="left"><h3>08:30 AM-10:10 AM</h3></td>
<td class="left"><h3>Codeing</h3></td></tr>
<tr><td class="left"><h3>10:30 AM-12:00 AM</h3></td>
<td class="left"><h3>Codeing</h3></td></tr>
<tr><td class="left"><h3>01:00 PM-03:00 PM</h3></td>
<td class="left"><h3>Codeing</h3></td></tr>
<tr>
<td class="left"><h3>03:20 PM-04:00 PM</h3></td><td class="left"><h3>Codeing</h3></td></tr>
</tbody>
</table>
</div>2.Form
效果图
Form部分HTML代码
<form action="submission.html" method="GET">
<label for="username">Username:</label>
<br>
<input id="username" name="username" type="text" required minlength="3" maxlength="15">
<br>
<label for="pw">Password:</label>
<br>
<input id="pw" name="pw" type="password" required minlength="8" maxlength="15">
<br>
<input type="submit" value="Submit">
</form>3.一个特效文字代码分享
效果图
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WHAT</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<svg viewBox="0 0 1000 400">
<!---下行可以修改显示的文本-->
<text id="mytext" x="50%" y="50%" text-anchor="middle" fill="none">Code？</text>
<use xlink:href="#mytext" class="copy copy1"></use>
<use xlink:href="#mytext" class="copy copy2"></use>
<use xlink:href="#mytext" class="copy copy3"></use>
<use xlink:href="#mytext" class="copy copy4"></use>
<use xlink:href="#mytext" class="copy copy5"></use>
</svg>
</div>
</body>
</html>CSS? 这里修改配色啦
*{
margin: 0;
padding:0;
box-shadow: border-box;
font-family: 'poppins',sans-serif;
}
.container{
width: 100%;
height: 100vh;
background:rgb(250, 250, 250);
}
svg{
font-size:150px;
padding-top: 15%;
}
.copy{
fill:none;
stroke:rgb(0, 0, 0);
stroke-width: 3px;
stroke-dasharray: 8% 30%;
stroke-dashoffset: 0%;
animation: textanimation 6s linear infinite;
}
@keyframes textanimation {
100%{
stroke-dashoffset: -35%;
}
}
.copy1{
stroke:#f70000;
animation-delay: -1s;
}
.copy2{
stroke:#ff5e00;
animation-delay: -2s;
}
.copy3{
stroke:#ffd13a;
animation-delay: -3s;
}
.copy4{
stroke:#053ae7;
animation-delay: -4s;
}
.copy5{
stroke:#5905c7;
animation-delay: -5s;
}