50年前端开发写CSS3炫酷动画（不炫酷来打我）

淡淡的烟草味﹌ 2022-12-10 14:54 173阅读 0赞

# CSS3炫酷动画教程 #

以前问了很多身边同事，他们对动画的掌握如何，了解一些css3的基本动画吗，即使他们工作几年了，我感觉他们对原生css3动画了解的并不多，只有他们在用到的时候才会看看，而且基本都是用第三方动画库，笔者个人认为君子确实要善假于物，但是做为一个慢慢成长的技术开发，你必须了解原生动画是如何写的。项目中往往因为一个动画而去引入一个动画库是不值得的，性能也比不上原生动画。

另外我想和大家分享的是能用css实现的就不要用js,因为js操作DOM是很耗性能的，浏览器最怕的就是重排，就可能是你操作DOM引起的，这就是为啥Vue,React,Angular都采用虚拟节点，而不去直接操作真实DOM,就是考虑到性能问题。下面就跟着笔者一起来学习一下CSS3炫酷动画。

--------------------

# 基本概念 #

css3动画分以下三种：  
1.transition(过渡效果)       用法transition: all 3s linear  
2.transform()       用法transform: translate(10px,10px);x,y偏移，transform: rotate(360deg);旋转，transform: scale(1.2);缩放，transform: skew(30deg,50deg);倾斜  
3.animation帧动画，可以用from 和 to,也可以用0% \{\}，100%\{\}

下面就直接看实例吧

# 一、初级帧动画尝试 #

上下左右移动并且变色动画，示例代码如下：

<!DOCTYPE html>
    <html>
    <head>
    <style> 
    div {
    	width:100px;
    	height:100px;
    	background:red;
    	position:relative;
    	animation:myAnimation 4s infinite; /*动画名字，持续时间，是否一直播放动画*/
    	animation-direction:alternate; /*动画播放完后是否方向播放*/
    }
    
    @keyframes myAnimation  {  /*自定义的动画名字*/
    	0%   {background:red; left:0px; top:0px;}
    	25%  {background:yellow; left:200px; top:0px;}
    	50%  {background:blue; left:200px; top:200px;}
    	75%  {background:green; left:0px; top:200px;}
    	100% {background:red; left:0px; top:0px;}
    }
    </style>
    </head>
    <body>
    	<div></div>
    </body>
    </html>

效果图如下（笔者还不会放动态图，只能截图静态动画帧）：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcxMTk0_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcxMTk0_size_16_color_FFFFFF_t_70_pic_center 1]  
两个小球左右旋转移动动画，示例代码如下：

<!DOCTYPE html>
    <html>
    <head>
    <style> 
    .one, .two {
        display:inline-block;
        width:100px;
        height:100px;
        border-radius: 50%;
        background:cyan;
        text-align:center;
        line-height:100px;
        position:relative;
        animation:myAnimation 5s infinite;
        animation-direction:alternate;
    }
    
    @keyframes myAnimation {
        0% {
            left:0px;
            top:0px;
        }
        100% {
            left:400px; 
            top:0px;
            transform: rotate(360deg);
        }
    }
    </style>
    </head>
    <body>
        <div class="one">我会滚动哦</div>
        <div class="two">我会滚动哦</div>
    </body>
    </html>

效果图如下（左右移动并旋转的小球）：  
![在这里插入图片描述][20200927143754891.png_pic_center]

# 二、进阶动画演示 #

字节跳动动画代码如下（示例）：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .letter { 
                animation: bounce 1.5s cubic-bezier(0.05, 0, 0.2, 1) infinite alternate;
                display: inline-block;
                transform: translate3d(0, 0, 0);
                margin-top: 0.5em;
                font-size: 20px;
            }
            .letter:nth-child(1) { 
                animation-delay: 0s;
                color: #c9dd22;
            }
            .letter:nth-child(2) { 
                animation-delay: 0.3s;
                color: #2edfa3;
            }
            .letter:nth-child(3) { 
                animation-delay: 0.5s;
                color: #3eede7;
            }
            .letter:nth-child(4) { 
                animation-delay: 0.7s;
                color: #801da0;
            }
            .letter:nth-child(5) { 
                animation-delay: 0.9s;
                color: #896c39;
            }
            .letter:nth-child(6) { 
                animation-delay: 1.1s;
                color: #9d2933;
            }
            @keyframes bounce { 
                0% { 
                transform: translate3d(0, 0, 0);
                }
                100% { 
                transform: translate3d(0, 1em, 0);
                }
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <span class="letter">正</span>
            <span class="letter">在</span>
            <span class="letter">加</span>
            <span class="letter">载</span>
            <span class="letter">中</span>
            <span class="letter">.</span>
        </div>
    </body>
    </html>

效果图如下（文字依次上下跳动）：  
![在这里插入图片描述][20200927145243367.png_pic_center]

如果你感觉这个动画还不够炫酷，那么接下来一个肯定又炫又酷（嵌套滚动立方体，鼠标悬浮立方体散开），直接上代码：（代码中的图片要换成自己的图片地址）

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .xz{ 
            position:absolute;
            top:0px;
            left:0px;
            width:100px;
            height:100px;
        }
        .wrap { 
            width: 100px;
            height: 100px;
            margin: 150px 0 0 150px;
            /*position: relative;*/
            position:absolute;
        }
        /*包裹所有容器样式*/
        .cube { 
            width: 50px;
            height: 50px;
            margin: 0 auto;
            transform-style: preserve-3d;
            transform: rotateX(-30deg) rotateY(-80deg);
            animation: rotate linear 20s infinite;
        }
        @keyframes rotate { 
            from { 
                transform: rotateX(0deg) rotateY(0deg);
            }
            to { 
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
        .cube div { 
            position: absolute;
            width: 200px;
            height: 200px;
            opacity: 0.5;
            transition: all .4s;
        }
        /*定义所有图片样式*/
        .pic { 
            width: 200px;
            height: 200px;
        }
        .cube .out_front { 
            transform: rotateY(0deg) translateZ(100px);
        }
        .cube .out_back { 
            transform: translateZ(-100px) rotateY(180deg);
        }
        .cube .out_left { 
            transform: rotateY(-90deg) translateZ(100px);
        }
        .cube .out_right { 
            transform: rotateY(90deg) translateZ(100px);
        }
        .cube .out_top { 
            transform: rotateX(90deg) translateZ(100px);
        }
        .cube .out_bottom { 
            transform: rotateX(-90deg) translateZ(100px);
        }
        /*定义小正方体样式*/
        .cube span { 
            display: block;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50px;
            left: 50px;
        }
        .cube .in_pic { 
            width: 100px;
            height: 100px;
        }
        .cube .in_front { 
            transform: rotateY(0deg) translateZ(50px);
        }
        .cube .in_back { 
            transform: translateZ(-50px) rotateY(180deg);
        }
        .cube .in_left { 
            transform: rotateY(-90deg) translateZ(50px);
        }
        .cube .in_right { 
            transform: rotateY(90deg) translateZ(50px);
        }
        .cube .in_top { 
            transform: rotateX(90deg) translateZ(50px);
        }
        .cube .in_bottom { 
            transform: rotateX(-90deg) translateZ(50px);
        }
        /*鼠标移入后样式*/
        .cube:hover .out_front { 
            transform: rotateY(0deg) translateZ(200px);
        }
        .cube:hover .out_back { 
            transform: translateZ(-200px) rotateY(180deg);
        }
        .cube:hover .out_left { 
            transform: rotateY(-90deg) translateZ(200px);
        }
        .cube:hover .out_right { 
            transform: rotateY(90deg) translateZ(200px);
        }
        .cube:hover .out_top { 
            transform: rotateX(90deg) translateZ(200px);
        }
        .cube:hover .out_bottom { 
            transform: rotateX(-90deg) translateZ(200px);
        }
    </style>
    </head>
    <body>
      <div class="xz">
    		
            <div class="wrap">
                
                <div class="cube">
                    
                    <div class="out_front">
                        <img src="./images/001.jpg" class="pic">
                    </div>
                    
                    <div class="out_back">
                        <img src="./images/002.jpg" class="pic">
                    </div>
                    
                    <div class="out_left">
                        <img src="./images/003.jpg" class="pic">
                    </div>
                    
                    <div class="out_right">
                        <img src="./images/004.jpg" class="pic">
                    </div>
                    
                    <div class="out_top">
                        <img src="./images/001.jpg" class="pic">
                    </div>
                    
                    <div class="out_bottom">
                        <img src="./images/002.jpg" class="pic">
                    </div>
    
                    
                    <span class="in_front">
                        <img src="./images/001.jpg" class="in_pic">
                    </span>
                    <span class="in_back">
                        <img src="./images/002.jpg" class="in_pic">
                    </span>
                    <span class="in_left">
                        <img src="./images/003.jpg" class="in_pic">
                    </span>
                    <span class="in_right">
                        <img src="./images/004.jpg" class="in_pic">
                    </span>
                    <span class="in_top">
                        <img src="./images/001.jpg" class="in_pic">
                    </span>
                    <span class="in_bottom">
                        <img src="./images/002.jpg" class="in_pic">
                    </span>
                </div>
            </div>
    	</div>
    </body>
    </html>

# 三、高级装逼动画演示 #

示例代码如下:(点击可以切换动画图形)，使用的是jquery+canvas以及动画的基本知识实现。

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>动态粒子效果</title>
    	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    	<style>
    		html,body {
    			width: 100%;
    			height: 100%;
    			margin: 0;
    			padding: 0;
    			overflow: hidden;
         	}
    		.container{
    			width: 100％;
    			height: 100%;
    			margin: 0;
    			padding: 0;
    			background-color: #000000;
    		}
    	</style>
    </head>
    <body>
    
    	<div id="jsi-particle-container" class="container"></div>
    	<script>
    		var RENDERER = {
    			PARTICLE_COUNT : 1000,
    			PARTICLE_RADIUS : 1,
    			MAX_ROTATION_ANGLE : Math.PI / 60,
    			TRANSLATION_COUNT : 500,
    			init : function(strategy){
    				this.setParameters(strategy);
    				this.createParticles();
    				this.setupFigure();
    				this.reconstructMethod();
    				this.bindEvent();
    				this.drawFigure();
    			},
    			setParameters : function(strategy){
    				this.$window = $(window);
    				this.$container = $('#jsi-particle-container');
    				this.width = this.$container.width();
    				this.height = this.$container.height();
    				this.$canvas = $('<canvas />').attr({width : this.width, height : this.height}).appendTo(this.$container);
    				this.context = this.$canvas.get(0).getContext('2d');
    				this.center = {x : this.width / 2, y : this.height / 2};
    				this.rotationX = this.MAX_ROTATION_ANGLE;
    				this.rotationY = this.MAX_ROTATION_ANGLE;
    				this.strategyIndex = 0;
    				this.translationCount = 0;
    				this.theta = 0;
    				this.strategies = strategy.getStrategies();
    				this.particles = [];
    			},
    			createParticles : function(){
    				for(var i = 0; i < this.PARTICLE_COUNT; i ++){
    					this.particles.push(new PARTICLE(this.center));
    				}
    			},
    			reconstructMethod : function(){
    				this.setupFigure = this.setupFigure.bind(this);
    				this.drawFigure = this.drawFigure.bind(this);
    				this.changeAngle = this.changeAngle.bind(this);
    			},
    			bindEvent : function(){
    				this.$container.on('click', this.setupFigure);
    				this.$container.on('mousemove', this.changeAngle);
    			},
    			changeAngle : function(event){
    				var offset = this.$container.offset(),
    					x = event.clientX - offset.left + this.$window.scrollLeft(),
    					y = event.clientY - offset.top + this.$window.scrollTop();
    				this.rotationX = (this.center.y - y) / this.center.y * this.MAX_ROTATION_ANGLE;
    				this.rotationY = (this.center.x - x) / this.center.x * this.MAX_ROTATION_ANGLE;
    			},
    			setupFigure : function(){
    				for(var i = 0, length = this.particles.length; i < length; i++){
    					this.particles[i].setAxis(this.strategies[this.strategyIndex]());
    				}
    				if(++this.strategyIndex == this.strategies.length){
    					this.strategyIndex = 0;
    				}
    				this.translationCount = 0;
    			},
    			drawFigure : function(){
    				requestAnimationFrame(this.drawFigure);
    				this.context.fillStyle = 'rgba(0, 0, 0, 0.2)';
    				this.context.fillRect(0, 0, this.width, this.height);
    				for(var i = 0, length = this.particles.length; i < length; i++){
    					var axis = this.particles[i].getAxis2D(this.theta);
    					this.context.beginPath();
    					this.context.fillStyle = axis.color;
    					this.context.arc(axis.x, axis.y, this.PARTICLE_RADIUS, 0, Math.PI * 2, false);
    					this.context.fill();
    				}
    				this.theta++;
    				this.theta %= 360;
    				for(var i = 0, length = this.particles.length; i < length; i++){
    					this.particles[i].rotateX(this.rotationX);
    					this.particles[i].rotateY(this.rotationY);
    				}
    				this.translationCount++;
    				this.translationCount %= this.TRANSLATION_COUNT;
    				if(this.translationCount == 0){
    					this.setupFigure();
    				}
    			}
    		};
    		var STRATEGY = {
    			SCATTER_RADIUS :150,
    			CONE_ASPECT_RATIO : 1.5,
    			RING_COUNT : 5,
    			getStrategies : function(){
    				var strategies = [];
    				for(var i in this){
    					if(this[i] == arguments.callee || typeof this[i] != 'function'){
    						continue;
    					}
    					strategies.push(this[i].bind(this));
    				}
    				return strategies;
    			},
    			createSphere : function(){
    				var cosTheta = Math.random() * 2 - 1,
    					sinTheta = Math.sqrt(1 - cosTheta * cosTheta),
    					phi = Math.random() * 2 * Math.PI;
    				return {
    					x : this.SCATTER_RADIUS * sinTheta * Math.cos(phi),
    					y : this.SCATTER_RADIUS * sinTheta * Math.sin(phi),
    					z : this.SCATTER_RADIUS * cosTheta,
    					hue : Math.round(phi / Math.PI * 30)
    				};
    			},
    			createTorus : function(){
    				var theta = Math.random() * Math.PI * 2,
    					x = this.SCATTER_RADIUS + this.SCATTER_RADIUS / 6 * Math.cos(theta),
    					y = this.SCATTER_RADIUS / 6 * Math.sin(theta),
    					phi = Math.random() * Math.PI * 2;
    				return {
    					x : x * Math.cos(phi),
    					y : y,
    					z : x * Math.sin(phi),
    					hue : Math.round(phi / Math.PI * 30)
    				};
    			},
    			createCone : function(){
    				var status = Math.random() > 1 / 3,
    					x,
    					y,
    					phi = Math.random() * Math.PI * 2,
    					rate = Math.tan(30 / 180 * Math.PI) / this.CONE_ASPECT_RATIO;
    				if(status){
    					y = this.SCATTER_RADIUS * (1 - Math.random() * 2);
    					x = (this.SCATTER_RADIUS - y) * rate;
    				}else{
    					y = -this.SCATTER_RADIUS;
    					x = this.SCATTER_RADIUS * 2 * rate * Math.random();
    				}
    				return {
    					x : x * Math.cos(phi),
    					y : y,
    					z : x * Math.sin(phi),
    					hue : Math.round(phi / Math.PI * 30)
    				};
    			},
    			createVase : function(){
    				var theta = Math.random() * Math.PI,
    					x = Math.abs(this.SCATTER_RADIUS * Math.cos(theta) / 2) + this.SCATTER_RADIUS / 8,
    					y = this.SCATTER_RADIUS * Math.cos(theta) * 1.2,
    					phi = Math.random() * Math.PI * 2;
    				
    				return {
    					x : x * Math.cos(phi),
    					y : y,
    					z : x * Math.sin(phi),
    					hue : Math.round(phi / Math.PI * 30)
    				};
    			}
    		};
    		var PARTICLE = function(center){
    			this.center = center;
    			this.init();
    		};
    		PARTICLE.prototype = {
    			SPRING : 0.01,
    			FRICTION : 0.9,
    			FOCUS_POSITION : 300,
    			COLOR : 'hsl(%hue, 100%, 70%)',
    			init : function(){
    				this.x = 0;
    				this.y = 0;
    				this.z = 0;
    				this.vx = 0;
    				this.vy = 0;
    				this.vz = 0;
    				this.color;
    			},
    			setAxis : function(axis){
    				this.translating = true;
    				this.nextX = axis.x;
    				this.nextY = axis.y;
    				this.nextZ = axis.z;
    				this.hue = axis.hue;
    			},
    			rotateX : function(angle){
    				var sin = Math.sin(angle),
    					cos = Math.cos(angle),
    					nextY = this.nextY * cos - this.nextZ * sin,
    					nextZ = this.nextZ * cos + this.nextY * sin,
    					y = this.y * cos - this.z * sin,
    					z = this.z * cos + this.y * sin;
    					
    				this.nextY = nextY;
    				this.nextZ = nextZ;
    				this.y = y;
    				this.z = z;
    			},
    			rotateY : function(angle){
    				var sin = Math.sin(angle),
    					cos = Math.cos(angle),
    					nextX = this.nextX * cos - this.nextZ * sin,
    					nextZ = this.nextZ * cos + this.nextX * sin,
    					x = this.x * cos - this.z * sin,
    					z = this.z * cos + this.x * sin;
    					
    				this.nextX = nextX;
    				this.nextZ = nextZ;
    				this.x = x;
    				this.z = z;
    			},
    			rotateZ : function(angle){
    				var sin = Math.sin(angle),
    					cos = Math.cos(angle),
    					nextX = this.nextX * cos - this.nextY * sin,
    					nextY = this.nextY * cos + this.nextX * sin,
    					x = this.x * cos - this.y * sin,
    					y = this.y * cos + this.x * sin;
    					
    				this.nextX = nextX;
    				this.nextY = nextY;
    				this.x = x;
    				this.y = y;
    			},
    			getAxis3D : function(){
    				this.vx += (this.nextX - this.x) * this.SPRING;
    				this.vy += (this.nextY - this.y) * this.SPRING;
    				this.vz += (this.nextZ - this.z) * this.SPRING;
    				
    				this.vx *= this.FRICTION;
    				this.vy *= this.FRICTION;
    				this.vz *= this.FRICTION;
    				
    				this.x += this.vx;
    				this.y += this.vy;
    				this.z += this.vz;
    				
    				return {x : this.x, y : this.y, z : this.z};
    			},
    			getAxis2D : function(theta){
    				var axis = this.getAxis3D(),
    					scale = this.FOCUS_POSITION / (this.FOCUS_POSITION + axis.z);
    				return {x : this.center.x + axis.x * scale, y : this.center.y - axis.y * scale, color : this.COLOR.replace('%hue', this.hue + theta)};
    			}
    		};
    		$(function(){
    			RENDERER.init(STRATEGY);
    		});
    	</script>
    </body>
    </html>

效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcxMTk0_size_16_color_FFFFFF_t_70_pic_center 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcxMTk0_size_16_color_FFFFFF_t_70_pic_center 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcxMTk0_size_16_color_FFFFFF_t_70_pic_center 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcxMTk0_size_16_color_FFFFFF_t_70_pic_center 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcxMTk0_size_16_color_FFFFFF_t_70_pic_center 8]

# 写在最后 #

每次写完一篇博客都挺快乐的，因为分享是件快乐的事，每段代码都要自己写好自己测试n遍，就怕出现bug误人子弟！爱分享，爱实践，做一个不断学习，不断进步的程序员，喜欢的小伙伴可以收藏一下，一起交流学习。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcxMTk0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/23f8fb360ab24b2895e993f4fffb7172.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcxMTk0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/df6e80d76a5c44d69e3aa3ad2a57a240.png
[20200927143754891.png_pic_center]: /images/20221123/789faf3b6c7a47b2bc11d124a29f6406.png
[20200927145243367.png_pic_center]: /images/20221123/e95977f4ece9416898efc2e44969ce32.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcxMTk0_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/356301abb0c54736b6967b4b4a63f335.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcxMTk0_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/a6d02ca5b51f43868d30c7e71e3dc488.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcxMTk0_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/2d2be77c786f40ffb8ffc3611381a39a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcxMTk0_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/eadedeb6768c4d68a49be7f747cc1b2b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcxMTk0_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/9f6a8b3a76664d1fa26abc2b1f9cf1a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcxMTk0_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/83664d2683eb44a184dc489fb555bf2f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcxMTk0_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221123/ad23b59a5a0045a29e8d79e2e8804099.png