HOW - CSS 常见效果实现

@PHARAOH2024-06-14 21:31

目录

常见 CSS 效果实现总结。

渐隐渐显

html 复制代码 
<!DOCTYPE html>
<html>
<style>
  body {
    background-color: black;
    color: #fff;
  }

  .click_links {
    font-size: 44px;
    animation: a_link_enter 3s linear infinite;
  }

  @keyframes a_link_enter {
    0% {
      opacity: 0;
    }

    30% {
      opacity: 1;
    }

    70% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }
</style>

<body>
  <span class="click_links">请点击进入</span>
</body>

</html>

曲线&抛物线

html 复制代码 
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    .outer-div {
      width: 100px;
      height: 100px;
      padding: 10px;
      background-color: #fff;
    }

    .inner-div {
      height: 100%;
      background-color: yellow;
    }

    .outer-div:hover {
      transform: translateX(100px);
      transition: transform 2s linear;
    }

    .outer-div:hover>.inner-div {
      transform: translateY(100px);
      transition: transform 2s cubic-bezier(.55, 0, .85, .36);
    }
  </style>
</head>

<body>
  <div class="outer-div">
    <div class="inner-div">Hello</div>
  </div>
</body>

</html>

更多关于抛物线的解释阅读 WHAT - CSS Animationtion 动画系列（二）

气泡框

html 复制代码 
<!DOCTYPE html>
<html>
<style>
  body {
    background-color: red;
  }

  .wrapper {
    width: 300px;
    height: 200px;
    margin-top: 100px;
    position: relative;
    border: 2px solid #cccccc;
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.5);
  }

  .wrapper:before {
    content: '';
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-bottom-color: #cccccc;
    position: absolute;
    top: 0;
    right: 20%;
    margin-top: -40px;
  }

  .wrapper:after {
    content: "";
    width: 0;
    height: 0;
    border: 18px solid transparent;
    border-bottom-color: #FFFFFF;
    position: absolute;
    top: 0;
    right: 21%;
    margin-top: -36px;
  }
</style>

<body>
  <!-- 方案一 -->
  <!-- https://blog.csdn.net/LLL_liuhui/article/details/80916265 -->
  <!-- 有边框的三角形、空心三角形（叠加两层div 外层作为边框） -->

  <!-- div border方案 -->
  <div class="wrapper"></div>

  <!-- svg方案 -->
  <div>
    <svg xmlns="http://www.w3.org/2000/svg" width="181" height="69" viewBox="0 0 181 69" fill="none">
      <path
        d="M37.4416 41.7506L23.125 66.6287V42V41.5H22.625H7C3.41015 41.5 0.5 38.5899 0.5 35V7C0.5 3.41015 3.41015 0.5 7 0.5H174C177.59 0.5 180.5 3.41015 180.5 7V35C180.5 38.5899 177.59 41.5 174 41.5H90.5H37.875H37.5859L37.4416 41.7506Z"
        fill="black" fill-opacity="0.5" stroke="white" />
    </svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="181" height="61" viewBox="0 0 181 61" fill="none">
      <g filter="url(#filter0_b_1345_620)">
        <path
          d="M0 7C0 3.13401 3.13401 0 7 0H174C177.866 0 181 3.13401 181 7V35C181 38.866 177.866 42 174 42H90.5H57.875L35.625 60.5L42.625 42H7C3.13401 42 0 38.866 0 35V7Z"
          fill="black" fill-opacity="0.2" />
        <path
          d="M57.875 41.5H57.6943L57.5553 41.6155L36.764 58.9027L43.0926 42.1769L43.3488 41.5H42.625H7C3.41015 41.5 0.5 38.5899 0.5 35V7C0.5 3.41015 3.41015 0.5 7 0.5H174C177.59 0.5 180.5 3.41015 180.5 7V35C180.5 38.5899 177.59 41.5 174 41.5H90.5H57.875Z"
          stroke="white" />
      </g>
      <defs>
        <filter id="filter0_b_1345_620" x="-10" y="-10" width="201" height="80.5" filterUnits="userSpaceOnUse"
          color-interpolation-filters="sRGB">
          <feFlood flood-opacity="0" result="BackgroundImageFix" />
          <feGaussianBlur in="BackgroundImage" stdDeviation="5" />
          <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1345_620" />
          <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1345_620" result="shape" />
        </filter>
      </defs>
    </svg>
  </div>
</body>

</html>

水波纹

html 复制代码 
<!DOCTYPE html>
<html>
<style>
  body {
    background-color: red;
  }

  .wrapper {
    width: 300px;
    height: 200px;
    margin-top: 100px;
    position: relative;
    border: 2px solid #cccccc;
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.5);
  }

  .wrapper:before {
    content: '';
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-bottom-color: #cccccc;
    position: absolute;
    top: 0;
    right: 20%;
    margin-top: -40px;
  }

  .wrapper:after {
    content: "";
    width: 0;
    height: 0;
    border: 18px solid transparent;
    border-bottom-color: #FFFFFF;
    position: absolute;
    top: 0;
    right: 21%;
    margin-top: -36px;
  }
</style>

<body>
  <!-- 方案一 -->
  <!-- https://blog.csdn.net/LLL_liuhui/article/details/80916265 -->
  <!-- 有边框的三角形、空心三角形（叠加两层div 外层作为边框） -->

  <!-- div border方案 -->
  <div class="wrapper"></div>

  <!-- svg方案 -->
  <div>
    <svg xmlns="http://www.w3.org/2000/svg" width="181" height="69" viewBox="0 0 181 69" fill="none">
      <path
        d="M37.4416 41.7506L23.125 66.6287V42V41.5H22.625H7C3.41015 41.5 0.5 38.5899 0.5 35V7C0.5 3.41015 3.41015 0.5 7 0.5H174C177.59 0.5 180.5 3.41015 180.5 7V35C180.5 38.5899 177.59 41.5 174 41.5H90.5H37.875H37.5859L37.4416 41.7506Z"
        fill="black" fill-opacity="0.5" stroke="white" />
    </svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="181" height="61" viewBox="0 0 181 61" fill="none">
      <g filter="url(#filter0_b_1345_620)">
        <path
          d="M0 7C0 3.13401 3.13401 0 7 0H174C177.866 0 181 3.13401 181 7V35C181 38.866 177.866 42 174 42H90.5H57.875L35.625 60.5L42.625 42H7C3.13401 42 0 38.866 0 35V7Z"
          fill="black" fill-opacity="0.2" />
        <path
          d="M57.875 41.5H57.6943L57.5553 41.6155L36.764 58.9027L43.0926 42.1769L43.3488 41.5H42.625H7C3.41015 41.5 0.5 38.5899 0.5 35V7C0.5 3.41015 3.41015 0.5 7 0.5H174C177.59 0.5 180.5 3.41015 180.5 7V35C180.5 38.5899 177.59 41.5 174 41.5H90.5H57.875Z"
          stroke="white" />
      </g>
      <defs>
        <filter id="filter0_b_1345_620" x="-10" y="-10" width="201" height="80.5" filterUnits="userSpaceOnUse"
          color-interpolation-filters="sRGB">
          <feFlood flood-opacity="0" result="BackgroundImageFix" />
          <feGaussianBlur in="BackgroundImage" stdDeviation="5" />
          <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1345_620" />
          <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1345_620" result="shape" />
        </filter>
      </defs>
    </svg>
  </div>
</body>

</html>

悬浮&漂浮

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <div class="itemActivity3Whale"></div>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .itemActivity3Whale {
    position: absolute;
    top: 120px;
    left: 14px;
    width: 56px;
    height: 72px;
    background-image: url("../../assets/images/footballTour/footballtour-activity3-whale.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: a_whale_suspended 3s linear both infinite;
  }

  @keyframes a_whale_suspended {
    0% {
      transform: scale(1, 1) translate(0, 0px);
    }

    20% {
      transform: scale(1.10, 0.94) translate(0, 0px);
    }

    40% {
      transform: scale(0.92, 1.08) translate(0, -10px);
    }

    60% {
      transform: scale(1.05, 0.98) translate(0, 0px);
    }

    80% {
      transform: scale(0.98, 1.02) translate(0, -6px);
    }

    100% {
      transform: scale(1, 1) translate(0, 0px);
    }
  }
</style>

<body>

</body>

</html>

长按控制进度条

html 复制代码 
<!DOCTYPE html>
<html>
<style>
  body {
    background-color: gray;
    margin: 0px;
  }

  #circle {
    transition: all .1s;
    stroke-dasharray: 314, 314;
    stroke-dashoffset: 314;
  }

  #triangle {
    transition: all .1s;
    position: absolute;
    top: 30px;
    left: 95px;
    transform-origin: 5px 70px;
  }

  .triangleAni {
    animation: a_whale_suspended 2s linear both infinite;
  }

  @keyframes a_whale_suspended {
    0% {
      transform: scale(1, 1) translate(0, 0px);
    }


    50% {
      transform: scale(1, 1) translate(0, -2px);
    }


    100% {
      transform: scale(1, 1) translate(0, 0px);
    }
  }
</style>

<body>
  <!-- <div id="circleButton">
    <svg width="200" height="200" viewBox="0 0 200 200">
      <circle id="circleBg" transform="rotate(-90 100 100)" cx="100" cy="100" r="50" fill="none" stroke-width="10"
        stroke="gray" />
      <circle id="circle" stroke-linecap="round" transform="rotate(-90 100 100)" cx="100" cy="100" r="50" fill="none"
        stroke-width="10" stroke="green" />
      <circle cx="100" cy="100" r="45" fill="#040404" />
      <text x="100" y="100" fill="#6b778c" text-anchor="middle" dominant-baseline="central">
        <tspan id="percent">0</tspan>%
      </text>
    </svg>
  </div> -->

  <div id="circleButton">
    <svg width="200" height="200" viewBox="0 0 200 200">
      <circle id="circleBg" transform="rotate(-90 100 100)" cx="100" cy="100" r="50" fill="none" stroke-width="10"
        stroke="rgba(255, 255, 255, 0.4)" />
      <circle id="circle" transform="rotate(-90 100 100)" stroke-linecap="round" cx="100" cy="100" r="50" fill="none"
        stroke-width="10" stroke="#FFC700" />
      <circle cx="100" cy="100" r="45" fill="#FFF" />
    </svg>
    <svg id="triangle" class="triangleAni" width="10" height="10">
      <polygon id="triangleSelf" points="0 0, 10 0, 5 10, 0 0" fill="#FFC700" />
    </svg>
  </div>

</body>

<script>
  // 更推荐使用path绘制圆形
  // https://www.joubn.com/blog/js/2017-09-26-svg-path-arc

  let circle = document.getElementById('circle')
  // let percent = document.getElementById('percent')
  let triangle = document.getElementById('triangle')
  let triangleSelf = document.getElementById('triangleSelf')

  let init = 314
  let v = init

  let rotate = 360

  function getPercent(num) {
    // let percent = Math.round(((init - num) / init) * 100)
    let percent = (((init - num) / init)).toFixed(2)
    return percent
  }

  function getRotate(v) {
    let percent = getPercent(v)

    triangle.style.transform = `rotate(${rotate * percent}deg)`

    const percents = percent * 100
    if (percents > 70 && percents < 90) {
      circle.style.stroke = 'red'
      triangleSelf.style.fill = 'red'
    } else {
      circle.style.stroke = '#FFC700'
      triangleSelf.style.fill = '#FFC700'
    }
  }

  function add() {
    console.log('2222');
    v = v - 3
    if (v <= 0) {
      if (timer) {
        clearInterval(timer)
        timer = null
      }
      v = 0
    }
    getRotate(v)
    // percent.innerHTML = getPercent(v)
    circle.style['stroke-dashoffset'] = v
  }
  function minus(reset) {
    if (reset) {
      v = 314
    } else {
      v = v + 10
      if (v >= 314) {
        v = 314
      }
    }
    // percent.innerHTML = getPercent(v)
    console.log(v);
    circle.style['stroke-dashoffset'] = v
  }

  let progressBtn = document.getElementById('circleButton')
  let timer;
  // handle presses through the mouse cursor
  progressBtn.addEventListener('mousedown', toggleActive);
  progressBtn.addEventListener('mouseup', removeActive);

  function toggleActive() {
    if (timer) {
      return
    }
    console.log('1111');
    triangle.classList.remove('triangleAni')
    timer = setInterval(() => {
      add();
    }, 16);
  }
  function removeActive() {
    // console.log(minus);
    // if (timer) {
    //   clearInterval(timer)
    //   timer = null
    //   minus(true)
    // }

    if (timer) {
      clearInterval(timer)
      timer = null
    }
  }
</script>

</html>

圆弧&圆形进度条

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>HTML5中的SVG属性实现圆形进度条效果</title>
</head>

<body>

  <svg width="300" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path id="ring" fill="none" stroke="#fd30ae" stroke-width="10px" />
  </svg>

  <script>
    var path = document.getElementById('ring');
    var r = 100;
    var progress = 0.5;
    //将path平移到我们需要的坐标位置
    ring.setAttribute('transform', 'translate(' + 150 + ',' + 150 + ')');

    // 计算当前的进度对应的角度值
    var degrees = progress * 360;

    // 计算当前角度对应的弧度值
    var rad = degrees * (Math.PI / 180);

    //极坐标转换成直角坐标
    var x = (Math.sin(rad) * r).toFixed(2);
    var y = -(Math.cos(rad) * r).toFixed(2);

    //大于180度时候画大角度弧，小于180度的画小角度弧，(deg > 180) ? 1 : 0
    var lenghty = window.Number(degrees > 180);

    //path 属性
    var descriptions = ['M', 0, -r, 'A', r, r, 0, lenghty, 1, x, y];

    // 给path 设置属性
    path.setAttribute('d', descriptions.join(' '));
  </script>
</body>

</html>

引导蒙层

html 复制代码 
<!DOCTYPE html>
<html>
<style>
  body {}

  /* z-index方案 */
  /* .mask {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, .2);
  }

  .click_links {
    width: 100px;
    height: 100px;
    background-color: antiquewhite;
    margin-bottom: 10px;
  }

  .show {
    position: relative;
    z-index: 100;
  } */

  /* 动态opacity方案 */
  /* .wrap {
    display: flex;
    flex-wrap: wrap;
    width: 150px;
  }

  .z {
    width: 50px;
    height: 50px;
    transition: all 1s;
  }

  .z1 {
    background: blue;
  }

  .z2 {
    background: black;
  }

  .z3 {
    background: yellow;
  }

  .z4 {
    background: red;
  }

  .z5 {
    background: green;
  }

  .z6 {
    background: orange;
  } */

  /* canvas xor方案 */
  .content {
    padding: 10px;
  }

  #mask {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 900;
  }
</style>

<body>
  <!-- z-index方案 -->
  <!-- 该方案最简单 -->
  <!-- <div class="click_links">请点击进入</div>
  <div class="click_links">请点击进入</div>
  <div class="click_links">请点击进入</div>
  <div class="click_links">请点击进入</div>
  <div id="clickme" class="click_links show">请点击进入</div>
  <div class="click_links">请点击进入</div>
  <div class="click_links">请点击进入</div>
  <div class="click_links">请点击进入</div>
  <div id="maskdiv" class="mask"></div>
  <script>
    const div = document.getElementById('clickme');
    const mask = document.getElementById('maskdiv')
    div.addEventListener('click', () => {
      mask.className = ''
    })
  </script> -->

  <!-- 动态opacity方案 类似于骨架屏 -->
  <!-- <div class="wrap">
    <div class="z z1"></div>
    <div class="z z2"></div>
    <div class="z z3"></div>
    <div class="z z4"></div>
    <div id="z5div" class="z z5"></div>
    <div class="z z6"></div>
  </div>
  <script>
    let arry = Array.from(document.querySelectorAll(".z"));
    let index = -1;
    let direct = 1;
    arry.forEach((d, i) => {
      (i !== 4) && (d.style.opacity = 0.5)
    });
    const div = document.getElementById('z5div');
    div.addEventListener('click', () => {
      arry.forEach((d, i) => {
        (i !== 4) && (d.style.opacity = 1)
      });
    })
  </script> -->

  <!-- canvas xor方案 -->
  <!-- 该方案最为灵活 -->
  <!-- 思路
        1. 新增一个canvas，绘制两次图形
        2. 第一次绘制全屏半透明阴影
        3. 第二次使用 xor 绘制一个和需要高亮的元素位置和尺寸完全重合的区域。因为 xor 会透明，所以可以让下层元素完全显示出来
  -->
  <div class="content one">我是第一个div，我是第一个div</div>
  <div class="content two">我是第二个div，我是第二个div</div>
  <div class="content three">我是第三个div，我是第三个div</div>
  <div class="content four">我是第四个div，我是第四个div</div>
  <canvas id="mask"></canvas>
  <script>
    function mask(cls) {
      // 获取需要高亮的元素的位置和尺寸信息
      let targetNode = document.querySelector(`.${cls}`);
      let pos = targetNode.getBoundingClientRect();

      // 设置canvas尺寸
      let canvas = document.getElementById("mask");
      let width = window.innerWidth;
      let height = window.innerHeight;
      canvas.setAttribute("width", width);
      canvas.setAttribute("height", height);

      // 绘制canvas
      var ctx = canvas.getContext("2d");
      ctx.globalCompositeOperation = 'source-over';
      ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
      ctx.fillRect(0, 0, width, height);
      ctx.fill();

      ctx.fillStyle = 'white';
      ctx.globalCompositeOperation = "xor";
      ctx.fillRect(pos.left, pos.top, pos.width, pos.height);
      ctx.fill();
    }

    let array = ['one', 'two', 'three', 'four'];
    let i = 0;
    setInterval(() => {
      mask(array[i]);
      i++;
      if (i >= 4) i = 0;
    }, 1000)
  </script>

  <!-- border透明度方案 -->
  <!-- 一个div有四个边框，如果我们把边框都设置成半透明，然后中间的区域设置成全透明就可以实现区域引导蒙层了，然后再把边框设置成超过屏幕的大小，就是全景引导蒙层了 -->

  <!-- box-shadow 阴影的尺寸+透明度方案 -->
  <!-- 与上面一个方案类似 box-shadow: 10px 10px 5px 100px rgba(0,0,0,.5); -->
  <!-- box-shadow 的阴影距离切勿盲目设置过大，经过测试这个值如果过大，比如4000px，在部分手机上阴影无法显示出来。设置为2000px为佳。 -->

  <!-- 页面节点复制方案 -->
  <!-- 该方案类似于dialog，将要显示的内容放到dialog中，底层页面节点被蒙层挡住。只是在这里我们可以把需要高亮的元素复制到dialog内容里，并设置同等位置和尺寸 -->

</body>

</html>

随机物品掉落

html 复制代码 
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    .rain_area {
      width: 100px;
      height: 100px;
    }

    .drop {
      display: inline-block;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background-color: black;
    }

    .drop1 {
      animation: a_drop_1 1s 0.6s linear both infinite;
    }

    .drop2 {
      animation: a_drop_1 0.8s 0.9s linear both infinite;
    }

    .drop3 {
      animation: a_drop_1 1.1s 1s linear both infinite;
    }

    .drop4 {
      animation: a_drop_1 1.1s 0.9s linear both infinite;
    }

    @keyframes a_drop_1 {
      0% {
        opacity: 0;
        transform: translate(0, 0);
        scale: (1, 1);
      }

      20% {
        opacity: 1;
        transform: translate(0, 30px);
        scale: (1, 2);
      }

      45% {
        opacity: 1;
        transform: translate(0, 79px);
        scale: (1, 2);
      }

      50% {
        opacity: 1;
        transform: translate(0, 81px);
        scale: (1, 1);
      }

      75% {
        opacity: 0.6;
        transform: translate(0, 96px);
        scale: (1, 1);
      }

      100% {
        opacity: 0;
        transform: translate(0, 116px);
        scale: (1, 1);
      }
    }
  </style>
</head>

<body>
  <!-- 关键：除非时间是各个元素时间的最小公倍数，否则不会回归到初始状态，从而产生随即感 -->

  <div class="rain_area">
    <div class="drop drop1"></div>
    <div class="drop drop2"></div>
    <div class="drop drop3"></div>
    <div class="drop drop4"></div>
  </div>
</body>

</html>

渐变边框

html 复制代码 
<!DOCTYPE html>
<html>
<style>
  .border-box {
    border: 4px solid transparent;
    border-radius: 16px;
    position: relative;
    background-color: #222;
    background-clip: padding-box;
    /*important*/
  }

  .border-box::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: -1;
    margin: -4px;
    border-radius: inherit;
    /*important*/
    background: linear-gradient(to right, #8F41E9, #578AEF);
  }
</style>

<body>
  <div class="border-box">
    <div class="content">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos
      saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis,
      accusamus tempora.
    </div>
  </div>
</body>

</html>

光晕

html 复制代码 
<!DOCTYPE html>
<html>
<style>
  body {
    background-color: black;
  }

  div {
    width: 407px;
    height: 407px;

    background: radial-gradient(50% 50% at 50% 50%, #2B50D7 0%, rgba(43, 80, 215, 0) 100%);
    filter: blur(40px);
  }
</style>

<body>
  <div></div>
</body>

</html>

按钮下压反馈

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .splash-section__button {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 44px;
      border-radius: 30px;
      background-color: #3b8beb;
      color: #ffffff;
      font-weight: 600;
      font-size: 16px;
      width: 240px;

      border: none;
    }

    .splash-section__button:active {
      background-color: #1b6bcb;
      transform: translate(0, 2px);
    }
  </style>
</head>

<body>
  <button class="splash-section__button">
    Create a Free Profile
  </button>
  </div>
</body>

</html>

头像（圆形+半透明阴影）

html 复制代码 
<!DOCTYPE html>
<html>
<style>
  .outer {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: rgb(156, 140, 140);

    position: relative;
    text-align: center;

    overflow: hidden;
  }

  .shadow {
    background: rgba(0, 0, 0, 0.73);
    position: absolute;
    width: 100px;
    height: 25px;
    bottom: 0;
    color: white;
  }
</style>

<body>
  <div class="outer">
    <div class="shadow">html test</div>
  </div>
</body>

</html>
相关推荐
理想不理想v几秒前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云10 分钟前
不用ECharts！从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:1379712058713 分钟前
web端手机录音
前端
齐 飞18 分钟前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
神仙别闹35 分钟前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
GIS程序媛—椰子1 小时前
【Vue 全家桶】7、Vue UI组件库（更新中）
前端·vue.js
DogEgg_0012 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端2 小时前
Content Security Policy (CSP)
前端·javascript·面试
木舟10092 小时前
ffmpeg重复回听音频流，时长叠加问题
前端
王大锤43912 小时前
golang通用后台管理系统07（后台与若依前端对接）
开发语言·前端·golang
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解