css实现花哨效果及关键帧小动画

本文链接：https://blog.csdn.net/vh_YUNYANGYUMO/article/details/115620083

盒子阴影

// box-shadow: left top opacity out-width color inset
/*
*left 左边值（水平方向）
*top 顶部值（垂直方向）
*opacity 透明度
*out-width 阴影外延宽度
*color 阴影颜色
*inset （属性固定值）向内填充阴影，该属性选填，默认外填充
*/

水平线性渐变

线性渐变

.boxs{
  width: 200px;
  height: 100px;
  background: #fff;
  margin-top: 50px;
  box-sizing: border-box;
  color: #fff;
  line-height: 100px;
  text-align: center;
  box-shadow: 0px 0px 5px 3px #fff inset; //内填充阴影
  background: linear-gradient(90deg,#b15cff 0%,#0ceee3 100%);
}

竖向（只是更改旋转度数即可）

竖向渐变

.boxs{
  width: 200px;
  height: 100px;
  background: #fff;
  margin-top: 50px;
  box-sizing: border-box;
  color: #fff;
  line-height: 100px;
  text-align: center;
  box-shadow: 0px 0px 5px 3px #fff inset; //内填充阴影
  background: linear-gradient(0deg,#b15cff 0%,#0ceee3 100%);
}

径向渐变（圆形）

圆形渐变

.boxs{
  width: 100px;
  height: 100px;
  background: #fff;
  margin-top: 50px;
  box-sizing: border-box;
  color: #fff;
  line-height: 100px;
  text-align: center;
  box-shadow: 0px 0px 5px 3px #fff inset;
  background: radial-gradient(red 5%, pink 35%, yellow 76%);
}

圆锥渐变

锥形渐变

.boxs{
  width: 100px;
  height: 100px;
  background: #fff;
  margin-top: 50px;
  box-sizing: border-box;
  color: #fff;
  line-height: 100px;
  text-align: center;
  box-shadow: 0px 0px 5px 3px #fff inset;
  background: conic-gradient(#9ED110, #50B517, #179067, 
                #476EAF, #9f49ac, #CC42A2, #FF3BA7, #FF5800,             
                #FF8100, #FEAC00, #FFCC00, #EDE604);
  border-radius: 50%;   
}

动画爱心+光效按钮动效

案例图

<!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>浩浩❤️茜茜</title>
</head>
<style>
  .html,body{
    width: 100vh;
    height: 100vh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
  }
  h1{
    color:#fff;
    text-align: center;
    width: max-content;
    padding-top: 45%;
    transform: translateY(-50%);
  }
  .wrap{
    width: 100vw;
    height: 100vh;
    background: #000;
    display: flex;
    justify-content: space-around;
  }
  ul{
    width: max-content;
    height: 200px;
    display: flex;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
  ul>li{
    width: 10px;
    height: 20px;
    margin: 0 10px;
    border-radius: 10px;
  }
  li:nth-child(1){
    background: red;
    animation: love1 5s 0s infinite;
  }
  li:nth-child(2){
    background: rgb(61, 239, 245);
    animation: love2 5s 0.2s infinite;
  }
  li:nth-child(3){
    background: rgb(250, 165, 108);
    animation: love3 5s 0.4s infinite;
  }
  li:nth-child(4){
    background: rgb(239, 68, 245);
    animation: love4 5s 0.6s infinite;
  }
  li:nth-child(5){
    background: rgb(233, 245, 61);
    animation: love5 5s 0.8s infinite;
  }
  li:nth-child(6){
    background: rgb(239, 68, 245);
    animation: love4 5s 1s infinite;
  }
  li:nth-child(7){
    background: rgb(250, 165, 108);
    animation: love3 5s 1.2s infinite;
  }
  li:nth-child(8){
    background: rgb(61, 239, 245);
    animation: love2 5s 1.4s infinite;
  }
  li:nth-child(9){
    background: red;
    animation: love1 5s 1.6s infinite;
  }
  @keyframes love1{
    30%,50%{
      height: 60px;
      transform: translateY(-30px);
    }
    70%,100%{
      height: 20px;
      transform: translateY(0);
    }
  }
  @keyframes love2{
    30%,50%{
      height: 125px;
      transform: translateY(-60px);
    }
    70%,100%{
      height: 20px;
      transform: translateY(0);
    }
  }
  @keyframes love3{
    30%,50%{
      height: 160px;
      transform: translateY(-75px);
    }
    70%,100%{
      height: 20px;
      transform: translateY(0);
    }
  }
  @keyframes love4{
    30%,50%{
      height: 180px;
      transform: translateY(-60px);
    }
    70%,100%{
      height: 20px;
      transform: translateY(0);
    }
  }
  @keyframes love5{
    30%,50%{
      height: 200px;
      transform: translateY(-45px);
    }
    70%,100%{
      height: 20px;
      transform: translateY(0);
    }
  }


  p{
    position: absolute;
    top: 70%;
    left: 50%; 
    transform: translate(-50%,-50%);
    width: 400px;
    height: 120px;
    text-align: center;
    font-size: 32px;
    line-height: 120px;
    color: #fff;
    box-sizing: border-box;
    background: linear-gradient(
      90deg,#03a9f4, #f441a5, #ffeb3b, 
    #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    border-radius: 60px;
    background-size: 400%;
    z-index: 1;
  }
  p:hover{
    animation: animate 8s linear infinite;
  }
  @keyframes animate{
    0%{
      background-position: 0%;
    }
    100%{
      background-position: 400%;
    }
  }
  p::before{
    content: '';
    position: absolute;
    top:-5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    z-index: -1; 
    background: linear-gradient(
      90deg,#03a9f4, #f441a5, #ffeb3b, #03a9f4, 
    #f441a5, #ffeb3b, #03a9f4);
    border-radius: 40px;
    background-size: 400%;
    filter: blur(20px);
    opacity: 0;
    /* transition: 1s; */
  }
  p:hover::before{
    filter: blur(20px);
    opacity: 1;
    animation: animate 8s linear infinite;
  }
</style>
<body>
    <div class="wrap">
      <h1>浩浩</h1>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <h1>茜茜</h1>
      <p>遇见你是一生的幸事</p>
    </div>
</body>
</html>

按钮呼吸效果

<p className="btn">点我</p>

.btn{
  width: 300px;
  height: 150px;
  color: #fff;
  background: red;
  animation: free_download 1s linear alternate infinite;
}
@keyframes free_download{
  0%{transform:scale(0.9);}
  100%{transform:scale(1);}
}

转盘抽奖

慢慢旋转至选中结果

// 开始旋转
  const startRotate = () => {
    if (isStart) return // 防用户连点
    setIsStart(true) // hooks写法 设置防连点开关
    $('.scale-dial').css({ // 清除上一次旋转角度
      'transform': `rotate(0deg)`,
      'transition': 'transform 0s'
    })
    switch (Number(awardText.status)) { // 根据后端返回抽奖结果判断旋转的最终角度
      case 1: stopRotate(5, 85); break
      case 2: stopRotate(185, 265); break
      case 3: stopRotate(275, 355); break
      case 4: stopRotate(95, 175); break
      default: break
    }
  }
  // 停止动画
  const stopRotate = async (min, max) => {
    setTimeout(() => { // 等待清除上次旋转的角度后再开始旋转
      $('.scale-dial').css({
        'transform': `rotate(${Math.floor(Math.random() * (max - min) + min) + 1080}deg)`, // 1080 是使用户视觉上感觉未出结果前的旋转 推荐360的倍数
        'transition': 'transform 3s ease-out'
      })
    }, 10)
    setTimeout(() => { // 展示旋转抽中的结果调起结果弹窗并更新抽奖历史（具体需求随机应变）
      showMask(true)
      setIsStart(false)
      getRewardList()
    }, 4000)
  }

加载中… 三个点动效

<p className="pi-pei">正在匹配队友<span className="dotting"></span></p>

.pi-pei{
   width: 196px;
   height: 40px;
   font-size: 28px;
   font-family: PingFangSC-Medium, PingFang SC;
   font-weight: 500;
   color: #FEDE75;
   line-height: 40px;
   margin: 0 auto 18px;
 }
.dotting {
  display: inline-block; width: 18px; min-height: 4px;
  padding-right: 4px;
  border-left: 4px solid currentColor; border-right: 4px solid currentColor;   
  background-color: currentColor; background-clip: content-box;
  box-sizing: border-box;
  animation: dot 3s infinite step-start both;
}
.dotting:before { content: '...'; } /* IE8 */
.dotting::before { content: ''; }
:root .dotting { margin-left: 4px; padding-left: 4px; } /* IE9  */

@keyframes dot {
  25% { border-color: transparent; background-color: transparent; }          /* 0个点 */
  50% { border-right-color: transparent; background-color: transparent; }    /* 1个点 */
  75% { border-right-color: transparent; }                                   /* 2个点 */
}

度动态画圆圈

canvas动态进度

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
    #myCanvas{
        margin: 0 auto;
        display: block;
    }
    </style>
</head>
<body>
  <canvas id="myCanvas">当前浏览器不支持canvas组件请升级！</canvas>

  <script type="text/javascript">
  //方法一：arc 动态画圆
  var c = document.getElementById('myCanvas');
  var ctx = c.getContext('2d');

  var mW = c.width = 300;
  var mH = c.height = 300;
  var lineWidth = 5;
  var r = mW / 2; //中间位置
  var cR = r - 4 * lineWidth; //圆半径
  var startAngle = -(1 / 2 * Math.PI); //开始角度
  var endAngle = startAngle + 2 * Math.PI; //结束角度
  var xAngle = 1 * (Math.PI / 180); //偏移角度量
  var fontSize = 35; //字号大小
  var tmpAngle = startAngle; //临时角度变量

  //渲染函数
  var rander = function(){undefined
    if(tmpAngle >= endAngle){undefined
      return;
    }else if(tmpAngle + xAngle > endAngle){undefined
      tmpAngle = endAngle;
    }else{undefined
      tmpAngle += xAngle;
    }
    ctx.clearRect(0, 0, mW, mH);

    //画圈
    ctx.beginPath();
    ctx.lineWidth = lineWidth;
    ctx.strokeStyle = '#1c86d1';
    ctx.arc(r, r, cR, startAngle, tmpAngle);
    ctx.stroke();
    ctx.closePath();

    //写字
    ctx.fillStyle = '#1d89d5';
    ctx.font= fontSize + 'px Microsoft Yahei';
    ctx.textAlign='center';
    ctx.fillText( Math.round((tmpAngle -  startAngle) / (endAngle - startAngle) * 100) + '%', r, r + fontSize / 2);

    requestAnimationFrame(rander);
  };

  rander();
  </script>
</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>Document</title>
  <style>
    #canvas {
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
  
  <canvas id="canvas" width="800" height="800" ></canvas>
  <script>
    const ctx = document.getElementById('canvas').getContext('2d');
    let count=0
    ctx.translate(400, 400);
    const drawRoate=(sec)=>{
      console.log(sec)
      ctx.clearRect(-400,-400,800,800);
      // 开始一条新路径
      ctx.beginPath();
      // 移动到圆心
      ctx.moveTo(0, 0);
      // 绘制圆弧  540-1260
      ctx.arc(0, 0, 350, Math.PI * (540/360), Math.PI * ((sec>1260?540:sec)/360), false);
      // 闭合路径
      ctx.fillStyle = 'red';
      ctx.closePath();
      ctx.fill();
    }

    let deg = 540
    const timer=setInterval(()=>{
      deg=deg>1260?540:deg+5
      if(count===4&&deg>1260) {
        console.log('已全部完成',deg,count)
        clearInterval(timer)
        return 
      }
      if(deg>1260) {
        count++
        console.log('deg已完成一周',deg,'完成几次了',count)
        drawRoate(540)
        return
      }
      drawRoate(deg)
    },10)
    
  </script>
</body>
</html>