SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
let tabbarItem = document.querySelectorAll('.tabbar__item')
tabbarItem.forEach(item => {
    item.addEventListener('click', function () {
        tabbarItem.forEach(item => {
            item.classList.remove('on')
        })
        this.classList.add('on')
    })
})

            
<svg width="0" height="0">
	<defs>
		<!-- 转场渐变 -->
		<linearGradient id="transition1_linear" x1="55.4167" y1="7.29167" x2="15.3125" y2="60.5208" gradientUnits="userSpaceOnUse">
			<stop stop-color="#F96C81" />
			<stop offset="1" stop-color="#FFB2C1" />
		</linearGradient>
		<linearGradient id="transition2_linear" x1="55.4167" y1="7.29167" x2="15.3125" y2="60.5208" gradientUnits="userSpaceOnUse">
			<stop stop-color="#FED966" />
			<stop offset="1" stop-color="#FFECB0" />
		</linearGradient>
		<linearGradient id="transition3_linear" x1="55.4167" y1="7.29167" x2="15.3125" y2="60.5208" gradientUnits="userSpaceOnUse">
			<stop stop-color="#86B4FF" />
			<stop offset="1" stop-color="#698AFF" />
		</linearGradient>
		<!-- 转场元素 -->
		<g id="transition_move1">
			<circle cx="24" cy="24" r="35" fill="url(#transition1_linear)"></circle>
		</g>
		<g id="transition_move2">
			<circle cx="24" cy="24" r="35" fill="url(#transition2_linear)"></circle>
		</g>
		<g id="transition_move3">
			<circle cx="24" cy="24" r="35" fill="url(#transition3_linear)"></circle>
		</g>
	</defs>
</svg>
<div class="tabbar">
	<div class="tabbar__item on">
		<div class="tabbar__svg">
			<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
				<!-- 裁切路径 -->
				<clipPath id="clipPath1">
					<path id="home-clip-path" d="M27.9774 1.12273C25.5352 -0.37424 22.4648 -0.374244 20.0226 1.12272L6.00262 9.71614C2.44202 11.5204 0 15.2271 0 19.5068V37.0411C0 43.0935 4.88417 48 10.9091 48H37.0909C43.1158 48 48 43.0935 48 37.0411V19.5068C48 15.2271 45.558 11.5204 41.9974 9.71615L27.9774 1.12273Z"
					 fill="#C4C4C4" />
				</clipPath>
				<!-- 组，图标路的元素集合 -->
				<g clip-path="url(#clipPath1)">
					<!-- 外线框 -->
					<path id="home-border" d="M27.9774 1.12273C25.5352 -0.37424 22.4648 -0.374244 20.0226 1.12272L6.00262 9.71614C2.44202 11.5204 0 15.2271 0 19.5068V37.0411C0 43.0935 4.88417 48 10.9091 48H37.0909C43.1158 48 48 43.0935 48 37.0411V19.5068C48 15.2271 45.558 11.5204 41.9974 9.71615L27.9774 1.12273Z"
					 stroke="#B1BACD" stroke-width="8" />
					<use class="transition_move1" href="#transition_move1"></use>
					<use class="transition_move2" href="#transition_move2"></use>
					<use class="transition_move3" href="#transition_move3"></use>
					<!-- 灰色小圆 -->
					<path id="home-circle" d="M31 28C31 31.866 27.866 35 24 35C20.134 35 17 31.866 17 28C17 24.134 20.134 21 24 21C27.866 21 31 24.134 31 28Z"
					 stroke="#B1BACD" stroke-width="4" />
				</g>
			</svg>
		</div>
		<div class="tabbar__name">首页</div>
	</div>
	<div class="tabbar__item">
		<div class="tabbar__svg">
			<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
				<!-- 裁切路径 -->
				<clipPath id="clipPath2">
					<path id="explore-clip-path" d="M0 14.5714C0 7.62842 5.60617 2 12.5217 2H35.4783C42.3938 2 48 7.62842 48 14.5714V33.4286C48 40.3716 42.3938 46 35.4783 46H12.5217C5.60617 46 0 40.3716 0 33.4286V14.5714Z"
					 fill="#C4C4C4" />
				</clipPath>
				<!-- 组，图标路的元素集合 -->
				<g clip-path="url(#clipPath2)">
					<path id="explore-border" d="M0 14.5714C0 7.62842 5.60617 2 12.5217 2H35.4783C42.3938 2 48 7.62842 48 14.5714V33.4286C48 40.3716 42.3938 46 35.4783 46H12.5217C5.60617 46 0 40.3716 0 33.4286V14.5714Z"
					 stroke="#B1BACD" stroke-width="8" />
					<use class="transition_move1" href="#transition_move1"></use>
					<use class="transition_move2" href="#transition_move2"></use>
					<use class="transition_move3" href="#transition_move3"></use>
					<path id="explore-arrow" d="M19.4845 19.2494C19.4845 18.4796 20.3178 17.9984 20.9845 18.3833L30.1441 23.6717C30.8108 24.0566 30.8108 25.0188 30.1441 25.4037L20.9845 30.692C20.3178 31.0769 19.4845 30.5958 19.4845 29.826V19.2494Z"
					 stroke="#B1BACD" stroke-width="4" stroke-linejoin="round" />
				</g>
			</svg>
		</div>
		<div class="tabbar__name">探索</div>
	</div>
	<div class="tabbar__item">
		<div class="tabbar__svg">
			<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
				<!-- 裁切路径 -->
				<clipPath id="clipPath3">
					<path id="chat-clip-path" d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 30.5467 2.62123 36.4811 6.87143 40.8111L4.74164 44.5C3.97184 45.8333 4.93408 47.5 6.47369 47.5L23.5 48C23.5 48 23.5035 47.9983 23.5102 47.9951C23.673 47.9984 23.8363 48 24 48Z"
					 fill="#C4C4C4" />
				</clipPath>
				<!-- 组，图标路的元素集合 -->
				<g clip-path="url(#clipPath3)">
					<path id="chat-border" d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 30.5467 2.62123 36.4811 6.87143 40.8111L4.74164 44.5C3.97184 45.8333 4.93408 47.5 6.47369 47.5L23.5 48C23.5 48 23.5035 47.9983 23.5102 47.9951C23.673 47.9984 23.8363 48 24 48Z"
					 stroke="#B1BACD" stroke-width="8" stroke-linejoin="round" />
					<use class="transition_move1" href="#transition_move1"></use>
					<use class="transition_move2" href="#transition_move2"></use>
					<use class="transition_move3" href="#transition_move3"></use>
					<circle id="chat-circle1" cx="13" cy="24" r="3" fill="#B1BACD" />
					<circle id="chat-circle2" cx="25" cy="24" r="3" fill="#B1BACD" />
					<circle id="chat-circle3" cx="37" cy="24" r="3" fill="#B1BACD" />
				</g>
			</svg>
		</div>
		<div class="tabbar__name">尬聊</div>
	</div>
	<div class="tabbar__item">
		<div class="tabbar__svg">
			<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
				<!-- 裁切路径 -->
				<clipPath id="clipPath4">
					<path id="me-clip-path" d="M48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24C0 10.7452 10.7452 0 24 0C37.2548 0 48 10.7452 48 24Z"
					 fill="#C4C4C4" />
				</clipPath>
				<!-- 组，图标路的元素集合 -->
				<g clip-path="url(#clipPath4)">
					<path id="me-border" d="M48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24C0 10.7452 10.7452 0 24 0C37.2548 0 48 10.7452 48 24Z"
					 stroke="#AFB8CC" stroke-width="8" />
					<use class="transition_move1" href="#transition_move1"></use>
					<use class="transition_move2" href="#transition_move2"></use>
					<use class="transition_move3" href="#transition_move3"></use>
					<path id="me-line" d="M14 30C20.5 35.5 21 30 24 30C26.5008 30 26.5 35.5 34 30" stroke="#AFB8CC" stroke-width="4" stroke-linecap="round"
					 stroke-linejoin="round" />
				</g>
			</svg>
		</div>
		<div class="tabbar__name">我的</div>
	</div>
</div>

            
@charset "UTF-8";
* {
  padding: 0;
  margin: 0; }

/**
 * rem 基础值，将750分成10份，每一份1rem = 75px
 */
/**
 * px转rem
 * @param {Object} $px
 */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  height: 1.33333rem;
  background-color: #FFFFff;
  border-top: 1px solid #eee;
  user-select: none; }
  .tabbar__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1; }
  .tabbar__svg {
    display: flex;
    width: 0.64rem;
    height: 0.64rem; }
    .tabbar__svg svg {
      width: 100%;
      height: 100%; }
  .tabbar__name {
    height: 0.4rem;
    padding-top: 0.05333rem;
    font-size: 0.26667rem;
    transition: color .3s;
    color: #AFB8CC; }
  .tabbar .transition_move1, .tabbar .transition_move2, .tabbar .transition_move3 {
    transform: translate(-50px, 50px); }
  .tabbar #home-circle {
    stroke-dasharray: 44 44;
    stroke-dashoffset: 0; }
  .tabbar #explore-arrow {
    stroke-dasharray: 39 39;
    stroke-dashoffset: 0; }
  .tabbar #me-line {
    stroke-dasharray: 23 23;
    stroke-dashoffset: 0; }
  .tabbar #chat-circle1 {
    transform-origin: 13px 24px; }
  .tabbar #chat-circle2 {
    transform-origin: 25px 24px; }
  .tabbar #chat-circle3 {
    transform-origin: 37px 24px; }
  .tabbar .on .tabbar__name {
    color: #698AFF; }
  .tabbar .on svg {
    animation: heartbeat 1s; }
  .tabbar .on #home-circle {
    animation: home-circle 1s ease forwards; }
  .tabbar .on #explore-arrow {
    animation: explore-arrow 1s ease forwards; }
  .tabbar .on #me-line {
    animation: me-line 1s ease forwards; }
  .tabbar .on #chat-circle1 {
    animation: chat-circle 1s ease forwards; }
  .tabbar .on #chat-circle2 {
    animation: chat-circle 1s .15S  ease forwards; }
  .tabbar .on #chat-circle3 {
    animation: chat-circle 1s .3S ease forwards; }
  .tabbar .on .transition_move1 {
    animation: transition-move 0.5s 0.3s forwards; }
  .tabbar .on .transition_move2 {
    animation: transition-move 0.5s 0.35s forwards; }
  .tabbar .on .transition_move3 {
    animation: transition-move 0.5s 0.4s forwards; }

/**
 * 心跳动画
 */
@keyframes heartbeat {
  0% {
    transform: scale(1); }
  20% {
    transform: scale(0.8); }
  40% {
    transform: scale(1); }
  60% {
    transform: scale(0.9); }
  80%,100% {
    transform: scale(1); } }
/**
 * 路径动画
 * @params {string} $name 关键帧名字
 * @params {string} $length 路径长度
 * @params {string} $startColor 开始动画路径的颜色
 * @params {string} $endColor 结束动画路径的颜色
 */
@keyframes home-circle {
  0% {
    stroke: #B1BACD;
    stroke-dashoffset: 0; }
  50% {
    stroke: #B1BACD;
    stroke-dashoffset: 44; }
  50.1% {
    stroke: #ffffff;
    stroke-dashoffset: -44; }
  100% {
    stroke: #ffffff;
    stroke-dashoffset: 0; } }
@keyframes explore-arrow {
  0% {
    stroke: #B1BACD;
    stroke-dashoffset: 0; }
  50% {
    stroke: #B1BACD;
    stroke-dashoffset: 39; }
  50.1% {
    stroke: #ffffff;
    stroke-dashoffset: -39; }
  100% {
    stroke: #ffffff;
    stroke-dashoffset: 0; } }
@keyframes me-line {
  0% {
    stroke: #B1BACD;
    stroke-dashoffset: 0; }
  50% {
    stroke: #B1BACD;
    stroke-dashoffset: 23; }
  50.1% {
    stroke: #ffffff;
    stroke-dashoffset: -23; }
  100% {
    stroke: #ffffff;
    stroke-dashoffset: 0; } }
/*闪屏移动*/
@keyframes transition-move {
  100% {
    transform: translate(0, 0); } }
@keyframes chat-circle {
  0% {
    fill: #B1BACD;
    transform: scale(1); }
  50% {
    fill: #B1BACD;
    transform: scale(0); }
  50.1% {
    fill: #ffffff;
    transform: scale(1) translateY(0); }
  60% {
    fill: #ffffff;
    transform: scale(1) translateY(-10px); }
  85% {
    fill: #ffffff;
    transform: scale(1) translateY(10px); }
  100% {
    fill: #ffffff;
    transform: scale(1) translateY(0); } }

/*# sourceMappingURL=index.css.map */


            

                
本项目引用的自定义外部资源