每日分享html之2个悬停、2个加载、1个button

淼学派对

发布于 2022-11-20 13:19:14

1.1K00

代码可运行

文章被收录于专栏：云开发小程序1云开发小程序1

运行总次数：0

代码可运行

前端是做什么的？

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

前端的特效视觉：

层次结构的表现

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

表现层级关系

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

清晰明确

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

添加了图层

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

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

1.纯CSS实现翻书动画

代码：

<!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>纯CSS实现翻书动画</title>
    <style>
        *{
    /* 初始化 */
    margin: 0;
    padding: 0;
}
body{
    /* 100%窗口高度 */
    height: 100vh;
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #dfb88e;
}
.book{
    width: 300px;
    height: 400px;
    background-color: #fff;
    /* 开启3D效果 */
    transform-style: preserve-3d;
    /* 设置视距 */
    perspective: 2000px;
    /* 设置阴影 */
    box-shadow: inset 300px 0 30px rgba(0,0,0,0.2),
    0 10px 100px rgba(0,0,0,0.3);
    /* 动画过渡 */
    transition: 1s;
}
/* 鼠标移入，阴影变化+旋转 */
.book:hover{
    transform: rotate(-10deg);
    box-shadow: inset 20px 0 30px rgba(0,0,0,0.2),
    0 10px 100px rgba(0,0,0,0.3);
}
.book::before{
    content: "";
    /* 绝对定位 */
    position: absolute;
    left: 0;
    top: -5px;
    width: 100%;
    height: 5px;
    background-color: #0d2a50;
    /* 设置旋转元素的基点位置 */
    transform-origin: bottom;
    /* 沿X轴倾斜-45度 */
    transform: skewX(-45deg);
}
.book::after{
    content: "";
    position: absolute;
    top: 0;
    right: -5px;
    width: 5px;
    height: 100%;
    background-color: #3d5a83;
    transform-origin: left;
    transform: skewY(-45deg);
}
/* 封面 */
.book .cover{
    width: 100%;
    height: 100%;
    background-color: #2a3f5c;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 相对定位 */
    position: relative;
    transform-origin: left;
    transition: 1s;
}
.book .cover span{
    position: absolute;
    right: 30px;
    top: 30px;
    background-color: #fff;
    font-size: 40px;
    font-family: "隶书";
    /* 竖向文本 */
    writing-mode: vertical-lr;
    padding: 10px 5px 5px 5px;
    /* 字间距 */
    letter-spacing: 5px;
}
.book:hover .cover{
    transform: rotateY(-135deg);
}
.book .content{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    font-size: 40px;
    font-family: "隶书";
    line-height: 50px;
    letter-spacing: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
    </style>
</head>

<body>
    <div class="book">
        <div class="cover">
            <span>前端宝典</span>
        </div>
        <div class="content">
            <p>CSDN</p>
            <p>lqj_本人</p>
        </div>
    </div>
</body>

</html>

2.莫比乌斯环loading动画

代码：

<!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>莫比乌斯环loading动画</title>
    <style>
        *{
    /* 初始化 */
    margin: 0;
    padding: 0;
}
body{
    /* 100%窗口高度 */
    height: 100vh;
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #333;
}
.loader{
    display: flex;
    justify-content: center;
    align-items: center;
    /* 相对定位 */
    position: relative;
    left: 7.5px;
}
.loader::before,
.loader::after{
    content: "";
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 15px solid #57606f;
    box-sizing: border-box;
    position: relative;
    z-index: -1;
}
.loader::after{
    left: -15px;
}
.loader div{
    width: 150px;
    height: 150px;
    /* 绝对定位 */
    position: absolute;
    left: 0;
    /* 利用clip-path的方式遮盖掉下半部分 */
    clip-path: polygon(0 0,100% 0,100% 50%,0 50%);
}
.loader div div{
    width: 150px;
    height: 150px;
    box-sizing: border-box;
    border-style: solid;
    border-width: 15px;
    border-color: #00ff40 #00ffd5 transparent transparent;
    border-radius: 50%;
    /* 默认旋转135度，让圆环处于遮盖处 */
    transform: rotate(135deg);
    animation: roll 4s linear infinite;
}
.lb{
    transform: scale(-1,-1);
}
.rt{
    transform: translateX(calc(100% - 15px)) scale(-1,1);
}
.rb{
    transform: translateX(calc(100% - 15px)) scale(1,-1);
}
/* 接下来设置动画延迟 */
.loader .rb div{
    animation-delay: 1s;
}
.loader .rt div{
    animation-delay: 2s;
}
.loader .lb div{
    animation-delay: 3s;
}

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

<body>
    <div class="loader">
        <div class="lt">
            <div></div>
        </div>
        <div class="lb">
            <div></div>
        </div>
        <div class="rt">
            <div></div>
        </div>
        <div class="rb">
            <div></div>
        </div>
    </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>
    <style>
        /* 引入网络字体：Poppins */
@import url("http://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap");

*{
    /* 初始化 */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* 设置字体 */
    font-family: "Poppins";
}
body{
    /* 100%窗口高度 */
    min-height: 100vh;
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #161626;
}
/* 给背景增加两个渐变圆 */
body::before{
    content: "";
    /* 绝对定位 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 渐变背景 */
    background: linear-gradient(#2193b0,#6dd5ed);
    /* 将元素剪切微一个圆形【30%表示圆的直径】【right 70%表示圆心位置】 */
    clip-path: circle(30% at right 70%);
}
body::after{
    content: "";
    /* 绝对定位 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 渐变背景 */
    background: linear-gradient(#ee9ca7,#ffdde1);
    /* 将元素剪切微一个圆形【30%表示圆的直径】【right 70%表示圆心位置】 */
    clip-path: circle(20% at 10% 10%);
}
.container{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    z-index: 1;
}
.container .card{
    /* 相对定位 */
    position: relative;
    width: 280px;
    height: 400px;
    background-color: rgba(255,255,255,0.1);
    margin: 30px;
    border-radius: 15px;
    /* 阴影 */
    box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
    /* 溢出隐藏 */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,0.5);
    border-left: 1px solid rgba(255,255,255,0.5);
    /* 背景模糊 */
    backdrop-filter: blur(5px);
}
.container .card .content{
    padding: 20px;
    text-align: center;
    /* 默认下移+隐藏 */
    transform: translateY(100px);
    opacity: 0;
    transition: 0.5s;
}
.container .card:hover .content{
    /* 鼠标移入，上移+显示 */
    transform: translateY(0);
    opacity: 1;
}
.container .card .content h2{
    position: absolute;
    top: -80px;
    right: 25px;
    font-size: 128px;
    color: rgba(255,255,255,0.05);
}
.container .card .content h3{
    font-size: 28px;
    color: #fff;
}
.container .card .content p{
    font-size: 16px;
    color: #fff;
    font-weight: 300;
    margin: 10px 0 15px 0;
}
.container .card .content a{
    position: relative;
    display: inline-block;
    padding: 8px 20px;
    margin-top: 15px;
    background-color: #fff;
    color: #000;
    text-decoration: none;
    border-radius: 20px;
    font-weight: 500;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
/* 这里要让玻璃效果更加逼真，需要用到一个JS库：vanilla-tilt.js */
/* 我事先下载好了，需要这个JS库的可以找我拿 */
/* 看操作~ */
    </style>
</head>

<body>
    <div class="container">
        <div class="card">
            <div class="content">
                <h2>01</h2>
                <h3>Card One</h3>
                <p>Realistic glass card hover effect, realistic glass card hover effect, realistic glass card hover effect.</p>
                <a href="#">Read More</a>
            </div>
        </div>
        <div class="card">
            <div class="content">
                <h2>02</h2>
                <h3>Card Two</h3>
                <p>Realistic glass card hover effect, realistic glass card hover effect, realistic glass card hover effect.</p>
                <a href="#">Read More</a>
            </div>
        </div>
        <div class="card">
            <div class="content">
                <h2>03</h2>
                <h3>Card Three</h3>
                <p>Realistic glass card hover effect, realistic glass card hover effect, realistic glass card hover effect, realistic glass card hover effect.</p>
                <a href="#">Read More</a>
            </div>
        </div>
    </div>
    <script src="../js/vanilla-tilt.js"></script>
    <script>
        // vanilla-tilt.js是一个平滑的3D倾斜JS库，具体参数配置度娘可查到
        VanillaTilt.init(document.querySelectorAll(".card"),{
            max: 15,  //最大倾斜度数
            speed: 400,  //倾斜转换的速度
            glare: true,  //是否开启眩光效果
            "max-glare": 1  //最大眩光的不透明度
        })
    </script>
</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%窗口高度 */
    min-height: 100vh;
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    /* 自定义属性，可通过var函数对其调用 */
    --c: gold;
}
.loader{
    /* 弹性布局 垂直排列 居中 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 执行颜色改变动画 */
    animation: changeColor 5s linear infinite;
}
.dot-box{
    display: flex;
}
.dot-box .dot{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    /* 通过var函数调用自定义属性--c，设置颜色 */
    background-color: var(--c);
    margin: 20px 10px;
    /* 阴影（发光效果） */
    box-shadow: 0 0 10px var(--c),
    0 0 20px var(--c),
    0 0 40px var(--c),
    0 0 60px var(--c),
    0 0 80px var(--c),
    0 0 100px var(--c);
    /* 默认缩放为0.1倍 */
    transform: scale(0.1);
    /* 设置动画：动画名 时长 线性 无限播放 */
    animation: dotAnimate 2s linear infinite;
    /* 设置每一个圆点的动画延迟时间 */
    animation-delay: calc(0.1s * var(--i));
}
.loader p{
    color: var(--c);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 5px;
}
.dot-box:nth-child(3) .dot{
    /* 设置下面一排圆点的动画延迟时间 */
    animation-delay: calc(-0.1s * var(--i));
}

/* 定义动画 */
/* 圆点的动画 */
@keyframes dotAnimate {
    0%{
        /* 设置缩放 */
        transform: scale(0.1);
    }
    10%{
        transform: scale(1);
    }
    50%,100%{
        transform: scale(0.1);
    }
}
/* 颜色改变的动画 */
@keyframes changeColor {
    0%{
        /* 颜色滤镜 */
        filter: hue-rotate(0deg);
    }
    100%{
        filter: hue-rotate(360deg);
    }
}
    </style>
</head>

<body>
    <div class="loader">
        <div class="dot-box">
            <div class="dot" style="--i:0;"></div>
            <div class="dot" style="--i:1;"></div>
            <div class="dot" style="--i:2;"></div>
            <div class="dot" style="--i:3;"></div>
            <div class="dot" style="--i:4;"></div>
            <div class="dot" style="--i:5;"></div>
            <div class="dot" style="--i:6;"></div>
            <div class="dot" style="--i:7;"></div>
            <div class="dot" style="--i:8;"></div>
            <div class="dot" style="--i:9;"></div>
        </div>
        <p>拼命加载中...</p>
        <div class="dot-box">
            <div class="dot" style="--i:0;"></div>
            <div class="dot" style="--i:1;"></div>
            <div class="dot" style="--i:2;"></div>
            <div class="dot" style="--i:3;"></div>
            <div class="dot" style="--i:4;"></div>
            <div class="dot" style="--i:5;"></div>
            <div class="dot" style="--i:6;"></div>
            <div class="dot" style="--i:7;"></div>
            <div class="dot" style="--i:8;"></div>
            <div class="dot" style="--i:9;"></div>
        </div>
    </div>
</body>

</html>

5.石砖墙效果button

代码：

<!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;
    /* 垂直排列元素 */
    flex-direction: column;
    background-color: #333;
}
button{
    margin: 10px;
    width: 280px;
    height: 90px;
    font-size: 35px;
    font-weight: bold;
    background: transparent;
    border: 1px solid transparent;
    /* 相对定位 */
    position: relative;
    /* 设置内阴影 */
    box-shadow: inset 1px 1px 2px #000,
    inset -1px -1px 2px #808080;
    color: #333;
    /* 文本阴影 */
    text-shadow: 1px 1px 0 #808080;
    overflow: hidden;
    /* 加个过渡 */
    transition: 0.3s linear 0.15s;
}
/* 分别为各个按钮设置自定义属性--c（颜色） */
button:nth-child(1){
    --c:#ff4757;
}
button:nth-child(2){
    --c:#ffa502;
}
button:nth-child(3){
    --c:#2ed573;
}
button:nth-child(4){
    --c:#1e90ff;
}
/* 射灯 */
button::before{
    content: "";
    /* 绝对定位 */
    position: absolute;
    width: 100px;
    height: 8px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    /* background: var(--c); */
    border-radius: 0 0 50% 50%;
    /* 模糊滤镜 */
    filter: blur(5px);
    /* 设置过渡 */
    transition: 0.3s;
}
button:hover::before{
    /* 通过var函数调用自定义属性--c，设置射灯颜色 */
    background: var(--c);
    box-shadow: 0 0 10px var(--c),
    0 0 20px var(--c),
    0 0 30px var(--c),
    0 0 40px var(--c),
    0 0 50px var(--c);
}
button:hover{
    color: #fff;
    text-shadow: 0 0 10px var(--c),
    0 5px 5px #000;
    box-shadow: inset 1px 1px 2px #000,
    inset -1px -1px 2px var(--c);
}
    </style>
</head>

<body>
    <button>点赞</button>
    <button>关注</button>
    <button>收藏</button>
    <button>评论</button>
</body>

</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-09-29，如有侵权请联系 cloudcommunity@tencent.com 删除

网站

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

网站

css

登录后参与评论

0 条评论

热度