每日分享html之1个搜索、2个加载、1个导航栏、1个性别选项卡

淼学派对

已于 2022-11-30 23:42:52 修改

阅读量289

点赞数 9

分类专栏：前端文章标签：前端 html

于 2022-10-02 22:10:15 首次发布

本文链接：https://blog.csdn.net/lbcyllqj/article/details/127146680

版权

前端专栏收录该内容

24 篇文章 17 订阅

订阅专栏

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

欢迎关注b站：小淼前端

有更多的视频讲解+源代码可领取哦~

欢迎关注b站：小淼前端

有更多的视频讲解+源代码可领取哦~

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

欢迎关注b站：小淼前端

有更多的视频讲解+源代码可领取哦~

欢迎关注b站：小淼前端

有更多的视频讲解+源代码可领取哦~

前端是做什么的？

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

前端的特效视觉：

层次结构的表现

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

表现层级关系

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

清晰明确

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

添加了图层

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

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

1.点击全屏搜索效果

代码：

<!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>
        *{
    /* 初始化 */
    margin: 0;
    padding: 0;
}
body{
    /* 100%窗口高度 */
    height: 100vh;
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
}
/* 搜索按钮 */
.search-btn{
    /* 相对定位 */
    position: relative;
    z-index: 1;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    /* 鼠标移入变小手 */
    cursor: pointer;
}
.search-btn .fa{
    color: #fff;
    font-size: 22px;
}
/* 关闭按钮 */
.close-btn{
    /* 绝对定位 */
    position: absolute;
    top: 25px;
    right: 25px;
    z-index: 1;
    font-size: 25px;
    color: #fff;
    cursor: pointer;
    display: none;
}
.container{
    /* 固定定位 */
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 渐变背景 */
    background: linear-gradient(200deg,#42fd09,#07b6e2);
    /* 将元素剪切为一个圆形(30px表示圆的半径, 50% 50%表示圆心的位置) */
    clip-path: circle(30px at 50% 50%);
    /* 设置过渡 */
    transition: 0.4s;
}
.search-box{
    /* 默认宽度为0(隐藏) */
    width: 0;
    height: 50px;
    display: flex;
    border-bottom: 3px solid #fff;
    /* 溢出隐藏 */
    overflow: hidden;
    /* 设置过渡 */
    transition: 0.3s;
}
.search-box input{
    width: 100%;
    height: 50px;
    border: none;
    background: none;
    outline: none;
    color: #fff;
    font-size: 22px;
    text-indent: 8px;
}
.search-box input::placeholder{
    color: rgba(255,255,255,0.7);
}
.search-box .fa{
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
}
#search_btn:checked ~ .search-btn{
    display: none;
}
#search_btn:checked ~ .close-btn{
    display: block;
}
#search_btn:checked ~ .container{
    clip-path: circle(100%);
}
#search_btn:checked ~ .container .search-box{
    width: 400px;
}
    </style>
</head>

<body>
    <input type="checkbox" id="search_btn" hidden>
    <label for="search_btn" class="search-btn">
        <i class="fa fa-search" aria-hidden="true"></i>
    </label>
    <label for="search_btn" class="close-btn">
        <i class="fa fa-close" aria-hidden="true"></i>
    </label>
    <div class="container">
        <div class="search-box">
            <input type="text" placeholder="请输入..">
            <i class="fa fa-search" aria-hidden="true"></i>
        </div>
    </div>
</body>

</html>

2.四色球加载效果

代码：

<!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;
    background-color: #222;
}
.loader{
    /* 相对定位 */
    position: relative;
    width: 250px;
    height: 250px;
    /* 默认旋转45度 */
    transform: rotate(45deg);
    /* 执行动画：动画名 时长 线性的 无限次播放 */
    animation: roll 2.5s linear infinite;
}
.loader span{
    position: absolute;
    width: 100%;
    height: 100%;
    /* 通过var函数获取自定义属性--i，计算每一个span元素的旋转角度 */
    transform: rotate(calc(90deg * var(--i)));
}
.loader span::before{
    content: "";
    width: 70px;
    height: 70px;
    /* 调用自定义属性--c，设置背景色 */
    background-color: var(--c);
    border-radius: 50%;
    position: absolute;
    /* 默认都居中 */
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    /* 执行动画：动画名 时长 贝塞尔曲线 无限次播放 */
    animation: move 2.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
}

/* 定义动画 */
@keyframes move {
    50%{
        left: 0;
        box-shadow: 0 0 5px var(--c),
        0 0 10px var(--c),
        0 0 20px var(--c);
    }
}
@keyframes roll {
    to{
        transform: rotate(360deg);
    }
}
    </style>
</head>

<body>
    <div class="loader">
        <!-- --i、--c为自定义属性，CSS中可通过var函数对其调用 -->
        <span style="--i:1;--c:#2ecc71;"></span>
        <span style="--i:2;--c:#3498db;"></span>
        <span style="--i:3;--c:#f1c40f;"></span>
        <span style="--i:4;--c:#e74c3c;"></span>
    </div>
</body>

</html>

3. 鼠标悬停后导航栏反转效果

代码：

<!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>
        *{
    /* 初始化 */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    /* 100%窗口高度 */
    min-height: 100vh;
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f11c1c;
}
.container{
    /* 弹性布局 允许换行 水平居中 */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.box{
    width: 350px;
    margin: 10px;
    text-align: center;
    /* 相对定位 */
    position: relative;
    /* 开启3D效果 */
    transform-style: preserve-3d;
    /* 设置视距 */
    perspective: 3000px;
}
.box .front{
    background-color: rgb(13, 125, 253);
    width: 100%;
    height: 220px;
    /* 弹性布局 垂直排列 垂直居中 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 阴影 */
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    /* 设置过渡 */
    transition: 0.5s ease;
}
.box .front .icon{
    height: 80px;
}
.box .front .icon i,
.box .front span{
    /* 渐变背景 */
    background: linear-gradient(220deg,#02dbb0,#007adf);
    /* 以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉 */
    -webkit-background-clip: text;
    /* 将文字透明镂空 */
    -webkit-text-fill-color: transparent;
}
.box .front .icon i{
    font-size: 65px;
    font-weight: 900;
}
.box .front span,
.box .back span{
    font-size: 22px;
    font-weight: 600;
    /* 大写 */
    text-transform: uppercase;
}
.box .back{
    /* 绝对定位 */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 220px;
    background: linear-gradient(220deg,#02dbb0,#007adf);
    padding: 30px;
    color: #fff;
    /* 默认不透明度为0 */
    opacity: 0;
    /* 默认位置下移并沿Y轴旋转-90度 */
    transform: translateY(110px) rotateX(-90deg);
    /* 设置过渡 */
    transition: 0.5s ease;
}
.box .back p{
    margin-top: 12px;
    /* 文本两端对齐 */
    text-align: justify;
    line-height: 23px;
}
/* 鼠标移入卡片，两个面做出相应的变化 */
.box:hover .front{
    opacity: 0;
    transform: translateY(-110px) rotateX(90deg);
}
.box:hover .back{
    opacity: 1;
    transform: translateY(0) rotateX(0);
}
    </style>
</head>

<body>
    <div class="container">
        <div class="box">
            <div class="front">
                <div class="icon">
                    <i class="fa fa-apple" aria-hidden="true"></i>
                </div>
                <span>apple</span>
            </div>
            <div class="back">
                <span>apple</span>
                <p>苹果公司（Apple Inc. ）是美国一家高科技公司。由史蒂夫·乔布斯、斯蒂夫·盖瑞·沃兹尼亚克和罗纳德·杰拉尔德·韦恩（Ron Wayne）等人于1976年4月1日创立。</p>
            </div>
        </div>
        <div class="box">
            <div class="front">
                <div class="icon">
                    <i class="fa fa-google" aria-hidden="true"></i>
                </div>
                <span>google</span>
            </div>
            <div class="back">
                <span>google</span>
                <p>谷歌公司（Google Inc.）成立于1998年9月4日，由拉里·佩奇和谢尔盖·布林共同创建，被公认为全球最大的搜索引擎公司。</p>
            </div>
        </div>
        <div class="box">
            <div class="front">
                <div class="icon">
                    <i class="fa fa-windows" aria-hidden="true"></i>
                </div>
                <span>microsoft</span>
            </div>
            <div class="back">
                <span>microsoft</span>
                <p>微软（Microsoft）是一家美国跨国科技企业，由比尔·盖茨和保罗·艾伦于1975年4月4日创立。公司总部设立在华盛顿州雷德蒙德（Redmond，邻近西雅图）。</p>
            </div>
        </div>
    </div>
</body>

</html>

4.大小圆圈加载效果

代码：

<!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;
    background-color: #333;
}
.loader{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.loader .box{
    /* 相对定位 */
    position: relative;
    width: 200px;
    height: 200px;
    /* 执行动画 */
    animation: rotateBox 10s linear infinite;
}
.loader .box .circle{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f5e866;
    border-radius: 50%;
    /* 执行动画：动画名 时长 线性的 无限次播放 */
    animation: animate 5s linear infinite;
}
.loader .box .circle:nth-child(2){
    background-color: #a08fd5;
    /* 设置第二个圆的动画延迟时间 */
    animation-delay: -2.5s;
}
.loader span{
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    margin-top: 30px;
    letter-spacing: 4px;
}

/* 定义动画 */
@keyframes animate {
    0%{
        transform: scale(1);
        transform-origin: left;
    }
    50%{
        transform: scale(0);
        transform-origin: left;
    }
    50.01%{
        transform: scale(0);
        transform-origin: right;
    }
    100%{
        transform: scale(1);
        transform-origin: right;
    }
}
/* 加个旋转动画 */
@keyframes rotateBox {
    to{
        transform: rotate(360deg);
    }
}
    </style>
</head>

<body>
    <div class="loader">
        <div class="box">
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
        <span>Loading...</span>
    </div>
</body>

</html>

5.鼠标悬停后选择性别卡片效果

代码：

<!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%窗口高度 */
    min-height: 100vh;
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #333;
}
.container{
    display: flex;
}
.container .box{
    /* 相对定位 */
    position: relative;
    /* 弹性布局 水平居中 */
    display: flex;
    justify-content: center;
    width: 320px;
    height: 400px;
    /* 自定义属性, 可通过var函数对其调用 */
    --c1: #c7cc97;
    --c2: #e6a28c;
    /* 条纹背景 */
    background: linear-gradient(45deg,var(--c1) 25%,#444 25%,#444 50%,var(--c1) 50%,var(--c1) 75%,#444 75%,#444 100%);
    background-size: 40px 40px;
    border-radius: 20px;
    margin: 0 20px;
    /* 灰度滤镜 */
    filter: grayscale(1);
    /* 设置灰度滤镜的过渡时间为1秒 */
    transition: filter 1s;
    /* 执行动画: 动画名 时长 线性的 无限次播放 */
    animation: animateBg 0.5s linear infinite;
    /* 默认动画状态为暂停 */
    animation-play-state: paused;
}
/* 改变第二个卡片的背景条纹颜色 */
.container .box:nth-child(2){
    background: linear-gradient(135deg,var(--c2) 25%,#444 25%,#444 50%,var(--c2) 50%,var(--c2) 75%,#444 75%,#444 100%);
    background-size: 40px 40px;
}
.container .box img{
    height: 90%;
    /* 绝对定位 */
    position: absolute;
    bottom: 0;
    /* 设置过渡 */
    transition: 0.5s;
}
.container .box:hover img{
    /* 鼠标移入, 图片变大 */
    height: 480px;
}
.container .box:hover{
    /* 鼠标移入, 灰度无效, 动画播放 */
    filter: grayscale(0);
    animation-play-state: running;
}

/* 定义动画 */
@keyframes animateBg {
    0%{
        background-position: 0;
    }
    100%{
        background-position: 40px;
    }
}
    </style>
</head>

<body>
    <div class="container">
        <div class="box"><img src="male.png" alt=""></div>
        <div class="box"><img src="female.png" alt=""></div>
    </div>
</body>

</html>