手写一个好看的个人主页
效果图
文字，图片加上各种动画显示，使页面更加美观。然后给头像也加上了一个动画，使头像实现一个一直在上下浮动的效果。媒体组件logo，添加事件hover,置顶会变颜色。按钮添加active激活样式。
最好打开码上掘金看效果图，更明显，因为显示框问题，这样看布局有点问题。
整体布局
头部
包含一个logo,和一个 导航栏。
logo我这里用了一段文字替代，大家可以自己替换。
header都处于同一行，于是我采用了弹性布局。因为一个左一个右，就可以使用justify-content: space-between;然后logo我给它设置了一个从左往右的动画，时间为1s。导航栏添加了一个从上往下的动画，不过注意的是，我们可以看到每一个导航栏元素是递进往上升的。
实现导航栏元素递进往上升的关键。<a href="#" class="item" style="--i:1">Home</a>我们给每个导航元素都添加了css属性，然后通过这个属性， calc(.2S * var(--i)) 计算每个不同元素的延迟时间，这样我们就可以看到这种延迟效果。
.header {
position: fixed;
/* 将导航栏固定在页面顶部 */
top: 0;
left: 0;
width: 100%;
padding: 20px 10%;
/* 设置导航栏内边距 */
background: transparent;
/* 设置导航栏背景为透明 */
display: flex;
/* 将导航栏的子元素设置为flex布局 */
justify-content: space-between;
/* 将导航栏子元素分散对齐 */
align-items: center;
/* 将导航栏子元素垂直居中对齐 */
z-index: 100;
/* 将导航栏设置为最上层 */
}
/* 设置导航栏Logo的样式 */
.logo {
font-size: 25px;
/* 设置字体大小 */
color: #fff;
/* 设置字体颜色 */
text-decoration: none;
/* 取消下划线 */
font-weight: 600;
/* 设置字体粗细 */
cursor: default;
/* 设置鼠标样式为默认 */
opacity: 0;
/* 设置初始透明度为0 */
animation: slideRight 1s ease forwards;
/* 设置动画效果 */
}
/* 设置导航栏链接的样式 */
.navbar a {
display: inline-block;
/* 将链接设置为块级元素 */
font-size: 18px;
/* 设置字体大小 */
color: #fff;
/* 设置字体颜色 */
text-decoration: none;
/* 取消下划线 */
font-weight: 500;
/* 设置字体粗细 */
margin-left: 35px;
/* 设置左侧间距 */
opacity: 0;
/* 设置初始透明度为0 */
transition: 0.3s;
/* 设置过渡效果 */
animation: slideTop 1s ease forwards;
/* 设置动画效果 */
animation-delay: calc(.2S * var(--i));
/* 设置动画延迟时间 */
}
/* 设置导航栏链接的鼠标悬停和点击样式 */
.navbar a:hover,
.navbar a:active {
color: #b7b2a9;
/* 设置字体颜色 */
}
<header class="header">
<!-- 网站Logo -->
<a href="#" class="logo">
This is a Logo!
</a>
<!-- 导航栏 -->
<nav class="navbar">
<!-- 导航栏选项1 -->
<a href="#" class="item" style="--i:1">Home</a>
<!-- 导航栏选项2 -->
<a href="#" class="item" style="--i:2">About</a>
<!-- 导航栏选项3 -->
<a href="#" class="item" style="--i:3">Skills</a>
<!-- 导航栏选项4 -->
<a href="#" class="item" style="--i:4">Me</a>
</nav>
</header>
主页部分
主页部分包含文字区域和头像区域。
在文字区域里有一个打印机效果输出文字，可以看我上一篇文章。html手写一个打印机效果-从最基础到学会。然后给每个文字设置不同的动画，比如第一个h1我们让它从上往下，然后第二个h1我们让它从下往上，在他们中间的h1我们让它从左向右出现。在文字区域还有一块是一些media的组件logo,这个我是通过一个js引入的库。然后这些logo跟导航栏元素大致相同，我们也给他们定义了一个css属性，可以让他们相继出现。然后按钮也是添加向上的动画，给定一个延迟时间。
头像区域，我们给头像设置了两个动画，其实动画非常简单，一个其实就是为了显示头像，另一个实现头像上下浮动的效果。
/* 定义放大的动画 */
@keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
opacity: 1;
}
}
/* 定义图片浮动的动画 */
@keyframes floatImg {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-36px);
}
100% {
transform: translateY(0);
}
}
<link rel="stylesheet" href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css">
<!-- 主页部分 -->
<section class="home">
<!-- 主页内容 -->
<div class="home-content">
<!-- 主页标题 -->
<h3>Hello,It's Me</h3>
<h1>Welcome To Know Me!</h1>
<!-- 主页小标题 -->
<h3>个人介绍
<!-- 小标题下的文本 -->
<span class="text">
</span>
</h3>
<!-- 主页正文 -->
<p>越努力，越幸运！！！Lucky!</p>
<!-- 社交媒体链接 -->
<div class="social-media">
<!-- 社交媒体链接1 -->
<a href="#" style="--i:7"><i class="bx bxl-tiktok"></i></a>
<!-- 社交媒体链接2 -->
<a href="#" style="--i:8"><i class="bx bxl-facebook-circle"></i></a>
<!-- 社交媒体链接3 -->
<a href="#" style="--i:9"><i class="bx bxl-google"></i></a>
<!-- 社交媒体链接4 -->
<a href="#" style="--i:10"><i class="bx bxl-linkedin-square"></i></a>
</div>
<!-- 主页按钮 -->
<a href="#" class="btn">Learn More</a>
</div>
<!-- 主页图片 -->
<div class="home-img">
<img src="https://img.wxcha.com/m00/54/ed/69d26be4a4ac700e27c2d9cf85472b8c.jpg" alt="">
</div>
</section>
整体代码
动画的代码
/*动画*/
@keyframes blink {
from,
to {
border-color: transparent;
/* 透明边框颜色 */
}
50% {
border-color: white;
/* 白色边框颜色 */
}
}
/* 定义向右滑动的动画 */
@keyframes slideRight {
0% {
transform: translateX(-100px);
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
/* 定义向左滑动的动画 */
@keyframes slideLeft {
0% {
transform: translateX(100px);
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
/* 定义向上滑动的动画 */
@keyframes slideTop {
0% {
transform: translateY(100px);
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
/* 定义向下滑动的动画 */
@keyframes slideBottom {
0% {
transform: translateY(-100px);
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
/* 定义放大的动画 */
@keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
opacity: 1;
}
}
/* 定义图片浮动的动画 */
@keyframes floatImg {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-36px);
}
100% {
transform: translateY(0);
}
}
源码
链接自取 [掘金/个人页面 · Mr-W-Y-P/Html-css-js-demo - 码云 - 开源中国 (gitee.com)]掘金 · Mr-Wang-Y-P/Html-css-js-demo - 码云 - 开源中国 (gitee.com)
