-
css设置背景模糊周边有白色光晕，如何解决？<div class="img-box"> <img :src="xxx.png"> <div class="img-bg" :style="{'background-image': `url(`+ xxx.png+ `)`}"></div> </div>.img-box { width: 100%; height: 212px; text-align: center; position: relative; img { width: 100%; height: 100%; position: relative; z-index: 5; } .img-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: 200%; /* 放大两倍 */ background-position: center; background-repeat: no-repeat; filter: blur(20px); /* 添加20模糊效果 */ overflow: hidden; } .img-bg::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); /* 60%不透明度的黑色 */ z-index: 1; /* 确保蒙层在背景之上 */ } }需求：想要给一个展示图片的区域底部加一个该图片的放大后的背景，并模糊 20，并增加一个黑色 0.6 透明度的遮罩解决方案：使用backdrop-filter: blur(20px);但是注意，backdrop-filter 不能直接加在背景图本身样式上，会导致不生效。backdrop-filter 属性需要在具有定位的元素上使用，例如 position: relative 或 position: absolute；backdrop-filter应用于的元素需要有一个背景元素在其后，通常是该元素的父级元素。如果没有这样的背景元素，backdrop-filter将不会生效。确保父级元素有可见的背景内容。所以我们将backdrop-filter 放在 img-bg::before 里，即可生效：.img-bg::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); /* 60%不透明度的黑色 */ z-index: 1; /* 确保蒙层在背景之上 */ backdrop-filter: blur(20px); /* 添加20模糊效果 */ } -
知识点： animation 时间函数 steps()。用 css3 模拟一个渐变式圆点加载效果。核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。核心代码html 代码<div class="loading38"> <span class="load-span38"></span> <span class="load-span38"></span> <span class="load-span38"></span> <span class="load-span38"></span> <span class="load-span38"></span> <span class="load-span38"></span> <span class="load-span38"></span> <span class="load-span38"></span> </div>用8个 span 标签绘制8个圆点。css 部分代码.loading38 { --r-num: 45deg; /*定义角度值*/ width: 40px; height: 40px; position: relative; animation: loading38-eff 1s steps(8) both infinite; /*steps函数*/ } .load-span38{ width: 6px; height: 6px; display: block; border-radius: 3px; position: absolute; left: 17px; top: 0; transform-origin: 3px 20px; /*定义变形中心点*/ } .load-span38:nth-of-type(1){ transform: rotate(var(--r-num)); background: #2FACFD; } .load-span38:nth-of-type(2){ transform: rotate(calc(var(--r-num)*2)); background: #33B4FD; } .load-span38:nth-of-type(3){ transform: rotate(calc(var(--r-num)*3)); background: #38BEFE; } .load-span38:nth-of-type(4){ transform: rotate(calc(var(--r-num)*4)); background: #3ECAFE; } .load-span38:nth-of-type(5){ transform: rotate(calc(var(--r-num)*5)); background: #45D7FE; } .load-span38:nth-of-type(6){ transform: rotate(calc(var(--r-num)*6)); background: #4BE4FE; } .load-span38:nth-of-type(7){ transform: rotate(calc(var(--r-num)*7)); background: #52F1FF; } .load-span38:nth-of-type(8){ transform: rotate(calc(var(--r-num)*8)); background: #57FBFF; } @keyframes loading38-eff{ to { transform: rotate(0deg); } from { transform: rotate(-360deg); } }1、8个 span 绘制8个圆点，分别写上不同的背景色2、通过 transform-origin 属性来定义变形的中心点，然后给每个圆点计算角度变形（这里我定义的角度值为 （360°/8 = 45°）），注意这里的每次变形是基于上一个圆点的角度 +45deg3、最后给整体加上 animation 动画，并设置时间函数 steps() 为8，意思是分8次整体旋转完成 360deg完整代码如下html 页面<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title>渐变加载条</title> </head> <body> <div class="app"> <div class="loading38"> <span class="load-span38"></span> <span class="load-span38"></span> <span class="load-span38"></span> <span class="load-span38"></span> <span class="load-span38"></span> <span class="load-span38"></span> <span class="load-span38"></span> <span class="load-span38"></span> </div> </div> </body> </html>css 样式/** style.css **/ .app{ width: 100%; height: 100vh; background-color: #ffffff; position: relative; display: flex; justify-content: center; align-items: center; } .loading38 { --r-num: 45deg; /*定义角度值*/ width: 40px; height: 40px; position: relative; animation: loading38-eff 1s steps(8) both infinite; } .load-span38{ width: 6px; height: 6px; display: block; border-radius: 3px; position: absolute; left: 17px; top: 0; transform-origin: 3px 20px; } .load-span38:nth-of-type(1){ transform: rotate(var(--r-num)); background: #2FACFD; } .load-span38:nth-of-type(2){ transform: rotate(calc(var(--r-num)*2)); background: #33B4FD; } .load-span38:nth-of-type(3){ transform: rotate(calc(var(--r-num)*3)); background: #38BEFE; } .load-span38:nth-of-type(4){ transform: rotate(calc(var(--r-num)*4)); background: #3ECAFE; } .load-span38:nth-of-type(5){ transform: rotate(calc(var(--r-num)*5)); background: #45D7FE; } .load-span38:nth-of-type(6){ transform: rotate(calc(var(--r-num)*6)); background: #4BE4FE; } .load-span38:nth-of-type(7){ transform: rotate(calc(var(--r-num)*7)); background: #52F1FF; } .load-span38:nth-of-type(8){ transform: rotate(calc(var(--r-num)*8)); background: #57FBFF; } @keyframes loading38-eff{ to { transform: rotate(0deg); } from { transform: rotate(-360deg); } }
-
原创2022-07-26 17:54·程序员大鹏1 最近在网络上看到一个程序员表白代码，可爱有又不失调皮，让女生觉得我们做程序的也是很浪漫的；全部代码已经安排在文章末尾展示效果：html部分：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js+html爱心表白动画特效</title> <link rel="stylesheet" href="css/love.css"> </head> <body> <div class="container" onselectstart="return false;" unselectable="on" style="-moz-user-select:none;"> <div class="body_left"> <img src="images/biubiubiu.gif" alt="" ondragstart='return false;'> </div> <div class="body_center love"> <div class="block"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> <div class="div4"></div> </div> </div> </div> <div class="footer"> <div class="border"> <div class="border-top"></div> <div class="border-bottom"></div> </div> <div class="copyright"> <div id="version"><span>Version:</span> 0.0.2</div> <div id="createTime"><span>Time:</span> 2022/7/13</div> <div id="author"><span>© </span>psw</div> </div> </div> <script type="text/javascript" src="js/love.js"></script> </body> </html>js部分：const blk_pitn = { //各小方块相对【自身中心】的位置 -- 【自身中心】确定为#div22的方块 block1: [[0, 1], [0, 0], [-1, 0], [-1, -1]], block2: [[0, 1], [0, 0], [-1, 0], [0, -1]], block3: [[-1, 1], [0, 0], [-1, 0], [-1, -1]], block4: [[0, 1], [0, 0], [-1, 0], [-1, -1]], /* 1 */ block5: [[-1, 1], [0, 0], [-1, 0], [0, -1]], block6: [[0, -1], [0, 0], [-1, 0], [1, -1]], block7: [[-1, -1], [0, 0], [-1, 0], [1, 0]], block8: [[-1, 1], [0, 0], [-1, 0], [-1, -1]], /* 3 */ block9: [[0, -1], [0, 0], [-1, 0], [1, 0]], block10: [[-1, 1], [0, 0], [-1, 0], [1, 0]], block11: [[2, 0], [0, 0], [-1, 0], [1, 0]], /* — */ block12: [[0, 1], [0, 0], [-1, 0], [0, -1]], /* 2 */ block13: [[0, 1], [0, 0], [-1, 0], [-1, -1]], /* 1 */ block14: [[1, 1], [0, 0], [-1, 0], [1, 0]], block15: [[1, -1], [0, 0], [-1, 0], [1, 0]], block16: [[-1, -1], [0, 0], [-1, 0], [1, 0]], /* 7 */ block17: [[0, 1], [0, 0], [-1, 0], [0, -1]], /* 2 */ block18: [[0, 1], [0, 0], [-1, 0], [-1, -1]], /* 1 */ block19: [[0, -1], [0, 0], [-1, 0], [1, 0]], /* 9 */ block20: [[1, -1], [0, 0], [-1, 0], [1, 0]], block21: [[0, 1], [0, 0], [-1, 0], [-1, -1]], /* 1 */ block22: [[1, 1], [0, 0], [-1, 0], [1, 0]], /* 14 */ block23: [[0, 2], [0, 0], [0, -1], [0, 1]] /* | */ }, offset_pitn = { //各方块block相对【爱心中心】的位置 block1: [5, 3], block2: [5, 1], block3: [3, 4], block4: [3, 2], block5: [3, -1], block6: [2, 5], block7: [2, 1], block8: [1, -1], block9: [1, -3], block10: [1, 2], block11: [0, 3], block12: [0, 0], /* 【爱心中心】*/ block13: [-1, -4], block14: [0, -2], block15: [-2, 4], block16: [-2, 2], block17: [-2, 0], block18: [-3, -2], block19: [-4, 0], block20: [-3, 5], block21: [-5, 3], block22: [-4, 1], block23: [-6, 1] /* 因动画需要移动一个方块，故y轴坐标-1*/ }; let blocks = document.getElementsByClassName("block"), block = blocks[0], love = document.getElementsByClassName("love")[0], timer = null, index = 0, //记录拼接爱心的动画步骤 clone_block; //用于克隆方块 //1.移动方块的【自身中心】到【爱心中心】 block.style.top = "50%"; block.style.left = "50%"; block.style.margin = "-20px 0 0 -20px"; const block_left = parseFloat(window.getComputedStyle(block, null).left.slice(0, -2)), //【爱心中心】 左边距离父元素的距离 block_top = parseFloat(window.getComputedStyle(block, null).top.slice(0, -2)); //【爱心中心】 顶部距离父元素的距离 function Next() { if (++index >= 24) { clearInterval(timer); Rise(); // alert("已经是最后一个了！"); return; } block.style.visibility = "visible"; //升空动画前允许可见 //2.移动方块到指定的位置-即是移动【自身中心】到目标位置 block.style.left = block_left + 40 * offset_pitn["block" + index][0] + "px"; block.style.top = block_top - 40 * offset_pitn["block" + index][1] + "px"; for (let i = 0; i < block.children.length; i++) { // block.children[1].innerText = index; //编号便于调试 block.children[i].style.left = blk_pitn["block" + index][i][0] * -40 + "px"; /* -40 是因为逻辑坐标和浏览器的x，y轴方向不一样*/ block.children[i].style.top = blk_pitn["block" + index][i][1] * -40 + "px"; } //3.克隆方块—保存现在的位置 /* 一共会克隆23个方块，加上原先的一个方块block，共24个方块，即多出原先的block方块*/ clone_block = block.cloneNode(true); love.appendChild(clone_block); if (love.children.length >= 24) { blocks[blocks.length - 1].children[2].style.display = "none"; //去掉多余的小方块 block.style.display = "none"; //隐藏多出的block方块 } } function Rise() { //4.爱心升高，多出的那个小方块开始掉落 console.log("开始升空"); let timer2 = null, distance = 0; /* 升高时，移动的距离*/ const target = 120, /* 目标距离*/ speed = 1; /*移动速度*/ let love_top = parseFloat(window.getComputedStyle(love, null).top.slice(0, -2)); //爱心盒子距离屏幕顶部的距离 timer2 = setInterval(() => { distance += speed; // console.log(distance); if (distance >= target) { clearInterval(timer2); console.log("升空完毕"); } love.style.top = (love_top - distance) + "px"; }, 22); } window.onload = function () { setTimeout(() => { timer = setInterval(() => { Next(); }, 300); }, 12000); //gif图播放完毕所需时间为11.73s };css部分：* { margin: 0; padding: 0; border: 0; } .icon-love { width: 400px; } html, body { width: 100%; height: 100%; } body { /*background-color: skyblue;*/ overflow: hidden; /*隐藏超出的部分*/ } .container { width: 100%; height: 100%; position: relative; } /*---------------------- body_left -------------------------*/ .body_left { width: 300px; height: 300px; left: 0; bottom: 110px; position: absolute; z-index: 98; } /*---------------------- body_left -------------------------*/ /*---------------------- body_center -------------------------*/ .container .love { width: 520px; /* 13 * 40 */ height: 440px; /* 11 * 40 */ left: 50%; top: 50%; position: absolute; margin: -260px 0 0 -220px; /*background-color: gray;*/ } .love .block { right: 0; position: absolute; visibility: hidden; /*未开始升空动画前隐藏*/ background-color: yellow; } .love .block div { width: 40px; height: 40px; position: absolute; background: url("../images/heart.png") no-repeat; background-size: contain; /*background-color: #c40908;*/ /*border: 1px solid silver;*/ box-sizing: border-box; } /*---------------------- body_center -------------------------*/ /*---------------------- footer -------------------------*/ @keyframes border { 0% { width: 0; } 5% { width: 5%; } 10% { width: 10%; } 15% { width: 15%; } 20% { width: 20%; } 25% { width: 25%; } 30% { width: 30%; } 35% { width: 35%; } 40% { width: 40%; } 45% { width: 45%; } 50% { width: 50%; } 55% { width: 55%; } 60% { width: 60%; } 65% { width: 65%; } 70% { width: 70%; } 75% { width: 75%; } 80% { width: 80%; } 85% { width: 85%; } 90% { width: 90%; } 95% { width: 95%; } 100% { width: 100%; } } .footer { bottom: 30px; position: relative; z-index: 99; } .footer .border .border-top { /*width: 0;*/ /*display: inline-block;*/ border-top: 3px solid black; transform-origin: left center; -webkit-animation: border 312 linear; -o-animation: border 12s linear; animation: border 12s linear; animation-fill-mode : both; /*border-bottom: none;*/ } .footer .border .border-bottom { /*width: 0;*/ /*display: inline-block;*/ float: right; border-top: 3px solid red; transform-origin: right center; -webkit-animation: border 7s linear 12s; -o-animation: border 7s linear 12s; animation: border 7s linear 12s; animation-fill-mode : both; /*border-bottom: none;*/ } .footer .copyright { width: 100%; height: 30px; position: absolute; bottom: -30px; text-align: center; /*background-color: gray;*/ } .copyright div { width: 30%; line-height: 30px; display: inline-block; } .copyright div span { color: dimgray; } /*---------------------- footer -------------------------*/代码链接：cid:link_0 -
在 CSS 中可以使用 text-stroke 属性使文本更易读，它会向文本添加轮廓效果。 codeduidaima.comh1 {color: #fff;font-size: 80px;-webkit-text-stroke: 2px crimson;text-stroke: 2px crimson;}效果如下：注意如下这句： codeduidaima.comtext-stroke: 2px crimson;text-stroke 属性值中有两部分，第一部分是文字描边的宽度，第二部分是文字描边的颜色，crimson是深红色的意识。 -
【功能模块】【操作步骤&问题现象】我的js设置css样式以后，被框架本身的css覆盖了，我感觉是js的css和框架本身的css生效的顺序导致的，请问我应该怎么设置我的js，才能让css生效呢【截图信息】【日志信息】（可选，上传日志内容或者附件） -
怎样区别一个页面的几个prompt， 是否可以单独设置css -
近日，华瑞指数云（河南）科技有限公司(以下简称：华瑞指数云) 获得鲲鹏Validated认证。华瑞指数云联合中原鲲鹏生态创新中心对CSS融合存储产品基于鲲鹏软硬件底座进行全栈优化，通过使用鲲鹏应用使能套件BoostKit，从兼容性、稳定性、安全、功耗、业务功能、基础性能和业务性能这七个维度进行了Validated联合测试，综合性能提升35%,业务流程响应速度大幅提高，有效促进CSS融合存储产品在鲲鹏环境更安全、更稳定高效的运行，充分挖掘鲲鹏算力。这标志着华瑞指数云将更加深入鲲鹏产业生态圈，与行业伙伴协同发展。华瑞指数云CSS融合存储产品是华瑞指数云推出的全自研创新分布式存储产品。采用去中心化的Shared-Nothing软件系统架构和云原生技术封装，内外网络使用TCP/IP 组网，摒弃专有硬件锁定和旧式存储网络技术，实现系统从TB级小规模存储容量平滑扩展到PB级大规模存储容量。CSS融合存储产品集块、文件、对象和大数据四种存储形态，不仅支持全协议接口，更打破存储壁垒，各种存储形态共享统一的存储资源池，灵活便捷的管理存储系统，一定程度优化了存储系统总拥有成本（TCO）。同时还具备丰富的企业数据服务能力，满足企业数据存储管理的各项需求。可组合的架构使得企业可以用更敏捷的方式去构建其新一代数据基础设施, 可以从小规模起步，建设过程与业务紧密结合, 按需扩展。华瑞指数云联合中原鲲鹏生态创新中心，基于鲲鹏硬件、银河麒麟操作系统V10（openEuler版）、鲲鹏应用使能套件BoostKit等对其产品进行全栈优化，助力华瑞指数云在存储领域更进一步。产品通过IO智能预取、IO直通、智能写Cache的鲲鹏BoostKit组件加速，对象存储及块存储方面性能较业界主流架构显著提升，充分满足企业各项业务对性能的要求，且更安全、更稳定高效的运行。对象存储性能：通过Cosbench测试工具，针对ExponTech CSS融合存储产品的对象存储功能进行4K和530K读写的性能测试，调优后比调优前整体读写性能提升35.75%。块存储性能：通过FIO测试工具，针对ExponTech CSS的块存储功能进行1M读写的性能测试，调优后比调优前整体读写性能提升43.18%。华瑞指数云（河南）科技有限公司是鲲鹏计算产业生态的重要合作伙伴，与中原鲲鹏生态创新中心建立长期合作关系。未来，双方将继续深化合作，持续优化产品和解决方案，并同步探索其他领域应用场景的创新，为企业用户的数字化转型和技术自主可控提供全面助力。拥抱鲲鹏计算产业，共创行业新价值！关于华瑞指数云ExponTech华瑞指数云（河南）科技有限公司（ExponTech）专注为企业提供面向混合多云时代的智能数据基础设施和数据服务及解决方案，助推企业和组织向数据驱动业务的新形态进化，实现全面数字化和智能化，让海量数据资产成为业务创新和利润增长的澎湃动力。转自华为计算公众号 -
说明使用 CSS 可以绘制出许多形状，比如三角形、梯形、圆形、椭圆，等 并不只是可以绘制矩形。下面来看看怎么实现这些形状的吧。为了容易理解，文章今天先从基本形状来讲，基本形状是比较容易实现的，而利用这些基本形状进行组合，就可以实现稍微复杂点的组合形状了。基本形状三角形.triangle { width: 0; height: 0; border: 50px solid blue; /* 通过改变边框颜色，可以改变三角形的方向 */ border-color: blue transparent transparent transparent;}梯形.trapzoid { width: 40px; height: 100px; border: 50px solid blue; border-color: transparent transparent blue transparent;}圆形.circle{ width:100px; height:100px; border-radius:50%; background:blue;}球体.sphere { height: 200px; width: 200px; border-radius: 50%; background: radial-gradient(circle at 70px 70px, #5cabff, #000);}椭圆.ellipse { width: 200px; height: 100px; border-radius: 50%; background: blue;}半圆.semicircle { width: 50px; height: 100px; /* "/"前四个值表示圆角的水平半径，后四个值表示圆角的垂直半径*/ border-radius: 200% 0 0 200% / 100% 0 0 100%; /* 效果和用%一样 */ /* border-radius: 50px 0 0 50px; */ background: blue;}菱形.rhombus { width: 200px; height: 200px; transform: rotateZ(45deg) skew(30deg, 30deg); background: blue;}组合形状心形心形是由两个圆形和一个矩形进行组合得到的。.heart { width: 100px; height: 100px; transform: rotateZ(45deg); background: red;}.heart::after,.heart::before { content: ""; width: 100%; height: 100%; border-radius: 50%; display: block; background: red; position: absolute; top: -50%; left: 0;}.heart::before { top: 0; left: -50%;}扇形扇形是由一个圆形和一个矩形进行组合得到的，用矩形遮住圆形的一部分就形成了扇形。.sector { width: 142px; height: 142px; background: #fff; border-radius: 50%; background-image: linear-gradient(to right, transparent 50%, #655 0);}.sector::before { content: ''; display: block; margin-left: 50%; height: 100%; width: 100%; background-color: inherit; transform-origin: left; /*调整角度，改变扇形大小*/ transform: rotate(230deg);}五边形五边形是由一个三角形和一个梯形进行组合得到的。.pentagonal { width: 100px; position: relative; border-width: 105px 50px 0; border-style: solid; border-color: blue transparent;}.pentagonal:before { content: ""; position: absolute; width: 0; height: 0; top: -185px; left: -50px; border-width: 0px 100px 80px; border-style: solid; border-color: transparent transparent blue;} -
显式动画参考文档： https://gitee.com/openharmony/docs/blob/5654c2b940ab3e2f4f0baf435e630c4ef3536428/zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md来看一个简单的示例： @Entry@Componentstruct AnimationPage { // 位移属性 @State _translate: TranslateOptions = { x: 0, y: 0, z: 0 } build() { Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center, direction: FlexDirection.Column }) { Button('执行动画').margin({ bottom: 50 }).onClick(() => { //添加一个简单显式动画 animateTo({ duration: 1000, // 动画时长 tempo: 0.5, // 播放速率 curve: Curve.EaseInOut, // 动画曲线 delay: 0, // 动画延迟 iterations: 1, // 播放次数 playMode: PlayMode.Normal, // 动画模式 }, () => { //闭包内更改状态 this._translate = { x: 0, y: 100, z: 0 } }) }) Column() { Text('Animate.css') .fontSize(50) .fontWeight(FontWeight.Bold) .fontColor('#351c75') .translate(this._translate) // 位移变换 } } .width('100%') .height('100%') }}如果我们希望向下位移完成后，再向右位移，就需要在第一个动画完成后再进行第二个动画，即在第一个动画的 onFinish 函数中执行第二个动画。这样组合起来可以构成一个更复杂的连续动画：// 单步动画执行函数animationStep(value: AnimateParam, event: () => void) { return () => { return new Promise((resolve) => { let onFinish = value.onFinish value.onFinish = () => { if(onFinish) onFinish() resolve(true) } animateTo(value, event) }) }}创建 4 步动画：aboutToAppear() { // 每步动画执行时长 let time = 200 this.step1 = this.animationStep({ duration: time, // 动画时长 tempo: 0.5, // 播放速率 curve: Curve.EaseInOut, // 动画曲线 delay: 0, // 动画延迟 iterations: 1, // 播放次数 playMode: PlayMode.Normal, // 动画模式 onFinish: () => { // 动画执行完成 console.info('play end') } }, () => { //闭包内更改状态 this._translate = { x: 0, y: 100, z: 0 } }) this.step2 = this.animationStep({ duration: time, // 动画时长 tempo: 0.5, // 播放速率 curve: Curve.EaseInOut, // 动画曲线 delay: 0, // 动画延迟 iterations: 1, // 播放次数 playMode: PlayMode.Normal, // 动画模式 onFinish: () => { // 动画执行完成 console.info('play end') } }, () => { //闭包内更改状态 this._translate = { x: 100, y: 100, z: 0 } }) this.step3 = this.animationStep({ duration: time, // 动画时长 tempo: 0.5, // 播放速率 curve: Curve.EaseInOut, // 动画曲线 delay: 0, // 动画延迟 iterations: 1, // 播放次数 playMode: PlayMode.Normal, // 动画模式 onFinish: () => { // 动画执行完成 console.info('play end') } }, () => { //闭包内更改状态 this._translate = { x: 100, y: 0, z: 0 } }) this.step4 = this.animationStep({ duration: time, // 动画时长 tempo: 0.5, // 播放速率 curve: Curve.EaseInOut, // 动画曲线 delay: 0, // 动画延迟 iterations: 1, // 播放次数 playMode: PlayMode.Normal, // 动画模式 onFinish: () => { // 动画执行完成 console.info('play end') } }, () => { //闭包内更改状态 this._translate = { x: 0, y: 0, z: 0 } })}顺序执行 4 步动画：Button('执行动画').margin({ bottom: 50 }).onClick(async () => { await this.step1() await this.step2() await this.step3() await this.step4()})实现 AnimateCSS 动画AnimateCSS：https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.csshttps://animate.style/pulse 动画： 看下 pulse 动画样式代码：.animate__pulse { -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;}@keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }}ETS 实现：@State _scale: ScaleOptions = { x: 1, y: 1, z: 1}...Column() { Text('Animate.css') .fontSize(50) .fontWeight(FontWeight.Bold) .fontColor('#351c75') .translate(this._translate) // 位移变换 .scale(this._scale) //比例变化}动画方法：传递一个动画总时长 time第一步动画执行段为 0%-50%，所以动画执行时长为总时长time * 50%第二步动画执行段为 50%-100%，所以动画执行时长为总时长time * 50%async pulse(time) { // 0% - 50% let step1 = this.animationStep({ duration: time * 0.5, // 动画时长 tempo: 0.5, // 播放速率 curve: Curve.EaseInOut, // 动画曲线 delay: 0, // 动画延迟 iterations: 1, // 播放次数 playMode: PlayMode.Normal, // 动画模式 }, () => { this._scale = { x: 1.05, y: 1.05, z: 1.05 } }) // 50% - 100% let step2 = this.animationStep({ duration: time * 0.5, // 动画时长 tempo: 0.5, // 播放速率 curve: Curve.EaseInOut, // 动画曲线 delay: 0, // 动画延迟 iterations: 1, // 播放次数 playMode: PlayMode.Normal, // 动画模式 }, () => { this._scale = { x: 1, y: 1, z: 1 } }) await step1() await step2()}执行动画：Button('执行PULSE动画').margin({ bottom: 50 }).onClick(async () => { this.pulse(500)})转载于51CTO开源技术社区微信公众号 -
3.在CSS中定义实用工具来干你的CSS我们将’utilities’定义为一个CSS类，实际上它只用来做一件特定的事情，而不是封装整个元素。你会看到这个策略经常用于流行的CSS框架，如Bootstrap和Foundation。在这些流行的框架中你所看到的一些例子是：.hide { display: none; }.text-center { text-align: center; }例如，使用.hide，就不必每次想要在页面上隐藏元素时就得编写一个新的类——你只需要在你的元素上加上.hide类，它会使元素display: none; 。我们写了一些实用程序文件，这些文件在应用程序之间共享，使用一些常用的实用程序可以减少为每个元素编写特定样式的需求。一个很好的例子是我们如何使用margin和padding实用程序。下面是padding实用程序的一个简单例子：.padding-0 { padding: 0; }.padding-xxs { padding: 5px; }.padding-xs { padding: 10px; }.padding-sm { padding: 20px; }.padding-md { padding: 30px; }.padding-lg { padding: 40px; }.padding-xl { padding: 50px; }.padding-xxl { padding: 60px; }通过结合使用这些工具，我们可以与我们间距的像素数保持一致，并且可以快速标记页面，而不必编写非常多的CSS。实用程序背后的理念是，你认为你可能会不止一次地使用它们。如果它是一次性样式，或者如果你认为组合样式会经常使用，那么可能它作为CSS类将可以更好地工作。4.除非绝对需要，否则避免嵌套假设有一些复选框的表单。在这个特定的情况下，你需要复选框内联（并排）所以你试图像这样写样式：.user-form li a { color: red; }然后在这过程中，你意识到你需要列表元素中的一个链接实际上是黑色的。所以你试图为黑色的链接编写一个工具类：.link--black { color: black; }此处.link–black链接将被CSS特殊性所覆盖，并且将无法压倒.my-form li a样式。现在你可能想要确保列表元素中的所有锚标记是红色的，但是你不知道未来的元素会怎么样以及可能会对设计做出什么样的更改。你可能会问，“好的亲，那么你怎么解决上面的问题呢？”通过上面的例子，你应该明白锚标签的颜色应该是一个远离默认链接颜色的变体。所以，在这种情况下，我会100％确定一个额外的工具类来处理红色链接。下面是实践中可能的处理例子：a { color: blue; &:hover { color: black; }}.link--red { color: red; }然后将其添加到HTML中的每个li元素。
-
编写基本的CSS和HTML是我们作为Web开发人员学习的首要事情之一。然而，我遇到的很多应用程序显然没有人花时间真正考虑前端开发的长久性和可维护性。我认为这主要是因为许多开发人员对组织CSS / HTML和JavaScript的策略缺乏深刻的理解。在我和我们团队的观念中，编写可维护的前端代码非常重要。尽管我们有一些使用了多年的客户端，但要记住你永远不会是唯一一个工作于应用程序的人。仅仅因为你的一次性元素和配置对你有意义，并不意味着它们对下一个可能继承应用程序的人有意义。为了防止这篇文章太长，我今天将主要讨论CSS代码。JavaScript代码是另一个完全不同的棘手问题。这篇文章的目的不在于规则手册，而在于你正在编写CSS时的指南。希望能帮助大家找到自己的流程，而这篇文章的目标是让你的CSS一致，简单，易于使用。下面是8个保持CSS有条理和易于长期维护的秘诀。1.不要写不需要的样式定义例如：编写display:block;时要注意，因为很多元素默认有这个样式。另一个例子是在元素上定义字体大小，它将继承你正在定义的正文字体大小。目标是双重的：减少CSS文件的长度，以便浏览。明确你的CSS类需要做什么，而不是定义一堆已经产生的垃圾。这里有一个常见问题是CSS没有清理干净，此时，为了简洁起见，可以完全删除。2.将CSS看作可重用组件不要将CSS元素视为每个单独页面上的特定表单或元素，如果你可以定义可重用的CSS实用程序和组件以供自己使用，则可以减少很多复杂性。编写旨在重用的类的作用：确保你的设计在不同的页面之间保持一致。当你在很多页面上共享CSS类时，你知道当你改变这个类时，它会在每一个出现的页面发生改变。这使得编写CSS真的很快。首先，如果大多数样式被定义为你所知道的实用程序和类，那么你就不必花费大量时间刷新和重新创建应用程序中已存在的样式。
-
CSS规范BEM命名规范BEM 来自块（block）、元素（element）、修饰符（modifier）的缩写命名，约定模式：block：模块，名字单词间用 - 连接element：元素，模块的子元素，以 __ 与 block 连接modifier：修饰，模块的变体，定义特殊模块，以 -- 与 block 连接.block {} .block__element {} .block--modifier {}注释必要的地方务必要写注释。单行注释单独一行作为注释，//后面加空格代码及注释同行，//前后要加空格// 调用并获取用户基本信息 getUserInfo(); const MAX_COUNT = 3; // 最大统计数量多行注释不影响代码可读性，可考虑添加。主要涉及场景：业务逻辑性强关联代码难以理解/** * 代码注释1 * 代码注释2 */函数注释函数注释有业界统一的规范，复杂函数和类都有必要进行注释。/** * 以星号开头，紧跟一个空格，第一行为函数说明 * @param {类型} 参数 单独类型的参数 * @author 作者 创建时间 修改时间（短日期）改别人代码要留名(注意：不要写工号) * @example 举例（如果需要） */ -
最近在学习 HarmonyOS 开发文档，发现 transform 样式动画感觉很有趣，于是打算用现有的方法写一个会动的充电效果。实现过程如下：首先我们使用 css 画电池，绘制一个长方形需要给这个正方形四个角增加一点点的弧度，再给电池画一个头部，只有一个电池的轮廓就出来了，我在里面增添了一点颜色方便后面观察。首先绘制一个电池： 然后增加个 div 来实现动画效果，这个我打算用蒙版来处理，蒙版不需要增加太多细节宽高和蓝色 div 一样就行，然后通过 overflow: hidden 来实现蒙版效果，接下来就是让白色 div 动起来就行了。<img src=“./电池遮罩.png” alt=“电池遮罩” style=“zoom: 67%;” />电池动画效果需要使电池出现一个充电的效果，这时候就需要使用一个让电池电量上升的一个效果，这个用平移动画就够了，如果加蒙版属性的话会更好一点。.mask2 { position: absolute; height: 220px; width: 140px; left: 50%; transform: translate(-50%, 50%); border-radius: 15px 15px 5px 5px; background: linear-gradient(#7abcff, #2196F3); overflow: hidden;}电池渐变：background: linear-gradient(#7abcff, #2196F3);蒙版效果：overflow: hidden;.mask3 { position: absolute; width: 150px; height: 220px; bottom: 140px; left: 50%; transform: translate(-50%, -80); z-index: 1; animation: down 6s fast-out-linear-in infinite; background-color: #ffffff;}电池平移动画：animation: down 6s fast-out-linear-in infinite;/* css弹跳*/@keyframes down { /* 停止 */ 0%{ transform: translate(0px,200px); } /* 上升 */ 10%{ transform: translate(0px,180px); } /* 上升 */ 20%{ transform: translate(0px,160px); } /* 上升 */ 30%{ transform: translate(0px,140px); } /* 上升 */ 40%{ transform: translate(0px,120px); } /* 上升 */ 50%{ transform: translate(0px,100px); } /* 上升 */ 60%{ transform: translate(0px,80px); } /* 上升 */ 70%{ transform: translate(0px,60px); } /* 上升 */ 80%{ transform: translate(0px,40px); } /* 上升 */ 90%{ transform: translate(0px,20px); } /* 起始位 */ 100%{ transform: translate(0px,0px); }}百分百给的越多动画就越细腻。 拓展1如果需要使电池充电时进行旋转也是可以的，只需要把平移效果换成旋转就可以了。.mask3 { position: absolute; width: 150px; height: 150px; bottom: 140px; left: 50%; transform: translate(-50%, 0); z-index: 1; animation: rotate 4s infinite; border-radius: 70px 63px 60px 66px; background-color: #ffffff;}旋转动画：animation: rotate 4s infinite;/* css旋转*/@keyframes rotate { from { transform: rotate(0deg) } to { transform: rotate(360deg); }}拓展 2也可以通过添加按钮来增加可改变的颜色样式，首先需要把 css 中的颜色样式给移到 js 中这样方便后面的切换，然后在 js 中写入需要替换的电池颜色样式。代码如下： <div class="mask1"> <div class="mask4"></div> <div class="mask2" value="{{qr_value}}" type="{{qr_type}}" style="background-color: {{gradualChange}};"> <div class="mask3" value="{{qr_value}}" type="{{qr_type}}" style="background-color: {{baseColor}};" ></div> </div> </div> <div> <text class="txt">电池加载色</text> <select onchange="loadingColor"> <option for="{{load}}" value="{{$item}}">{{$item}}</option> </select> </div> <text class="txt">电池剩余色</text> <select onchange="remainingColor"> <option for="{{remaining}}" value="{{$item}}">{{$item}}</option> </select>data: { baseColor: '#f0ffff', gradualChange: '#87ceeb', remaining: ['#87ceeb','#fa8072','#da70d6','#80ff00ff','#2196F3'], load: ['#f0ffff','#ffffe0','#d8bfd8'] },总结这些还只是鸿蒙组件库中动画样式里的一小部分，如果再使用旋转加平移属性就能实现更加炫酷的动画效果，能够带来更好的视觉体验，组件库中还有着许多有趣的组件实例和详细的使用方法，掌握这些组件的使用可以使我们更好的了解和参与鸿蒙。作者：汤志威转载于鸿蒙技术社区微信公众号
-
HarmonyOS css 样式与普通 HTML css 样式之间存在的区别。对于 display 属性支持不一样鸿蒙 css 支持的属性有：普通 css 支持的属性有：对于伪类选择器和伪元素选择器鸿蒙 css 不支持伪类选择器和伪元素选择器；普通 css 支持伪类选择器和伪元素选择器。宽高方面的支持的值不太一样鸿蒙对于宽高方面的支持目前支持 px 和百分比；普通 css 支持的有 px，em，rem，百分比，vw，vh，vm。对于 margin 居中来说不太一样对于我们经常写 css 来说一个最简单的剧中方式莫过于 margin:0 auto 这个写法了，但是鸿蒙不支持此种写法。对于 boder 属性的支持不太一样在使用 border 设置属性的时候 HarmonyOS 必须按照指定的顺序来写（即使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值） ①border-styleHarmonyOS 支持一下三种：dotted：显示为一系列圆点，圆点半径为 border-width 的一半。dashed：显示为一系列短的方形虚线。solid：显示为一条实线。普通 css 支持的属性有以下几种：dotted：定义点线边框dashed：定义虚线边框solid：定义实线边框double：定义双边框groove：定义 3D 坡口边框。效果取决于 border-color 值ridge：定义 3D 脊线边框。效果取决于 border-color 值inset：定义 3D inset 边框。效果取决于 border-color 值outset：定义 3D outset 边框。效果取决于 border-color 值none：定义无边框hidden：定义隐藏边框②border-width普通 css 支持可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick，HarmonyOS 支持 px。③border-radius普通 css 支持的数值有三种：px、%、em；HarmonyOS css 支持 px。对于 background 渐变的支持不太一样鸿蒙 css 支持线性渐变/重复线性渐变：普通 css 支持线性渐变（Linear Gradients）和径向渐变（Radial Gradients）。独属于 HarmonyOS 的一些属性有一些是鸿蒙 css 独有的属性而普通 css 没有的： 注意事项目前写 HarmonyOS 代码布局用的最多的是 flex 布局，如果你需要换行布局请一定得添加上 flex-direction: column；这个属性。总结感觉鸿蒙在布局上以及标签上跟微信小程序有的类似，但又不是完全相同，鸿蒙生态更强大，不过由于出来的时间不是很久所有很多开发者还在观望和学习中，希望以后鸿蒙能越来越强大，更多的开发者加入这个阵营中。作者：郑瑶转载于鸿蒙技术社区微信公众号
-
具体代码如下所示：123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; box-sizing: border-box; font-family: "calisto mt"; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #111; } .scan{ position: relative; display: flex; flex-direction: column; align-items: center; } .scan .fingerprint{ position: relative; width: 200px; height: 280px; background: url(img/finger0.png) no-repeat; background-size: 100%; } .scan .fingerprint::before{ content: ''; position: absolute; top:0; left: 0; height: 100%; width: 100%; background: url(img/finger2.png) no-repeat; background-size: 100%; animation: animate 4s ease-in-out infinite; } .scan .fingerprint::after{ content: ''; position: absolute; top:0; left: 0; height: 8px; width: 100%; margin-top: -30px; background: #3fefef; border-radius: 8px; filter: drop-shadow(0 0 20px #3fefef) drop-shadow(0 0 60px #3fefef); animation: animate_line 4s ease-in-out infinite; } @keyframes animate_line{ 0%,100%{ top: 0; } 50%{ top: 100%; } } @keyframes animate{ 0%,100%{ opacity: 0; } 50%{ opacity: 1; } } .scan h3{ text-transform: unset; font-size: 2em; letter-spacing: 2px; margin-top: 20px; color: #3FEFEF; filter: drop-shadow(0 0 20px #3fefef) drop-shadow(0 0 60px #3fefef); animation: animate_txt 4s ease-in-out infinite; } @keyframes animate_txt{ 0%,100%{ opacity: 0; } 50%{ opacity: 1; } } </style> </head> <body> <div class="scan"> <div class="fingerprint"></div> <h3>Scanning...</h3> </div> </body></html>效果图：到此这篇关于CSS3实现指纹特效的文章就介绍到这了转载自https://www.jb51.net/css/816204.html
推荐直播
-
通用人工智能（AGI）到来前夕如何实现企业降本增效和应用现代化2024/04/19 周五 14:00-16:00
李京峰 T3出行VP/CTO
李京峰是T3出行CTO，本次他将分享通用人工智能（AGI）到来前夕，如何实现企业降本增效和应用现代化。
即将直播 -
产教融合专家大讲堂·第①期《高校人才培养创新模式经验分享》2024/04/25 周四 16:00-18:00
于晓东 上海杉达学院信息科学与技术学院副院长；崔宝才 天津电子信息职业技术学院电子与通信技术系主任
本期直播将与您一起探讨高校人才培养创新模式经验。
去报名
热门标签