手写一个类似博客的个人主页 css动画效果多

手写一个好看的个人主页

效果图

文字，图片加上各种动画显示，使页面更加美观。然后给头像也加上了一个动画，使头像实现一个一直在上下浮动的效果。媒体组件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)