HOW - CSS 常见效果实现

渐隐渐显

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>

曲线&抛物线

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">Hellodiv>
  div>
body>

html>

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

气泡框

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>
  
  
  

  
  <div class="wrapper">div>

  
  <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>

水波纹

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>
  
  
  

  
  <div class="wrapper">div>

  
  <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>

悬浮&漂浮

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>Documenttitle>
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>

长按控制进度条

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="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>

圆弧&圆形进度条

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>

引导蒙层

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>
  
  
  

  
  

  
  
  
  <div class="content one">我是第一个div，我是第一个divdiv>
  <div class="content two">我是第二个div，我是第二个divdiv>
  <div class="content three">我是第三个div，我是第三个divdiv>
  <div class="content four">我是第四个div，我是第四个divdiv>
  <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>

  
  

  
  
  

  
  

body>

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>

渐变边框

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>

光晕

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>

按钮下压反馈

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>Documenttitle>
  <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>

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

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 testdiv>
  div>
body>

html>

相关阅读:
MaxCompute实例相关操作
 打开ps提示，计算机中丢失d3dcompiler_47.dll怎么解决？
pytorch，numpy两种方法实现nms类间+类内
 PHP中=＞和-＞有什么区别？
跳跃游戏精细化
 webGL编程指南第三章绘制四角形.helloQuadjs（加餐）
六级高频词汇——Group07
剑指 Offer 24. 反转链表【链表】
详细讲解 —— 进程（Java EE初阶）
萌新训练赛(1)
原文地址：https://blog.csdn.net/weixin_58540586/article/details/139600506

HOW - CSS 常见效果实现

目录

渐隐渐显

曲线&抛物线

气泡框

水波纹

悬浮&漂浮

长按控制进度条

圆弧&圆形进度条

引导蒙层

随机物品掉落

渐变边框

光晕

按钮下压反馈

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