css实现PK动效

最新推荐文章于 2024-07-13 02:11:53 发布
原创 最新推荐文章于 2024-07-13 02:11:53 发布 · 1.2k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端 #javascript

文章详细介绍了如何使用CSS动画和过渡效果实现PK动效，包括人物碰撞、图标放大、头像显隐、进度条拉扯等效果，并通过React组件展示了具体的实现代码，主要依赖translateX()和宽度变化来创建各种动效。

文章目录

PK动效

效果预览

在这里插入图片描述

实现原理

最初的碰触效果

一开始的人物是设置在屏幕可视范围之外的，写两个动效，最后的位置处于可视范围之内就行了，看css代码的rleftstrike，rightstrike

vs图标瞬间放大效果

看css代码的vsAnimation

头像动效

效果：最初的时候显隐，在被打败后，头像横向飞出
显隐原理：用 transition: opacity 2s 设置过渡效果，在人物碰撞动画结束之后，设置opacity 为1
横向飞出：看css代码的rightheadLose和leftheadLose

进度条以及人物推拉动效

原理都是通过宽度变化过渡去设置，我用setInterval去生成循环设置随机宽度，知道拉扯到指定次数，清除定时器。
怎样设置随机宽度呢？通过随机生成一个不大于对手分数的数，然后求自己的分数和随机生成的分数的百分比，得到的百分比去控制宽度
const temprivalScore = Math.round(Math.random()*rivalScore) //随机分数
const total = temprivalScore+myScore
setleftWidth((myScore/total)*100) //设置百分比
setrightWidth((temprivalScore/total)*100) //设置百分比

输的一方飞出的动效

看css代码的leftLose和rightLost

赢的一方放大往前顶的动效

看css代码的leftWin和rightWin

总结

总的来说呢，实现的重点就是都是通过translateX()去左右移动
另外就是用过渡属性过渡宽度的变化，通过改变宽度来达成最终效果

实现代码

import React, { FC, useEffect, useRef, useState } from "react";
import styles from "./index.less";


const text = {
  105:{
    title:"驾驶时间",
    text:"驾驶时间较多",
    bottomtext:"我的驾驶时长",
    unit:"小时",
    dataName:"winDriveTime"
  },
  106:{
    title:"打卡城市",
    text:"打卡城市较多",
    bottomtext:"我的打卡城市数",
    unit:"个",
    dataName:"cityCn"
  },
  107:{
    title:"驾驶行为",
    text:"三急行为次数较低",
    bottomtext:"我的三急行为次数",
    unit:"次",
    dataName:"badDriveCnt"
  },
  119:{
    title:"消费额度",
    text:"CPSP实付金额总数较多",
    bottomtext:"我的CPSP实付金额总数",
    unit:"元",
    dataName:"cpspPay"
  },
  111:{
    title:"远控使用",
    text:"远控功能使用次数总数较多",
    bottomtext:"我的远控功能使用次数",
    unit:"次",
    dataName:"remoteControlCnt"
  },
  110:{
    title:"APP使用",
    text:"APP打开总次数较多",
    bottomtext:"我的APP打开总次数",
    unit:"次",
    dataName:"appOpenTimes"
  },
  118:{
    title:"加油优惠",
    text:"智慧加油省钱额度总数较多",
    bottomtext:"我的智慧加油省钱额度总数",
    unit:"元",
    dataName:"gassDisAmt"
  },
  104:{
    title:"假期里程",
    text:"行驶里程数较多",
    bottomtext:"我的行驶里程",
    unit:"km",
    dataName:"driveMiles"
  },
  112:{
    title:"听歌天数",
    // text:`打开${carType==="ccs2plus"?"酷狗":"酷我"}天数较多`,
    bottomtext:"我的听歌天数",
    unit:"天",
    // dataName:`${carType==="ccs2plus"?"kwgUseDays":"kuwUseDays"}`
  },
  113:{
    title:"刷剧天数",
    text:"打开爱奇艺天数较多",
    bottomtext:"我的刷剧天数",
    unit:"天",
    dataName:"aqyUseDays"
  },
}

const PkingModal: FC = () => {
  // const pkingModalVisible = useSelector((state: any) => state.nationalday2022.pkingModalVisible);
  const pkResults = {
      "pkResult": 1,
      "rivalScore": 20,
      "myScore": 10,
      "rivalName":"对手名称",
  }
  const pkResultsRef = useRef<any>()
  pkResultsRef.current = pkResults

  const [opacity,setopacity] = useState(0)
  const [leftWidth,setleftWidth] = useState(50)
  const [rightWidth,setrightWidth] = useState(50)

  const [vsopacity,setvsopacity] = useState(1)
  const [rivalScore,setrivalScore] =useState(0)

  const leftRef = useRef<any>()

  const leftpeopleRef = useRef<any>()
  const leftheadportraitRef = useRef<any>()
  const rightpeopleRef = useRef<any>()
  const rightheadportraitRef = useRef<any>()
  const pkmodalType = 104

  const pkmodalTypeRef = useRef<any>()
  pkmodalTypeRef.current = pkmodalType

  const isBegin = useRef<any>(false)


  useEffect(()=>{
    document.documentElement.style.fontSize=(document.documentElement.clientWidth/750)*100+'px';
    if(leftRef.current){
      leftRef.current.addEventListener('animationend',()=>{
        // console.log("动画结束")
        if( isBegin.current ) return
        isBegin.current = true
        setopacity(1)
        // 执行宽度变化的函数
        setTimeout(()=>{
            const {myScore,rivalScore} = pkResultsRef.current
            // 随机生成对手的分数用来改变宽度
            let time = 0
            let timemax= 6
            if(myScore==0||rivalScore==0) timemax=2

            let temprivalScore = rivalScore;

   
            const timer = setInterval(()=>{
                  time+=1
                  // 5次的时候清除定时器 设置最终的对手分数
                  temprivalScore = Math.round(Math.random()*rivalScore)
                 

                  if(time===timemax){
                    temprivalScore = rivalScore
                    setTimeout(()=>{
                        setvsopacity(0)
                        const leftPeople = leftpeopleRef.current
                        const rightPeople = rightpeopleRef.current
                        const leftheadportrait = leftheadportraitRef.current
                        const rightheadportrait = rightheadportraitRef.current
                         // 三急行为 小的获胜
                        if( pkmodalTypeRef.current ==107){
                          if(myScore<temprivalScore){
                            // 左边胜利
                             // 右边胜利
                             leftPeople.style["animation"] = `${styles.leftWin} 1s forwards`
                             rightPeople.style["animation"] = `${styles.rightLose} 1s forwards`
                             rightheadportrait.style["animation"] = `${styles.rightheadLose} 1s forwards`
                        }else if(myScore>temprivalScore){
                             // 右边胜利
                             rightPeople.style["animation"] = `${styles.rightWin} 1s forwards`
                             leftPeople.style["animation"] = `${styles.leftLose} 1s forwards`
                             leftheadportrait.style["animation"] = `${styles.leftheadLose} 1s forwards`
                        }else{
                          // 平局
                          // 不做处理
                        }
                      }else{
                        // 大的获胜
                        if(myScore>temprivalScore){
                          // 左边胜利
                           // 右边胜利
                           leftPeople.style["animation"] = `${styles.leftWin} 1s forwards`
                           rightPeople.style["animation"] = `${styles.rightLose} 1s forwards`
                           rightheadportrait.style["animation"] = `${styles.rightheadLose} 1s forwards`
                          }else if(myScore<temprivalScore){
                              // 右边胜利
                              rightPeople.style["animation"] = `${styles.rightWin} 1s forwards`
                              leftPeople.style["animation"] = `${styles.leftLose} 1s forwards`
                              leftheadportrait.style["animation"] = `${styles.leftheadLose} 1s forwards`
                          }else{
                            // 平局
                            // 不做处理
                          }
                      } 
                      
                      

                        clearInterval(timer)
                        
                    },1000)

                    // 打开结果弹窗
                    setTimeout(()=>{
                        // dispatch({
                        //   type:"nationalday2022/save",
                        //   payload:{pkresultVisible:true,pkingModalVisible:false}
                        // })
                    },2000)
                   
                    clearInterval(timer)
                  }
                  const total = temprivalScore+myScore
                  if(total===0){
                    setleftWidth(50)
                    setrightWidth(50)
                    setrivalScore(temprivalScore)
                    clearInterval(timer)
                    setvsopacity(0)
                    setTimeout(()=>{
                      // dispatch({
                      //   type:"nationalday2022/save",
                      //   payload:{pkresultVisible:true,pkingModalVisible:false}
                      // })
                    },1000)
                   
                  }else{
                    if( pkmodalTypeRef.current ==107){
                      // 互换一下占比
                        setrightWidth((myScore/total)*100)
                        setleftWidth((temprivalScore/total)*100)
                        setrivalScore(temprivalScore)
                      }else{
                        setleftWidth((myScore/total)*100)
                        setrightWidth((temprivalScore/total)*100)
                        setrivalScore(temprivalScore)
                      }
                   
                  }
                 
            },500)
        },500)
      })
    }else{
      isBegin.current==false
    }
  },[])

  return (
    <>
      <div className={styles.pking}>
        <div
          className={styles.content}
        >
          <div className={styles.left_div} ref={leftRef}  style={{width:`${leftWidth}%`}}>
            <i className={styles.girl_icon} ref={leftpeopleRef} />
            <div className={styles.light}/>
          </div>
         
          <div className={styles.right_div}  style={{width:`${rightWidth}%`}}>
            <i className={styles.boy_icon} ref={rightpeopleRef}/>
            <div className={styles.light}/>
            <i className={styles.vs_icon} style={{opacity:vsopacity}}/>
          </div>
         
          <div className={styles.user_box} style={{opacity:opacity}}>
            <div ref={leftheadportraitRef}>
              <i className={styles.user_icon} />
              <span>我</span>
            </div>
            <div ref={rightheadportraitRef}>
              <i className={styles.user_icon} />
              <span>{pkResults?.rivalName}</span>
            </div>
          </div>

           <div className={styles.pkProgress} style={{opacity:opacity}}>
              <span className={styles.left_toast}>
                <i className={styles.arrow_down} />
                {pkResults?.myScore}{text[pkmodalType]?.unit}
              </span>
              <span className={styles.right_toast}>
                <i className={styles.arrow_up} />
                {rivalScore}{text[pkmodalType]?.unit}
              </span>

                <div className={styles.inner}>
                  <div className={styles.yellow}/>
                   <div className={styles.leftProgress} 
                   style={{width:`${leftWidth}%`}}
                   > </div>
                  <div className={styles.rightProgress}
                    style={{width:`${rightWidth}%`}}
                  > </div>
                </div>
              </div>
        </div>
      </div>
      {/* <Pkresult/> */}
    </>
  );
};
export default PkingModal;


// 动画
@keyframes vsAnimation {


  50%{
    transform: scale(1) skew(15deg);
  }
  80%{
    transform: scale(1.2) skew(15deg);
  }
  100% {
    transform: scale(1) skew(15deg);
  }
}

@keyframes leftWin {
  90% {
    transform: scale(1.15) skew(15deg) translateX(-20%);
  }
  100% {
    transform: scale(1.1) skew(15deg) translateX(0%);
  }
}

@keyframes rightLose {
  85% {
    transform: translateX(-5%) skew(15deg);
  }
  100% {
    transform: translateX(100%)  skew(15deg);
  }
}

@keyframes leftLose {
  85% {
    transform: translateX(5%) skew(15deg);
  }
  100% {
    transform: translateX(-100%)  skew(15deg);
  }
}

@keyframes leftheadLose {
  85% {
    transform: translateX(5%)
  }
  100% {
    transform: translateX(-130%);
  }
}
@keyframes rightheadLose {
  85% {
    transform: translateX(-5%)
  }
  100% {
    transform: translateX(130%);
  }
}

@keyframes rightWin {
  90% {
    transform: scale(1.15) skew(15deg) translateX(-20%);
  }
  100% {
    transform: scale(1.1) skew(15deg) translateX(0%);
  }
}

// 相撞的动画
@keyframes leftstrike{
    100%{
      left: 0.8rem;
    }
}

@keyframes rightstrike{
    100%{
      right: 2.2rem;
    }
}


.pking {

  height: 100vh;
  width: 100vw;
  overflow: hidden;
  .content {
    height: 100%;
    width: 130%;
    position: relative;
    .left_div {
      width: 50%;
      height: 40%;
      background: linear-gradient(to right, #f26c7312, #F26C73);
      position: absolute;
      // left: -0.7rem;
      left: -6rem;
      top: 15%;
      transform: skew(-15deg);
      animation: leftstrike 1s  forwards 0.5;
      transition: width 2s;
      .light{
        position: absolute;
        right: 0rem;
        top: -1.5rem;
        background: linear-gradient(rgba(255, 255, 255, 0.2), #fff, rgba(255, 255, 255, 0.2));
        width: 0.1rem;
        height: 9.4rem;
        border-radius: 40%;
        box-shadow: 0 0 0.2rem #fff;
      }
      .girl_icon {
        width: 5.4rem;
        height: 8.76rem;
        display: inline-block;
        background: transparent url("../../img/pkingModal/girl_icon.png")
          no-repeat;
        background-size: contain;
        position: absolute;
        right: -0.3rem;
        top: -1.5rem;
        transform: skew(15deg);
      }
    }
    .right_div {
      width: 50%;
      height: 40%;
      background: linear-gradient(to right, #38C2FC, #38c1fc38);
      display: inline-block;
      transform: skew(-15deg);
      position: absolute;
      right: -4rem;
      bottom: 36%;
      animation: rightstrike 1s  forwards 0.5;
      transition: width 2s;
    
      .light{
        position: absolute;
        left: 0rem;
        top: -2.4rem;
        background: linear-gradient(rgba(255, 255, 255, 0.2), #fff, rgba(255, 255, 255, 0.2));
        width: 0.1rem;
        height: 9.4rem;
        border-radius: 40%;
        box-shadow: 0 0 0.2rem #fff;
      }

      .boy_icon {
        width: 5.3rem;
        height: 9rem;
        display: inline-block;
        background: transparent url("../../img/pkingModal/boy_icon.png")
          no-repeat;
        background-size: contain;
        position: absolute;
        left: 0.8rem;
        top: -2.4rem;
        transform: skew(15deg);
      }
    }
    .vs_icon {
      width: 3.3rem;
      height: 4.3rem;
      background: transparent url("../../img/pkingModal/vs-icon.png")
        no-repeat;
      background-size: cover;
      display: inline-block;
      position: absolute;
      top: 5%;
      left: -1.2rem;
      animation: vsAnimation 1s;
      transform: skew(15deg);
      transition: opacity 1s;
    }
    .user_box {
      width: 80%;
      display: flex;
      justify-content: space-around;
      top: 45%;
      position: absolute;
      transition: opacity 2s;
      opacity: 0;
      > div {
        display: flex;
        flex-direction: column;
        > span {
          font-size: 0.3rem;
          font-weight: 600;
          color: black;
          margin-top: 0.2rem;
          text-align: center;
        }
      }
      > div:first-child {
        .user_icon {
          background: transparent
            url("../../img/pkingModal/right_user.png") no-repeat;
          background-size: cover;
        }
        animation: leftUserAnimation 0.4s cubic-bezier(0.95, 0.65, 0.35, 0.05);
        -webkit-animation: leftUserAnimation 0.4s
          cubic-bezier(0.95, 0.65, 0.35, 0.05);
      }
      > div:last-child {
        .user_icon {
          background: transparent
            url("../../img/pkingModal/left_user.png") no-repeat;
          background-size: cover;
        }
        animation: righttUserAnimation 0.4s cubic-bezier(0.95, 0.65, 0.35, 0.05);
        -webkit-animation: righttUserAnimation 0.4s
          cubic-bezier(0.95, 0.65, 0.35, 0.05);
      }
      .user_icon {
        width: 2.31rem;
        height: 2.31rem;
        display: inline-block;
      }
    }
    .progress_bar {
      bottom: 17%;
      position: absolute;
      width: 100vw;
      .left_pg {
        width: 3rem;
        height: 0.6rem;
        background: transparent
          url("../../img/pkingModal/left_progress.png") no-repeat;
        background-size: cover;
        display: inline-block;
        position: relative;
        z-index: 1;
        .left_toast {
          background-color: #fe5442;
          padding: 0.1rem 0.2rem;
          border-radius: 0.1rem;
          display: inline-block;
          position: relative;
          top: -1rem;
          left: -0.3rem;
          color: #fff;
          font-size: 0.28rem;
        }
        .arrow_down {
          width: 0.15rem;
          height: 0.15rem;
          display: inline-block;
          background-color: #fe5442;
          transform: rotate(45deg);
          position: absolute;
          bottom: -0.05rem;
        }
      }
      .middle {
        background-color: #fdffc6;
        width: 0.5rem;
        height: 0.48rem;
        display: inline-block;
        position: absolute;
        left: 3.5rem;
        top: 0.02rem;
      }
      .right_pg {
        width: 3rem;
        height: 0.6rem;
        background: transparent
          url("../../img/pkingModal/right_progress.png") no-repeat;
        background-size: cover;
        display: inline-block;
        position: relative;
        z-index: 1;
        left: -0.15rem;
        .right_toast {
          background-color: #fa8236;
          padding: 0.1rem 0.2rem;
          border-radius: 0.1rem;
          display: inline-block;
          position: relative;
          left: 0;
          top: 0.9rem;
          color: #fff;
          font-size: 0.28rem;
        }
        .arrow_up {
          width: 0.15rem;
          height: 0.15rem;
          display: inline-block;
          background-color: #fa8236;
          transform: rotate(45deg);
          position: absolute;
          top: -0.05rem;
          right: 0.2rem;
        }
      }
    }
    > p {
      position: absolute;
      bottom: 3%;
      width: 100vw;
      color: #fff;
      font-size: 0.3rem;
    }

    .pkProgress {
      transition: opacity 2s;
      opacity: 0;
      position: absolute;
      // top: 9.5rem;
      bottom: 18%;
      width: 70%;
      height: 0.68rem;
      background: #fee1d0aa;
      // margin: auto;
      margin-top: 0.8rem;
      border-radius: 0.5rem;
      display: flex;
      padding: 0.04rem 0rem;
      left:0.35rem;
      .left_toast {
        min-width: 1.9rem;
        background-color: #fe5442;
        padding: 0.1rem 0.2rem;
        border-radius: 0.1rem;
        display: inline-block;
        position: absolute;
        top: -1rem;
        left: 0rem;
        color: #fff;
        font-size: 0.28rem;
        .arrow_down {
          width: 0.15rem;
          height: 0.15rem;
          display: inline-block;
          background-color: #fe5442;
          transform: rotate(45deg);
          position: absolute;
          bottom: -0.05rem;
        }
      }

      .right_toast {
        background-color: #fa8236;
        min-width: 1.9rem;
        padding: 0.1rem 0.2rem;
        border-radius: 0.1rem;
        display: inline-block;
        position: absolute;
        right: 0;
        top: 0.9rem;
        color: #fff;
        font-size: 0.28rem;
        .arrow_up {
          width: 0.15rem;
          height: 0.15rem;
          display: inline-block;
          background-color: #fa8236;
          transform: rotate(45deg);
          position: absolute;
          top: -0.05rem;
          right: 0.2rem;
        }
      }

      .inner {
        position: relative;
        border-radius: 0.4rem;
        height: 100%;
        width: 100%;
        margin: auto;
      }
      .yellow{
        position: absolute;
        background-color: #FFFFDC;
        width: 95%;
        height: 95%;
        border-radius: 0.4rem;
        left: 0.2rem;
        top: 0.02rem;
      }

      .leftProgress {
        position: absolute;
        top: 0;
        left: 0.06rem;
        height: 98%;
        width: 0;
        transition: width 1s;
        overflow: hidden;
        border-radius: 0.4rem 0 0 0.4rem;
        &::after{
          content: '';
          width: 100%;
          height: 100%;
          background: linear-gradient(#FFB6AE,#FE5442 20%);
          display: block;
          transform: skewX(-10deg);
          position: absolute;
          top: 0;
          left: -0.1rem;
        }
      }

      .rightProgress {
        position: absolute;
        top: 0;
        right: 0.06rem;
        width: 0;
        height: 98%;
        transition: width 1s;
        overflow: hidden;
        border-radius: 0 0.4rem  0.4rem 0;
        &::after{
          content: '';
          width: 100%;
          height: 100%;
          background: linear-gradient(#FFBC8C,#FF9344 20%);
          display: block;
          transform: skewX(-10deg);
          position: absolute;
          top: 0;
          right: -0.1rem;
        }
      }
    }
  }

}
HTML/CSS 实现各类进度条的多种方式
ScriptWELL的博客
09-26 1783
通过灵活运用 CSS 的样式和属性，我们可以创建出各种形式的进度条来满足不同的需求。在前端开发中，进度条是常见的元素之一，用于显示任务、加载、上传等操作的进度。本文将介绍多种使用 HTML 和 CSS 实现各类进度条的方式，并提供相应的源代码。水平进度条是最常见的进度条类型，用于表示任务的完成度或加载进度。类来表示不同的进度段，并通过设置各自的宽度来控制显示的进度。在上面的代码中，我们将宽度设置为固定值，将高度设置为百分比来实现垂直进度条。来包裹圆形进度条，并设置了固定的宽度和高度。属性来控制进度的显示。
基于腾讯云开发与“人·事·财·物”架构理念的家政预约小程序设计与实现
最新发布
低代码布道师的博客
07-06 1093
（建议200-300字）本论文深入探讨并实践了基于腾讯云开发技术，设计与实现一款功能完善的家政预约小程序。针对传统家政服务行业在信息流转、服务预约与多角色协作中的痛点，本系统以“人、事、财、物”为核心架构理念，构建了一套多角色（顾客、客服、管理员、工人）协同的数字化服务平台。通过微信小程序承载用户端服务，H5应用赋能工人，并搭建管理员/客服后台，实现了从服务浏览、在线预约、订单流转（派单、接单、服务完成）、在线支付、服务评价等全生命周期管理。论文详细阐述了系统在业务架构、数据架构、应用架构。
css实现进度条并用百分比展示进度
qq_52222760的博客
06-14 2124
前端自主展示一个进度条动画；根据后端传来的实时百分比展示进度
html+css实现的PK进度条.根据双主的数据生成相应长度的红色蓝色条
01-24
html+css制作的PK进度条.zip
不只是答题：用WebSocket和SpringBoot让双人PK变得刺激又好玩
m0_62551536的博客
03-15 2014
本篇文章介绍如何使用WebSocket技术和Java语言搭配Spring框架，实现一个实时多人协同对战功能的后端架构。通过WebSocket实现即时消息交换、玩家匹配、状态同步等核心功能。具体技术细节包括状态同步、异常处理与稳定性维护、用户状态设置、用户匹配机制和并发错误避免等方面。详述整个对战流程的实现过程，包括对战前的玩家匹配、对战中的状态同步和答题逻辑，以及对战后的胜负判断和数据广播。
CSS实现PK条效果
cainiao1412的博客
08-03 1258
代码】CSS实现PK条效果。
CSS3 VS CSS2大PK
weixin_34297704的博客
08-20 196
本文作者通过制作同样的页面对CSS2和CSS3进行了比较，我们来看一下谁更胜一筹。CSS3已经面世很久，目前仍处于开发完善阶段。不过网上关于CSS3的介绍、使用方法和夸奖已经传得沸沸扬扬了，建站学也有少关于CSS3的介绍。CSS3比CSS2到底是不是真的好？到底有什么优越之处呢？本文借鉴国外作者的文章（原文可以查看文章底部链接），从CSS3编写及作用原理以外的角度分析一下CSS3与CSS的差别。笔...
canvas中普通动效与粒子动效的实现代码示例
09-22
在实际应用中，结合CSS3和其他Web技术，Canvas动效能够为网页带来更加生动和吸引人的用户体验。无论是教育、游戏、艺术还是数据可视化，Canvas动效都是一种强大的工具，值得开发者深入研究和探索。
微信小程序各种动效
Ordinary-life的博客
06-09 7207
文字跑马灯效果： http://www.wxapp-union.com/portal.php?mod=view&aid=1038 触摸水波涟漪效果： http://www.wxapp-union.com/portal.php?mod=view&aid=1350 下拉菜单效果： http://...
基于jQuery与CSS3的动态数据对比特效实现
“jquery+css3动态数据对比特效代码”是一款基于jQuery与CSS3技术实现的前端交互式数据可视化插件，其核心功能是通过类似进度条的形式，直观地展示两组数据之间的对比关系，视觉表现上类似于社交软件中常见的“QQ PK...
CSS实现进度条和订单进度条
12-30
简单地效果图如下：    CSS实现进度条： html结构： XML/HTML Code复制内容到剪贴板 <div u00a0id=progress>       <span>70%</span>   </div>     css样式： CSS Code复制内容到剪贴板 #progress{        width: 50%;         height: 30px;        border:1px solid #ccc;        border-radius: 15px;        margin: 50px
卡牌特效: svg不规则倒计时动效
腾讯技术工程
07-16 831
导语：直播过程中，往往会有各种动画特效增强直播效果，近期需求中，设计要求在企鹅电竞PC官网上实现一种卡牌效果，在不规则图片上叠加倒计时效果。前端项目中，往往使用css来完...
纯CSS实现的拳皇对战动画效果
weixin_40896052的博客
07-13 149
前言每天挤一篇的日更让我日渐憔悴，今天闲着没事，翻出了拳皇98，打了一会儿以后，突然来了灵感，拿css做一个拳皇人物动作展示效果不就就可以再 水需要用到的css属性预告flex布局 经典flex,不多赘述-webkit-box-reflect 倒影，加点花活儿~linear-gradient 来个斑马条纹调剂调剂trans...
网页设计之css+div PK table+css
码农之道
02-16 546
用过div+css作个整个网站，如果是纯粹的div的布局是比较麻烦的，尤其是你div里面嵌套div的，div布局的时候，你有些页面效果还是要舍弃一点的，比如图片的圆角，这些如果套div比较麻烦，在一个div在VS2005设计器里面可能变形，如果过多的套div，你实现ajax拖动效果的时候比较麻烦，所以我觉得眼下还是div+嵌套table比较好。 　　圆角——可以用div+css做出一样漂亮的圆角
DIV+CSS PK TABLE+CSS
网站开发初中级代码参考-转载
05-19 207
版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章原始出版、作者信息和本声明。否则将追究法律责任。http://blog.youkuaiyun.com/mayongzhan - 马永占,myz,mayongzhan DIV+CSS PK TABLE+CSS 最近DD鱼发过来的网站.发现都是div,还以为是偶然,今天去搜proxy的时候发现,满大街都是div+CSS.尤其是还有个贴把经典十个...
html 条形进度条 互动,如何使用css3实现条形进度条效果
weixin_29480659的博客
06-05 347
使用css3实现条形进度条效果原理首先实用HTML构建所需的两个div，利用position：absolute使得两个div重合，根据要求区别不一样的颜色。利用keyframe属性使得重合的进度条移动起来，再用animation进行动画控制，语法为@keyframesanimationname{keyframes-selector{css-styles;}}ps：如果有对以上知识不了解的小伙伴请查...
css3 实现一个k歌效果和一个进度条的效果
weixin_33805557的博客
09-15 197
先看两个效果： 相信这两个效果很多人都想要，哈哈，我看到很多app，下载进度就是这样的，虽然平淡，但是很有用，只有你遇到了，才知道为什么有用了。 下面就简单分析一下实现原理。 首先，用到的css3特性有：css3线性渐变linear-gradient，和-webkit-background-clip，-webkit-text-fill-...
实现对战进度条
Jack, what else can you do besides holding your little darling?
09-16 804
【代码】实现对战进度条。
HarmonyOS NEXT应用开发—投票动效实现案例
maniuT的博客
03-18 1176
本示例介绍使用绘制组件中的Polygon组件配合使用显式动画以及borderRadius实现投票pk组件。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值