• 每日分享html之2个加载、2个button、1个鼠标定向

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

    欢迎关注b站：小淼前端

    有更多的前端特效，及视频讲解+源代码可领取哦~

    欢迎关注b站：小淼前端

    有更多的前端特效，及视频讲解+源代码可领取哦~

    目录

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

    欢迎关注b站：小淼前端

    有更多的前端特效，及视频讲解+源代码可领取哦~

    欢迎关注b站：小淼前端

    有更多的前端特效，及视频讲解+源代码可领取哦~

    前端是做什么的？

    前端的特效视觉：

    1.弹跳方块加载

    2.按钮悬浮效果

    3.始终飞向鼠标的纸飞机

    4.篮球弹跳加载

    5.马赛克背景的按钮特效

    欢迎关注b站：小淼前端

    有更多的前端特效，及视频讲解+源代码可领取哦~

    欢迎关注b站：小淼前端

    有更多的前端特效，及视频讲解+源代码可领取哦~

     

    前端是做什么的？

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

    前端的特效视觉：

    层次结构的表现

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

    表现层级关系

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

    清晰明确

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

    添加了图层

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

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

    1.弹跳方块加载

     代码：

    1. html>
    2. <html>
    3.  
    4. <head>
    5.     <meta http-equiv="content-type" content="text/html; charset=utf-8">
    6.     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    7.  
    8.     <title>弹跳方块加载title>
    9.     <style>
    10.         *{
    11.     /* 初始化 */
    12.     margin: 0;
    13.     padding: 0;
    14. }
    15. body{
    16.     /* 100%窗口高度 */
    17.     height: 100vh;
    18.     /* 弹性布局 水平+垂直居中 */
    19.     display: flex;
    20.     justify-content: center;
    21.     align-items: center;
    22.     background-color: #000;
    23. }
    24. .loader{
    25.     /* 相对定位 */
    26.     position: relative;
    27.     /* 自定义属性--c */
    28.     --c: #48c0a3;
    29. }
    30. .loader .square{
    31.     width: 200px;
    32.     height: 200px;
    33.     /* 通过var函数调用自定义属性--c */
    34.     background-color: var(--c);
    35.     /* 阴影 外发光效果 */
    36.     box-shadow: 0 0 15px var(--c),
    37.     0 0 30px var(--c),
    38.     0 0 60px var(--c);
    39.     /* 设置旋转元素的基点位置 */
    40.     transform-origin: bottom right;
    41.     /* 执行动画: 动画名 时长 线性 无限次播放 */
    42.     animation: roll 1s linear infinite;
    43. }
    44. /* 黑色遮罩(挖空方形) */
    45. .loader .square::before{
    46.     content: "";
    47.     width: 150px;
    48.     height: 150px;
    49.     /* 绝对定位 居中 */
    50.     position: absolute;
    51.     left: 50%;
    52.     top: 50%;
    53.     transform: translate(-50%,-50%);
    54.     background-color: #000;
    55.     /* 阴影 内发光效果 */
    56.     box-shadow: inset 0 0 15px var(--c),
    57.     inset 0 0 30px var(--c),
    58.     inset 0 0 60px var(--c);
    59. }
    60. .loader .text{
    61.     position: absolute;
    62.     width: 300px;
    63.     height: 40px;
    64.     line-height: 40px;
    65.     left: -40px;
    66.     bottom: -80px;
    67.     /* 溢出隐藏 */
    68.     overflow: hidden;
    69. }
    70. .loader .text p{
    71.     color: var(--c);
    72.     font-size: 24px;
    73.     white-space: nowrap;
    74.     /* 文字发光效果 */
    75.     text-shadow: 0 0 2px var(--c),
    76.     0 0 4px var(--c),
    77.     0 0 8px var(--c);
    78.     position: absolute;
    79.     /* 默认移出可视范围 */
    80.     left: 100%;
    81.     /* 执行动画 */
    82.     animation: move 3.5s linear infinite;
    83. }
    84.  
    85. /* 定义动画 */
    86. /* 方块旋转动画 */
    87. @keyframes roll {
    88.     100%{
    89.         transform: translateX(-100%) rotateZ(90deg);
    90.     }
    91. }
    92. /* 文本移动动画 */
    93. @keyframes move {
    94.     100%{
    95.         left: -50%;
    96.     }
    97. }
    98.     style>
    99. head>
    100.  
    101. <body>
    102.     <div class="loader">
    103.         <div class="square">div>
    104.         <div class="text">
    105.             <p>拼命加载中...p>
    106.         div>
    107.     div>
    108. body>
    109.  
    110. html>

    2.按钮悬浮效果

     代码：

    1. html>
    2. <html>
    3.  
    4. <head>
    5.     <meta http-equiv="content-type" content="text/html; charset=utf-8">
    6.     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    7.  
    8.     <title>3d方向感效果title>
    9.     <style>
    10.         *{
    11.     /* 初始化 */
    12.     margin: 0;
    13.     padding: 0;
    14. }
    15. body{
    16.     /* 100%窗口高度 */
    17.     height: 100vh;
    18.     /* 弹性布局 水平+垂直居中 */
    19.     display: flex;
    20.     justify-content: center;
    21.     align-items: center;
    22.     /* 渐变背景 */
    23.     background: linear-gradient(200deg,#ffecd2,#fcb69f);
    24. }
    25. .container{
    26.     /* 定义3D元素距视图的距离 */
    27.     perspective: 320px;
    28. }
    29. .btn{
    30.     display: block;
    31.     margin: 40px 0;
    32.     width: 240px;
    33.     height: 80px;
    34.     border: none;
    35.     background-color: #fda085;
    36.     color: #fff;
    37.     font-size: 18px;
    38.     border-radius: 6px;
    39.     outline: none;
    40.     cursor: pointer;
    41.     /* 动画过渡 */
    42.     transition: 0.3s;
    43. }
    44. .btn:nth-child(1):hover{
    45.     /* 沿X轴旋转15度 */
    46.     transform: rotateX(15deg);
    47.     /* 阴影 */
    48.     box-shadow: 0 15px 15px rgba(225,95,65,0.56);
    49. }
    50. .btn:nth-child(2):hover{
    51.     /* 沿X轴旋转-15度 */
    52.     transform: rotateX(-15deg);
    53.     /* 阴影 */
    54.     box-shadow: 0 -15px 15px rgba(225,95,65,0.56);
    55. }
    56. .btn:nth-child(3):hover{
    57.     /* 沿Y轴旋转15度 */
    58.     transform: rotateY(15deg);
    59.     /* 阴影 */
    60.     box-shadow: -15px 0 15px rgba(225,95,65,0.56);
    61. }
    62. .btn:nth-child(4):hover{
    63.     /* 沿Y轴旋转-15度 */
    64.     transform: rotateY(-15deg);
    65.     /* 阴影 */
    66.     box-shadow: 15px 0 15px rgba(225,95,65,0.56);
    67. }
    68.     style>
    69. head>
    70.  
    71. <body>
    72.     <div class="container">
    73.         <button class="btn">求点赞button>
    74.         <button class="btn">求关注button>
    75.         <button class="btn">求收藏button>
    76.         <button class="btn">求分享button>
    77.     div>
    78. body>
    79.  
    80. html>

    3.始终飞向鼠标的纸飞机

     代码：

    1. html>
    2. <html>
    3.  
    4. <head>
    5.     <meta http-equiv="content-type" content="text/html; charset=utf-8">
    6.     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    7.  
    8.     <title>始终飞向鼠标的纸飞机title>
    9.     
    10.     <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    11.     <style>
    12.         *{
    13.     /* 初始化 */
    14.     margin: 0;
    15.     padding: 0;
    16. }
    17. body{
    18.     /* 100%窗口高度 */
    19.     height: 100vh;
    20.     /* 渐变背景 */
    21.     background: linear-gradient(200deg,#fbff00,#fb0000);
    22. }
    23. #plane{
    24.     color: #fff;
    25.     font-size: 70px;
    26.     /* 绝对定位 */
    27.     position: absolute;
    28.     /* 弹性布局 水平+垂直居中 */
    29.     display: flex;
    30.     justify-content: center;
    31.     align-items: center;
    32. }
    33.     style>
    34. head>
    35.  
    36. <body>
    37.     <div id="plane">
    38.         <i class="fa fa-paper-plane" aria-hidden="true">i>
    39.     div>
    40.     <script>
    41.         let plane=document.getElementById('plane');
    42.         let deg=0,ex=0,ey=0,vx=0,vy=0,count=0;
    43.         window.addEventListener('mousemove',(e)=>{
    44.             ex=e.x-plane.offsetLeft-plane.clientWidth/2;
    45.             ey=e.y-plane.offsetTop-plane.clientHeight/2;
    46.             deg=360*Math.atan(ey/ex)/(2*Math.PI)+45;
    47.             if(ex<0){
    48.                 deg+=180;
    49.             }
    50.             count=0;
    51.         })
    52.         function draw(){
    53.             plane.style.transform='rotate('+deg+'deg)';
    54.             if(count<100){
    55.                 vx+=ex/100;
    56.                 vy+=ey/100;
    57.             }
    58.             plane.style.left=vx+'px';
    59.             plane.style.top=vy+'px';
    60.             count++;
    61.         }
    62.         setInterval(draw, 1);
    63.     script>
    64. body>
    65.  
    66. html>

    4.篮球弹跳加载

     代码：

    1. html>
    2. <html>
    3.  
    4. <head>
    5.     <meta http-equiv="content-type" content="text/html; charset=utf-8">
    6.     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    7.  
    8.     <title>篮球弹跳加载title>
    9.     <style>
    10.         *{
    11.     /* 初始化 */
    12.     margin: 0;
    13.     padding: 0;
    14. }
    15. body{
    16.     /* 100%窗口高度 */
    17.     height: 100vh;
    18.     /* 弹性布局 水平+垂直居中 */
    19.     display: flex;
    20.     justify-content: center;
    21.     align-items: center;
    22.     /* 渐变背景 */
    23.     background: linear-gradient(200deg,#d5ec00,#1eff00);
    24. }
    25. .ball-box{
    26.     width: 150px;
    27.     height: 150px;
    28.     /* 执行动画：动画名 时长 减速 先反向再正向 无限次播放 */
    29.     animation: bounce 0.6s ease-out alternate-reverse infinite;
    30. }
    31. .ball{
    32.     width: 150px;
    33.     height: 150px;
    34.     border-radius: 50%;
    35.     background-color: #f7972b;
    36.     box-shadow: 0 0 2px 4px #fff;
    37.     /* 溢出隐藏 */
    38.     overflow: hidden;
    39.     /* 绝对定位 */
    40.     position: absolute;
    41.     z-index: 1;
    42.     /* 执行动画：动画名 时长 线性 无限次播放 */
    43.     animation: roll 3s linear infinite;
    44. }
    45. .ball::before,.ball::after{
    46.     content: "";
    47.     position: absolute;
    48.     width: 100%;
    49.     height: 100%;
    50.     border-radius: 50%;
    51.     border: 5px solid #fff;
    52.     /* 加一点点模糊 */
    53.     filter: blur(0.5px);
    54. }
    55. .ball::before{
    56.     left: -70%;
    57. }
    58. .ball::after{
    59.     right: -70%;
    60. }
    61. .ball .a,.ball .b{
    62.     position: absolute;
    63.     left: 50%;
    64.     top: 50%;
    65.     transform: translate(-50%,-50%);
    66.     background-color: #fff;
    67. }
    68. .ball .a{
    69.     width: 200px;
    70.     height: 5px;
    71. }
    72. .ball .b{
    73.     width: 5px;
    74.     height: 200px;
    75. }
    76. .shadow{
    77.     width: 150px;
    78.     height: 5px;
    79.     border-radius: 50%;
    80.     background-color: rgba(0,0,0,0.4);
    81.     position: absolute;
    82.     bottom: 25vh;
    83.     z-index: -1;
    84.     filter: blur(1.5px);
    85.     animation: shadow 0.6s ease-out alternate-reverse infinite;
    86. }
    87.  
    88. /* 定义动画 */
    89. /* 篮球弹跳的动画 */
    90. @keyframes bounce {
    91.     0%{
    92.         transform: translateY(15vh);
    93.     }
    94.     100%{
    95.         transform: translateY(-20vh);
    96.     }
    97. }
    98. /* 篮球旋转的动画 */
    99. @keyframes roll {
    100.     0%{
    101.         transform: rotate(0deg);
    102.     }
    103.     100%{
    104.         transform: rotate(360deg);
    105.     }
    106. }
    107. /* 阴影的动画 */
    108. @keyframes shadow {
    109.     0%{
    110.         transform: scale(0.15,1.25);
    111.     }
    112.     100%{
    113.         transform: scale(1.25,0.75);
    114.     }
    115. }
    116.     style>
    117. head>
    118.  
    119. <body>
    120.     <div class="ball-box">
    121.         <div class="ball">
    122.             <div class="a">div>
    123.             <div class="b">div>
    124.         div>
    125.     div>
    126.     <div class="shadow">div>
    127. body>
    128.  
    129. html>

    5.马赛克背景的按钮特效

     代码：

    1. html>
    2. <html>
    3.  
    4. <head>
    5.     <meta http-equiv="content-type" content="text/html; charset=utf-8">
    6.     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    7.  
    8.     <title>马赛克背景的按钮特效title>
    9.     <style>
    10.         *{
    11.     /* 初始化 */
    12.     margin: 0;
    13.     padding: 0;
    14. }
    15. body{
    16.     /* 100%窗口高度 */
    17.     height: 100vh;
    18.     /* 弹性布局 水平+垂直居中 */
    19.     display: flex;
    20.     flex-direction: column;
    21.     justify-content: center;
    22.     align-items: center;
    23.     /* 渐变背景 */
    24.     background: linear-gradient(200deg,#485563,#29323c);
    25. }
    26. .button{
    27.     width: 250px;
    28.     height: 80px;
    29.     border: 2px solid #fff;
    30.     display: flex;
    31.     justify-content: center;
    32.     align-items: center;
    33.     border-radius: 10px;
    34.     margin: 15px 0;
    35.     cursor: pointer;
    36.     /* 溢出隐藏 */
    37.     overflow: hidden;
    38.     /* 相对定位 */
    39.     position: relative;
    40. }
    41. .button p{
    42.     font-size: 22px;
    43.     font-weight: bold;
    44.     /* 绝对定位 */
    45.     position: absolute;
    46.     /* 动画过渡 */
    47.     transition: 1s;
    48. }
    49. .button .back{
    50.     width: 100%;
    51.     height: 100%;
    52.     position: absolute;
    53. }
    54. .button .back span{
    55.     background-color: #fff;
    56.     display: block;
    57.     float: left;
    58. }
    59. .button:hover div span{
    60.     /* 通过var函数调用自定义属性--c，设置背景颜色 */
    61.     background-color: var(--c);
    62. }
    63. .button:hover p{
    64.     color: #fff;
    65. }
    66.     style>
    67. head>
    68.  
    69. <body>
    70.     <div class="button">
    71.         <div class="back" style="--c:#e74c3c;">div>
    72.         <p>评论p>
    73.     div>
    74.     <div class="button">
    75.         <div class="back" style="--c:#2ecc71;">div>
    76.         <p>关注p>
    77.     div>
    78.     <div class="button">
    79.         <div class="back" style="--c:#3498db;">div>
    80.         <p>收藏p>
    81.     div>
    82.     <div class="button">
    83.         <div class="back" style="--c:#9b59b6;">div>
    84.         <p>转发p>
    85.     div>
    86.     <script>
    87.         // 获取所有的.back层
    88.         let backs=document.getElementsByClassName('back');
    89.         // 遍历所有的.back层，并添加span元素作为背景
    90.         for(let i=0;ilength;i++){
    91.             // 当前的.back层
    92.             let back=backs[i];
    93.             // 宽高尺寸采用.back层的1/25宽度
    94.             let width=back.clientWidth/25;
    95.             let height=width;
    96.             // 计算所需的背景块数量
    97.             let count=25*parseInt(back.clientHeight/height);
    98.             for(let j=0;j
    99.                 // 根据计算结果并添加对应数量的span元素
    100.                 let span=document.createElement('span');
    101.                 span.style.width=width+'px';
    102.                 span.style.height=width+'px';
    103.                 // 设置动画过渡：时长 线性 动画延迟
    104.                 span.style.transition='0.2s linear '+Math.random()/2+'s';
    105.                 // 追加元素
    106.                 back.appendChild(span);
    107.             }
    108.         }
    109.     script>
    110. body>
    111.  
    112. html>

  • 相关阅读:
    【遥感科学】遥感科学绪论
    20道常见的kafka面试题以及答案
    【linux命令讲解大全】017.格式化C语言源文件的工具：indent命令
    vscode中git的使用，以及与webstorm中git的使用对比
    如何搭建Spring开发环境呢？
    springboot+电影售票小程序 毕业设计-附源码201532
    数据结构初阶--二叉树介绍（基本性质+堆实现顺序结构）
    STM32学习笔记（七）--ADC详解
    Ecal基于wifi下跨机通讯
    Qt 集成OSG
  • 原文地址：https://blog.csdn.net/lbcyllqj/article/details/127099769