代码片段
时间：2023-04-02 20:11:05
HTML
生成随机颜色functionrandomVal(val){returnMath.floor(Math.random()*(val+1));}functionrandomColor(){return`rgb(${randomVal(255},${randomVal(255},${randomVal(255})`;}渐变按钮（边框+文字）Gradientbutton.btn{padding:1px；颜色：#4cdbbc；文本对齐：居中；空白：nowrap；光标：指针；轮廓：无；边框：无；背景：-webkit-linear-gradient(left,#fff0%,#fff100%),线性渐变(90deg,#47d9980%,#01d5d8100%);背景剪辑:内容框,填充框;}.btnspan{背景:线性渐变(90deg,#47d9980%,#01d5d8100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}右箭头(>).icon-v-right{width:10px;height:10px;border:1pxsolid#dbdbdb;border-width:1px1px00;transform:rotate(45deg);}translatecenter.center{position:absolute;top:50%;/*父元素高度的一半*/left:50%；/*父元素宽度的一半*/transform:translate(-50%,-50%);/*元素本身宽度和高度的一半*/}请使用动画来实现加载效果/*四分之一边框加载*/
.loading{width:100px;高度：100px；边距：60px自动；位置：相对；border:10pxsolidrgba(0,0,0,0.2);边框顶部颜色：#000；边界半径：50%；动画：rotateLoading1.1s线性无限；}@keyframesrotateLoading{from{transform:rotate(0deg);}100%{变换：旋转（360deg）；}}/*列加载*/
.pillar-loading{width:60px;显示：弹性；证明内容：空格之间；边距：100pxauto;}.pillar-loading.pillar{宽度：8px;高度：40像素；边界半径：4px；背景：浅绿色；animation:pillarLoading1seaseinfinite;}.pillar-loading.pillar:nth-child(2){animation-delay:0.2s;}.pillar-loading.pillar:nth-child(3){animation-delay:0.4s;}.pillar-loading.pillar:nth-child(4){animation-delay:0.6s;}.pillar-loading.pillar:nth-child(5){animation-delay:0.8s;}@keyframespillarLoading{0%,100%{背景：浅绿色；}50%{变换：scaleY(1.75);背景：淡蓝色；}}/*圆点加载*/
.point-loading{width:100px;高度：100px；位置：相对；margin:100pxauto0;}.point-loading.point{position:absolute;宽度：20px；高度：20px；边界半径：50%；背景：浅绿色；动画：pointLoading1sinfinite;}.point-loading.point:nth-child(1){left:0;顶部：50%；边距顶部：-10px；animation-delay:0.13s;}.point-loading.point:nth-child(2){left:14px;顶部：14px；animation-delay:0.26s;}.point-loading.point:nth-child(3){left:50%;顶部：0；左边距：-10px；animation-delay:0.39s;}.point-loading.point:nth-child(4){top:14px;右：14px；animation-delay:0.52s;}.point-loading.point:nth-child(5){right:0;顶部：50%；边距顶部：-10px；animation-delay:0.65s;}.point-loading.point:nth-child(6){right:14px;底部：14px；animation-delay:0.78s;}.point-loading.point:nth-child(7){bottom:0;左：50%；左边距：-10px；动画延迟:0.91s;}.point-loading.point:nth-child(8){bottom:14px;左：14px；animation-delay:1.04s;}@keyframespointLoading{0%{transform:scale(1);:1;}100%{转换：比例（.3）；不透明度：0.5；}}白色半透明遮罩layer.mask{height:100px;background-image:linear-gradient(0deg,rgba(255,255,255,1)50%,rgba(255,255,255,.3));}Android手机上的小圆点变形了，单位为rem时，使用border-radius:50%;,Android手机上的小圆点变形.dot{width:.1rem;高度：.1rem；背景：红色；border-radius:50%;}解决方法：将小圆点的宽高加倍，使用transformscale(.5)将其缩小一倍，然后使用transform-origin调整小圆点的位置。.dot{宽度：.2rem;高度：.2rem；背景：红色；边界半径：50%；变换比例（.5）；transform-origin:0%center;}[参考文章]:remunitborder-radius:50%circledeformationinAndroidphones
