每日分享html特效篇之五个加载页面特效和五个导航按钮特效

2022-11-20 13:13:22 浏览数 (1)

我是c站的一个小博主，近期我会每天分享前端知识包括（原生的web语句，以及vue2和vue3，微信小程序的写法及知识点）本篇文章收录于html特效专栏中，如果想每天在我这学到一些东西，请关注我并订阅专栏，每天都分享前端知识哦~

前端是做什么的？

1.前端工程师主要利用HMTL与CSS建构页面（其中html构建骨架，css构建样式），用JavaScript获取后端数据以及完善交互以及用户体验。 2.通俗来讲，前端在一个项目里，拿到UI设计师设计的设计稿，然后实现UI设计师设计稿，调用后端程序员给的数据接口以获取数据，然后测试，最后部署上线。 3.前端可以对设计图负责,大部分情况下,不需要特别的去理解业务逻辑,因为我们90后都是玩着十几年手机电脑长大的,十几年的经验足够我们在潜意识里想明白应该怎么做,怎么去一步步实现,会有什么意外情况。 4.我感觉前端发展有个很大的缺陷----晋升问题. 正如第三点所言,作为领导必须对项目有足够的了解,显然是要重点包括业务逻辑,这点上,后端开发者需要涉及数据库逻辑,是必须要跟业务逻辑打交道的(重中之重),因此,大部分的领导岗位都是后端开发者更有晋升的机会。当然,个别公司有专门的前端组长(这也不算什么),如果说前端开发者在自己工作范围之外还要腾出时间去研究业务逻辑,属实是觉得出力不讨好(因为这样的操作需要持续很久才能看出效果),而且再怎么研究业务逻辑也不会比每时每刻跟业务逻辑打交道的后端开发者了解更多。说实在的,大部分情况下,前端在配合后端进行开发.后端需要了解业务逻辑,要跟领导和客户商量细节,露脸机会很大,在老板面前刷脸次数众多。这些都是拉开前后端程序员晋升机会差距的因素。

前端的特效视觉：

层次结构的表现

动态效果，如缩放，覆盖，滑出网页或单个视觉元素，可帮助用户理解网页信息架构。通常是通过转场和菜单来展开网页。

表现层级关系

为了展现层与层的关系，是抽屉，是打开，还是平级切换等等。让用户知道这个界面和上一个、下一个的关系。

清晰明确

动效可以清晰地表明各种数据块中间的逻辑结构，即使在数据高度饱和的情况下也能使一切从观感上有组织性。

添加了图层

在网站制作过程中加上特效，每个元素都在用户滚动页面或者是鼠标经过的地方有动态效果，就像在平面层上多出了一个动态层，这样看起来更加有层次感。

我想借此专栏发布的内容帮助那些正在入坑前端的家人们，同时作为我以后复习的笔记，希望我们可以互相帮助，共同加油！！！

1.沙漏加载特效

展示效果：

代码：

代码语言：javascript复制
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>沙漏加载动画</title>
    <style>
        body{
    /* 取消页面内外边距 */
    margin: 0;
    padding: 0;
    /* 100%窗口高度 */
    height: 100vh;
    /* 弹性布局 水平、垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 渐变背景 */
    background: linear-gradient(200deg,#eeff00,#ff7b00);
}
.loading{
    width: 86px;
    height: 196px;
    /* 相对定位 */
    position: relative;
    /* 弹性布局 */
    display: flex;
    /* 将元素垂直显示 */
    flex-direction: column;
    /* 将元素靠边对齐 */
    justify-content: space-between;
    align-items: center;
    animation: rotating 2s linear infinite;
}
/* 沙漏上下两个容器 */
.top,.bottom{
    width: 70px;
    height: 70px;
    border-style: solid;
    border-color: #ff0000;
    border-width: 4px 4px 12px 12px;
    border-radius: 50% 100% 50% 30%;
    position: relative;
    /* 这里把溢出的部分隐藏 */
    overflow: hidden;
}
.top{
    /* 旋转-45度 */
    transform: rotate(-45deg);
}
.bottom{
    /* 旋转135度 */
    transform: rotate(135deg);
}
/* 容器里的沙 */
.top::before,
.bottom::before{
    content: "";
    /* 绝对定位 */
    position: absolute;
    /* inherit表示继承父元素（这里指宽高） */
    width: inherit;
    height: inherit;
    background-color: #5809f7;
    /* 执行动画，先设置动画的参数，暂时不指定动画名称，我们在下面再来指定 */
    animation: 2s linear infinite;
}
.top::before{
    /* 通过设置圆角来改变沙的形状 */
    border-radius: 0 100% 0 0;
    /* 执行指定的动画 */
    animation-name: drop-sand;
}
.bottom::before{
    /* 通过设置圆角来改变沙的形状 */
    border-radius: 0 0 0 25%;
    /* 这里我们将下面的沙移出可视范围 */
    transform: translate(50px,-50px);
    /* 执行指定的动画 */
    animation-name: fill-sand;
}
/* 到这里我们还少了个沙子流下来的效果 */
/* 添加流下的元素 */
.loading::after{
    content: "";
    width: 5px;
    height: 96px;
    background-color: #ff0095;
    /* 绝对定位 */
    position: absolute;
    top: 20px;
    /* 执行动画：动画 时长 线性的 无限次播放 */
    animation: flow 2s linear infinite;
}

/* 接下来我们来定义动画 */
/* 落沙动画 */
@keyframes drop-sand{
    to{
        transform: translate(-50px,50px);
    }
}
/* 填沙动画 */
@keyframes fill-sand{
    to{
        transform: translate(0,0);
    }
}
/* 沙流下动画 */
@keyframes flow{
    10%,100%{
        transform: translateY(64px);
    }
}
/* 最后再来一个沙漏旋转的动画 */
@keyframes rotating{
    0%,90%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(180deg);
    }
}
    </style>
</head>

<body>
    <div class="loading">
        <span class="top"></span>
        <span class="bottom"></span>
    </div>
</body>

</html>

2.安卓手机充电加载版网页加载特效

效果展示：

代码：

代码语言：javascript复制
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>安卓手机充电版网页加载特效</title>
    <style>
        *{
    /* 初始化 取消内外边距 */
    margin: 0;
    padding: 0;
}
body{
    /* 100%窗口高度 */
    height: 100vh;
    background-color: #000;
}
.box{
    width: 800px;
    height: 100%;
    margin: 0 auto;
    /* 相对定位 */
    position: relative;
}
/* 充电百分比 */
.number{
    color: #fff;
    position: absolute;
    z-index: 1;
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    font-size: 30px;
    left: 50%;
    top: 25%;
    margin-left: -100px;
}
.contrast{
    width: 100%;
    height: 100%;
    background-color: #000;
    position: relative;
    /* 设置对比度 */
    filter: contrast(15);
    /* 指定动画：动画名 时长 线性的 无限次播放 */
    animation: hueRotate 5s linear infinite;
}
/* 变色动画 */
@keyframes hueRotate {
    0%{
        /* contrast是设置对比度，hue-rotate是颜色滤镜 通过设置度数来改变颜色 */
        filter: contrast(15) hue-rotate(0);
    }
    100%{
        filter: contrast(15) hue-rotate(360deg);
    }
}
.circle{
    width: 300px;
    height: 300px;
    position: absolute;
    top: 20%;
    left: 50%;
    margin-left: -150px;
    /* 设置模糊度，配合上面的contrast可以产生粘性效果 */
    filter: blur(8px);
    /* 执行动画 */
    animation: circleRotate 5s linear infinite;
}
/* 外圈 */
.circle::before{
    content: "";
    width: 200px;
    height: 200px;
    background-color: cyan;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 42% 38% 63% 49% / 45%;
}
/* 中心圆（黑色） */
.circle::after{
    content: "";
    width: 178px;
    height: 178px;
    background-color: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
}
/* 圆旋转动画 */
@keyframes circleRotate {
    0%{
        transform: rotate(0);
    }
    100%{
        transform: rotate(360deg);
    }
}
/* 冒泡的底座 */
.bubble-home{
    width: 100px;
    height: 40px;
    background-color: cyan;
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -50px;
    border-radius: 100px 100px 0 0;
    filter: blur(8px);
}
.bubble{
    width: 20px;
    height: 20px;
    background-color: cyan;
    border-radius: 100%;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 2;
    filter: blur(5px);
    /* 执行动画：动画名 时长 加速后减速 无限次播放 */
    animation: bubbleUp 5s ease-in-out infinite;
}
/* 接下来分别为每一个泡泡设置大小、位置、动画时长、动画延迟时间 */
.bubble:nth-child(1){
    width: 20px;
    height: 20px;
    left: 50%;
    animation-duration: 5s;
    animation-delay: 1s;
}
.bubble:nth-child(2){
    width: 22px;
    height: 22px;
    left: 49%;
    animation-duration: 4s;
    animation-delay: 2s;
}
.bubble:nth-child(3){
    width: 24px;
    height: 24px;
    left: 47%;
    animation-duration: 3s;
    animation-delay: 3s;
}
.bubble:nth-child(4){
    width: 18px;
    height: 18px;
    left: 53%;
    animation-duration: 3s;
    animation-delay: 4s;
}
.bubble:nth-child(5){
    width: 26px;
    height: 26px;
    left: 51%;
    animation-duration: 4s;
    animation-delay: 5s;
}
/* 冒泡动画 */
@keyframes bubbleUp {
    0%{
        bottom: 0;
    }
    100%{
        bottom: calc(80% - 260px);
    }
}
    </style>
</head>

<body>
    <div class="box">
        <div class="number">100%</div>
        <div class="contrast">
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble-home"></div>
            <div class="circle"></div>
        </div>
    </div>
</body>

</html>

3.水球网页加载页面特效

显示效果：

 代码：

代码语言：javascript复制
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>水球网页加载页面特效</title>
    <style>
        *{
    /* 初始化 取消页面内外边距 */
    margin: 0;
    padding: 0;
}
body{
    /* 100%窗口高度 */
    height: 100vh;
    /* 渐变背景 */
    background: linear-gradient(to bottom,#89f7fe,#66a6ff);
}
.wave{
    width: 200px;
    height: 200px;
    background-color: #2797e7;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 0 0 50px rgba(255,255,255,0.2);
    /* 加个溢出隐藏 */
    overflow: hidden;
}
.wave::before{
    content: "";
    width: 300px;
    height: 300px;
    background-color: rgba(255,255,255,0.8);
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%,-65%);
    border-radius: 40%;
    /* 执行动画：动画名称 时长 线性的 无限次播放 */
    animation: wave 5s linear infinite;
}
.wave::after{
    content: "加载中...";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%,40px);
    color: #2797e7;
}

/* 定义动画 */
@keyframes wave{
    100%{
        transform: translate(-50%,-65%) rotate(360deg);
    }
}
    </style>
</head>

<body>
    <div class="wave"></div>
</body>

</html>

4.旋转水滴网页加载特效页面

效果展示：

代码：

代码语言：javascript复制
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>旋转水滴网页加载特效页面</title>
    <style>
        *{
    /* 初始化 取消页面内外边距 */
    margin: 0;
    padding: 0;
}
body{
    /* 弹性布局 水平、垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 100%窗口高度 */
    height: 100vh;
    background-color: #222;
}
svg{
    /* 将svg标签隐藏 */
    width: 0;
    height: 0;
}
.loading{
    /* 相对定位 */
    position: relative;
    width: 200px;
    height: 200px;
    /* 使用自定义滤镜gooey */
    filter: url(#gooey);
}
.loading span{
    /* 绝对定位 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    /* 执行动画：动画名称 时长 加速后减速 无限次播放 */
    animation: animate 4s ease-in-out infinite;
    /* 动画延迟，通过var函数调用自定义属性--i，计算出要延迟的时间 */
    animation-delay: calc(0.2s * var(--i));
}
.loading span::before{
    content: "";
    position: absolute;
    top: 0;
    left: calc(50% - 20px);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(#d1f5ff,#1683ff);
    /* 这里加个阴影，效果更好 */
    box-shadow: 0 0 30px #1683ff;
}

/* 定义动画 */
@keyframes animate {
    0%{
        transform: rotate(0deg);
    }
    50%,100%{
        transform: rotate(360deg);
    }
}
    </style>
</head>

<body>
    <div class="loading">
        <!-- --i是CSS的自定义属性，通过var函数可以调用 -->
        <span style="--i:1;"></span>
        <span style="--i:2;"></span>
        <span style="--i:3;"></span>
        <span style="--i:4;"></span>
        <span style="--i:5;"></span>
        <span style="--i:6;"></span>
        <span style="--i:7;"></span>
    </div>
    <!-- 接下来我们来自定义一个滤镜 -->
    <svg>
        <!-- <filter>标签是用来定义SVG滤镜，通过id进行调用使用 -->
        <filter id="gooey">
            <!-- <feGaussianBlur>元素是用于创建模糊滤镜 -->
            <feGaussianBlur in="SourceGraphic" stdDeviation="10"></feGaussianBlur>
            <!-- <feColorMatrix>是过滤中的一种类型，使用矩阵来影响颜色的每个通道(基于RGBA)，可以将其想象成Photoshop中的通道编辑一样 -->
            <feColorMatrix values="
                1 0 0 0 0
                0 1 0 0 0
                0 0 1 0 0
                0 0 0 20 -10
            "></feColorMatrix>
        </filter>
        <!-- 到这里自定义滤镜就写好了，接下来我们对它进行调用 -->
    </svg>
</body>

</html>

5.流光圆环加载特效页面

效果展示：

 代码：

代码语言：javascript复制
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>炫彩流光圆环加载动画</title>
    <style>
        *{
    /* 初始化 取消内外边距 */
    margin: 0;
    padding: 0;
}
.container{
    width: 100%;
    /* 100%窗口高度 */
    height: 100vh;
    /* 弹性布局 水平垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 相对定位 */
    position: relative;
    background-color: #000;
}
.circle{
    /* 绝对定位 */
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /* 渐变背景 */
    background: linear-gradient(0deg,
                #2f66ff,
                #9940ff 30%,
                #ee37ff 60%,
                #ff004c 100%);
    /* 执行动画：动画名 时长 线性的 无限次播放 */
    animation: circleRotate 1s linear infinite;
}
/* 发光效果 */
.circle::before{
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /* 渐变背景 */
    background: linear-gradient(0deg,
                #2f66ff,
                #9940ff 30%,
                #ee37ff 60%,
                #ff004c 100%);
    /* 模糊 */
    filter: blur(35px);
}
/* 黑圆 */
.circle::after{
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #000;
}
span{
    color: #fff;
    position: absolute;
}

/* 定义动画 */
@keyframes circleRotate {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
    </style>
</head>

<body>
    <div class="container">
        <div class="circle"></div>
        <span>加载中</span>
    </div>
</body>

</html>

6.鼠标悬停时导航栏简约缓出效果

效果展示：

代码：

代码语言：javascript复制
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>分享按钮切换效果</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        body{
    /* 取消页面内外边距 */
    margin: 0;
    padding: 0;
    /* 100%窗口高度 */
    height: 100vh;
    /* 渐变背景 */
    background: linear-gradient(200deg,#f3e7e9,#e3eeff);
    /* 弹性布局 水平、垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
}
.share-button{
    width: 300px;
    height: 80px;
    background-color: #fff;
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    /* 溢出隐藏 */
    overflow: hidden;
    /* 加个动画过渡 */
    transition: 0.3s linear;
}
.share-button:hover{
    /* 放大1.1倍 */
    transform: scale(1.1);
}
.share-button span{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #333;
    color: #fff;
    font-size: 18px;
    text-align: center;
    line-height: 80px;
    border-radius: 40px;
    z-index: 1;
    /* 动画过渡 */
    transition: 0.6s linear;
}
.share-button:hover span{
    /* 沿X轴移动 */
    transform: translateX(-100%);
    /* 动画延迟 */
    transition-delay: 0.3s;
}
.share-button a{
    flex: 1;
    font-size: 26px;
    color: #333;
    text-align: center;
    transform: translateX(-100%);
    /* 不透明度 */
    opacity: 0;
    transition: 0.3s linear;
}
.share-button:hover a{
    opacity: 1;
    transform: translateX(0);
}
/* 接下来为每一个a元素（图标）分别设置动画延迟 */
/* :nth-of-type(n)选择器是匹配属于父元素的特定类型的第n个子元素的每个元素 */
.share-button a:nth-of-type(1){
    transition-delay: 1s;
}
.share-button a:nth-of-type(2){
    transition-delay: 0.8s;
}
.share-button a:nth-of-type(3){
    transition-delay: 0.6s;
}
.share-button a:nth-of-type(4){
    transition-delay: 0.4s;
}
    </style>
</head>

<body>
    <div class="share-button">
        <span><i class="fa fa-share-alt" aria-hidden="true"></i> 去分享</span>
        <a href="#"><i class="fa fa-qq" aria-hidden="true"></i></a>
        <a href="#"><i class="fa fa-weixin" aria-hidden="true"></i></a>
        <a href="#"><i class="fa fa-weibo" aria-hidden="true"></i></a>
        <a href="#"><i class="fa fa-renren" aria-hidden="true"></i></a>
    </div>
</body>

</html>

 7.鼠标悬停时毛玻璃导航栏光闪效果

效果展示：

 代码：

代码语言：javascript复制
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>鼠标悬停时毛玻璃导航栏光闪效果</title>
    <style>
        *{
    /* 初始化 取消页面元素的内外边距 */
    margin: 0;
    padding: 0;
    /* 这个是告诉浏览器：你想要设置的边框和内边距的值是包含在总宽高内的 */
    box-sizing: border-box;
}
body{
    /* 弹性布局 水平、垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 100%窗口高度 */
    height: 100vh;
    /* 相对定位 */
    position: relative;
    /* 渐变背景 */
    background: linear-gradient(200deg,#5e2b76,#415703);
}
.container{
    /* 弹性布局 */
    display: flex;
    /* 允许换行 */
    flex-wrap: wrap;
    /* 将元素靠边对齐 */
    justify-content: space-around;
}
.container .btn{
    position: relative;
    width: 200px;
    height: 60px;
    margin: 30px;
}
.container .btn a{
    /* 绝对定位 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 透明度为0.05的白色背景 */
    background: rgba(255,255,255,0.05);
    /* 阴影 */
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    /* 上下边框 */
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    /* 圆角 */
    border-radius: 30px;
    color: #fff;
    z-index: 1;
    font-weight: 400;
    /* 字间距 */
    letter-spacing: 1px;
    /* 去下划线 */
    text-decoration: none;
    /* 动画过渡 */
    transition: 0.5s;
    /* 溢出隐藏 */
    overflow: hidden;
    /* 背景模糊 */
    backdrop-filter: blur(15px);
}
.container .btn:hover a{
    letter-spacing: 5px;
}
/* 制作扫光效果 */
.container .btn a::before{
    content: "";
    /* 绝对定位 */
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    /* 渐变背景 透明到白色 */
    background: linear-gradient(to right,transparent,rgba(255,255,255,0.15));
    /* 沿X轴倾斜45度，向右平移0像素 */
    transform: skewX(45deg) translateX(0);
    transition: 0.5s;
}
.container .btn:hover a::before{
    /* 沿X轴倾斜45度，向右平移200% */
    transform: skewX(45deg) translateX(200%);
}
/* 制作按钮上下两个发光层 */
.container .btn::before,
.container .btn::after{
    content: "";
    /* 绝对定位，横向居中 */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 10px;
    /* 自定义颜色属性--c, 可通过var函数调用 */
    /* --c: gold; */
    background: var(--c);
    border-radius: 5px;
    box-shadow: 
        0 0 5px var(--c),
        0 0 15px var(--c),
        0 0 30px var(--c),
        0 0 60px var(--c)
    ;
    transition: 0.5s;
}
.container .btn::before{
    bottom: -5px;
}
.container .btn::after{
    top: -5px;
}
.container .btn:hover::before,
.container .btn:hover::after{
    height: 50%;
    width: 80%;
    border-radius: 15px;
    transition-delay: 0.3s;
}
.container .btn:hover::before{
    bottom: 0;
}
.container .btn:hover::after{
    top: 0;
}
/* 分别设置自定义颜色属性--c */
.container .btn:nth-child(1)::before,
.container .btn:nth-child(1)::after{
    --c: #dbe912;
}
.container .btn:nth-child(2)::before,
.container .btn:nth-child(2)::after{
    --c: #aa00ff;
}
.container .btn:nth-child(3)::before,
.container .btn:nth-child(3)::after{
    --c: #33ff00;
}
    </style>
</head>

<body>
    <div class="container">
        <div class="btn"><a href="#">点赞</a></div>
        <div class="btn"><a href="#">关注</a></div>
        <div class="btn"><a href="#">评论</a></div>
    </div>
</body>

</html>

8.鼠标悬停时导航栏图标实现3d并分层效果

效果展示：

 代码：

代码语言：javascript复制
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>3D分层按钮的悬停效果</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        *{
    /* 初始化 取消内外边距 */
    margin: 0;
    padding: 0;
    /* 设置的边框和内边距的值是包含在总宽高内的 */
    box-sizing: border-box;
}
body{
    /* 100%窗口高度 */
    height: 100vh;
    /* 弹性布局 水平垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 渐变背景 */
    background: linear-gradient(200deg,#29323c,#485563);
}
.icon-box{
    /* 弹性布局 水平排列 */
    display: flex;
    flex-direction: row;
}
.icon-box a{
    color: #fff;
    margin: 0 30px;
    text-decoration: none;
    display: block;
    /* 相对定位 */
    position: relative;
}
.icon-box a .layer{
    width: 70px;
    height: 70px;
    /* 动画过渡 */
    transition: 0.3s;
}
.icon-box a .layer i{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 通过var函数调用自定义属性--c */
    border: 1px solid var(--c);
    border-radius: 6px;
    transition: 0.3s;
}
.icon-box a .layer i.fa{
    font-size: 35px;
    text-align: center;
    line-height: 70px;
    color: var(--c);
}
.icon-box a .text{
    /* 绝对定位 */
    position: absolute;
    bottom: 0;
    opacity: 0;
    width: 100%;
    text-align: center;
    color: var(--c);
    /* 动画过渡 */
    transition: 0.3s;
}
.icon-box a:hover .text{
    /* 鼠标移入文本出现 */
    bottom: -35px;
    opacity: 1;
}
.icon-box a:hover .layer{
    /* 鼠标移入，该元素旋转-35度并倾斜20度 */
    transform: rotate(-35deg) skew(20deg);
}
/* 鼠标移入，设置图标外的每一层边框的样式（不透明度 位置偏移） */
.icon-box a:hover .layer i:nth-child(1){
    opacity: 0.2;
    transform: translate(0,0);
}
.icon-box a:hover .layer i:nth-child(2){
    opacity: 0.4;
    transform: translate(5px,-5px);
}
.icon-box a:hover .layer i:nth-child(3){
    opacity: 0.6;
    transform: translate(10px,-10px);
}
.icon-box a:hover .layer i:nth-child(4){
    opacity: 0.8;
    transform: translate(15px,-15px);
}
.icon-box a:hover .layer i:nth-child(5){
    opacity: 1;
    transform: translate(20px,-20px);
}
/* 鼠标移入，设置每一层边框的阴影样式 */
.icon-box a:hover .layer i{
    box-shadow: -1px 1px 3px var(--c);
}
/* 接下来为每一个按钮设置不同颜色 */
.icon-box a:nth-child(1) .layer i,
.icon-box a:nth-child(1) .text{
    /* --c是自定义属性，这里为颜色值，可通过var函数进行调用 */
    --c: #f52112;
}
.icon-box a:nth-child(2) .layer i,
.icon-box a:nth-child(2) .text{
    --c: #2aae67;
}
.icon-box a:nth-child(3) .layer i,
.icon-box a:nth-child(3) .text{
    --c: #e79115;
}
.icon-box a:nth-child(4) .layer i,
.icon-box a:nth-child(4) .text{
    --c: #20fd20;
}
.icon-box a:nth-child(5) .layer i,
.icon-box a:nth-child(5) .text{
    --c: #c02dc5;
}
    </style>
</head>

<body>
    <div class="icon-box">
        <a href="#">
            <div class="layer">
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i class="fa fa-qq" aria-hidden="true"></i>
            </div>
            <div class="text">QQ</div>
        </a>
        <a href="#">
            <div class="layer">
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i class="fa fa-weixin" aria-hidden="true"></i>
            </div>
            <div class="text">微信</div>
        </a>
        <a href="#">
            <div class="layer">
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i class="fa fa-weibo" aria-hidden="true"></i>
            </div>
            <div class="text">微博</div>
        </a>
        <a href="#">
            <div class="layer">
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i class="fa fa-renren" aria-hidden="true"></i>
            </div>
            <div class="text">人人网</div>
        </a>
        <a href="#">
            <div class="layer">
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i class="fa fa-twitter" aria-hidden="true"></i>
            </div>
            <div class="text">推特</div>
        </a>
    </div>
</body>

</html>

9.鼠标悬停时边框滑动效果

效果显示：

 代码：

代码语言：javascript复制
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>边框滑动按钮的悬停效果</title>
    <style>
        *{
    /* 初始化 取消页面元素的内外边距 */
    margin: 0;
    padding: 0;
}
body{
    /* 100%窗口高度 */
    height: 100vh;
    /* 弹性布局 水平、垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 自定义属性 背景颜色 可通过var函数调用 */
    --bgc: #353b48;
    background-color: var(--bgc);
}
.container{
    /* 弹性布局 */
    display: flex;
    /* 水平排列 */
    flex-direction: row;
    /* 允许换行 */
    flex-wrap: wrap;
    justify-content: space-around;
    width: 500px;
}
.container .btn{
    width: 200px;
    height: 60px;
    background: none;
    border: 4px solid;
    color: var(--c);
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    margin: 20px;
    /* 相对定位 */
    position: relative;
}
.container .btn::before,
.container .btn::after{
    content: "";
    /* 绝对定位 */
    position: absolute;
    width: 14px;
    height: 4px;
    /* 颜色与背景色同色 */
    background-color: var(--bgc);
    /* 沿X轴倾斜30度 */
    transform: skewX(30deg);
    /* 动画过渡 */
    transition: 0.4s linear;
}
.container .btn::before{
    top: -4px;
    left: 10%;
}
.container .btn::after{
    bottom: -4px;
    right: 10%;
}
.container .btn:hover::before{
    left: 80%;
}
.container .btn:hover::after{
    right: 80%;
}
/* 接下来设置每一个按钮的自定义颜色属性--c */
.container .btn:nth-child(1){
    --c: #4ad3e2;
}
.container .btn:nth-child(2){
    --c: #93edd4;
}
.container .btn:nth-child(3){
    --c: #f9cb8f;
}
.container .btn:nth-child(4){
    --c: #ffb1a3;
}
    </style>
</head>

<body>
    <div class="container">
        <button class="btn">点赞</button>
        <button class="btn">关注</button>
        <button class="btn">评论</button>
        <button class="btn">谢谢</button>
    </div>
</body>

</html>

10.导航栏文字及图片撕裂效果显示

效果显示：

代码：

代码语言：javascript复制
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>文字裂开效果</title>
    <style>
        *{
    /* 初始化 取消页面内外边距 */
    margin: 0;
    padding: 0;
}
body{
    /* 100%窗口高度 */
    height: 100vh;
    background-color: #000;
    /* 弹性布局 水平、垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
}
section{
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
section .item{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
section .item .a{
    color: #fff;
    font-style: italic;
    font-weight: bold;
    font-size: 10vw;
    top: 0;
    opacity: 1;
    transition: top 0.5s,opacity 0.5s;
}
/* 切割文字 */
section .item .a:nth-child(1){
    position: absolute;
    clip-path: polygon(0% 0%,100% 0%,100% 51%,0% 51%);
}
section .item .a:nth-child(2){
    position: relative;
    clip-path: polygon(0% 50%,100% 50%,100% 100%,0% 100%);
}
/* 触发景深效果 */
section:hover .item{
    filter: blur(10px);
    transform: scale(0.8);
    transition: filter 0.5s,transform 0.5s;
}
/* 对应的取消景深效果 */
section .item:hover{
    filter: blur(0px);
    transform: scale(1);
    transition: filter 0.5s,transform 0.5s;
}
/* 上半部分上移并变淡 */
section .item:hover .a:nth-child(1){
    top: -40px;
    opacity: 0.5;
    transition: top 0.5s,opacity 0.5s;
}
/* 下半部分下移并变淡 */
section .item:hover .a:nth-child(2){
    top: 40px;
    opacity: 0.5;
    transition: top 0.5s,opacity 0.5s;
}
/* 裂开后显示的文字 */
section .item a{
    position: absolute;
    color: #fff;
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.5s;
}
section .item a:hover{
    text-decoration: underline;
}
section .item:hover a{
    opacity: 1;
    transition: opacity 0.5s;
}
    </style>
</head>

<body>
    <section>
        <div class="item">
            <div class="a">Lqj.</div>
            <div class="a">Lqj.</div>
            <a href="#">评论</a>
        </div>
        <div class="item">
            <div class="a">Lqj.</div>
            <div class="a">Lqj.</div>
            <a href="#">关注</a>
        </div>
        <div class="item">
            <div class="a">Lqj.</div>
            <div class="a">Lqj.</div>
            <a href="#">点赞</a>
        </div>
    </section>
</body>

</html>
网站 腾讯云开发者社区 html

0 人点赞