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>
相关推荐
桂月二二4 小时前
探索前端开发中的 Web Vitals —— 提升用户体验的关键技术
前端·ux
hunter2062065 小时前
ubuntu向一个pc主机通过web发送数据，pc端通过工具直接查看收到的数据
linux·前端·ubuntu
qzhqbb5 小时前
web服务器 网站部署的架构
服务器·前端·架构
刻刻帝的海角5 小时前
CSS 颜色
前端·css
九酒6 小时前
从UI稿到代码优化，看Trae AI 编辑器如何帮助开发者提效
前端·trae
浪浪山小白兔7 小时前
HTML5 新表单属性详解
前端·html·html5
lee5767 小时前
npm run dev 时直接打开Chrome浏览器
前端·chrome·npm
2401_897579657 小时前
AI赋能Flutter开发：ScriptEcho助你高效构建跨端应用
前端·人工智能·flutter
limit for me8 小时前
react上增加错误边界 当存在错误时 不会显示白屏
前端·react.js·前端框架
浏览器爱好者8 小时前
如何构建一个简单的React应用？
前端·react.js·前端框架
热门推荐
01centos7 init.d 和system.d02Dell服务器升级ubuntu 22.04失败解决03半导体应用系统一些小知识收集(strip&wafer mapping,EAP&scada)04PyTorch AMP 混合精度中grad_scaler.py的scale函数解析05Windows10安装PCL1.14.0及点云配准06密码学原理技术-第六章-introduction to pulibc-key cryptography07xgboost: Why not implement distributed XGBoost on top of spark08Oracle Scheduler: Calendaring09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10BMC 虚拟i2c访问PCA9545(switch芯片)后面的设备,为什么找不到PCA9545?