CSS_标签_开发者

博客(1.7k)
视频(1)
论坛(0)
云声(0)
代码示例(0)

[技术干货] CSS position sticky 用法

position:sticky是CSS中的一个定位属性，它允许元素在滚动时保持在特定位置，直到滚动到另一个指定位置。以下是对position:sticky的详细解释：一、工作原理position:sticky结合了position:relative和position:fixed的特点。当元素在屏幕上可见且未滚动到指定位置时，它的行为类似于position:relative，即相对于其正常位置进行定位。然而，一旦元素滚动到指定的偏移位置（如top: 0），它将“粘性定位”并停留在那里，类似于position:fixed，直到滚动到另一个指定的偏移位置或不再满足粘性定位的条件。二、使用条件指定偏移值：为了使用position:sticky，必须指定top、bottom、left或right中的至少一个值。这些值定义了元素相对于其最近的具有滚动条的祖先元素的偏移量。如果没有指定这些值中的任何一个，元素将仅处于相对定位状态，而不会表现为粘性定位。滚动容器：粘性定位的元素依赖于滚动容器的滚动行为。这个滚动容器是元素最近的具有滚动条的祖先元素。如果祖先元素没有滚动条或设置了overflow:hidden，则粘性定位可能无法生效。父元素高度：当使用top或bottom属性时，父元素的高度不能低于粘性元素在这些属性上设置的值。否则，当元素滚动到父元素的底部时，它将无法保持固定位置。三、注意事项兼容性：虽然现代浏览器大多支持position:sticky，但一些旧版本的浏览器（如Internet Explorer和早期版本的Edge）可能不支持该属性。因此，在使用时需要进行兼容性测试。层叠上下文：position:sticky会创建一个新的层叠上下文（stacking context），这意味着它会影响元素的堆叠顺序和z-index属性的行为。滚动容器高度：在某些情况下，滚动容器的高度可能会影响粘性元素的表现。因此，需要仔细考虑滚动容器的高度和粘性元素的位置关系。四、应用示例一个常见的应用场景是头部导航栏的粘性定位。当用户向下滚动页面时，导航栏会固定在页面的顶部，而当用户向上滚动时，导航栏会回到原来的位置。这可以通过给导航栏元素设置position:sticky和适当的top值来实现。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sticky Position Example</title> <style> .navbar { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; background-color: #f1f1f1; padding: 10px 0; } .content { padding: 20px; height: 2000px; /* 为了演示滚动效果，设置较大的高度 */ } </style> </head> <body> <div class="navbar">Sticky Navbar</div> <div class="content"> <p>Scroll down to see the sticky effect.</p>  </div> </body> </html>在上面的示例中，当用户向下滚动页面时，.navbar元素将固定在页面的顶部。当用户向上滚动时，它将回到原来的位置。综上所述，position:sticky是一个强大的CSS属性，它允许元素在滚动时保持在特定位置。然而，在使用时需要注意兼容性、父元素的高度和滚动容器的行为等因素。

林欣 发表于2024-12-11 16:51:34 2024-12-11 16:51:34 最后回复福州司马懿 2024-12-27 14:48:55
854 1

CSS
[技术干货] CSS如何设置背景模糊周边有白色光晕(解决方案)【转】

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模糊效果 */ }

赫塔穆勒 发表于2024-03-29 10:57:57 2024-03-29 10:57:57 最后回复 DevFeng 2024-04-01 08:59:42
220 3

CSS
[技术干货] CSS实现渐变式圆点加载动画【转】

知识点： 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); } }

赫塔穆勒 发表于2024-03-29 10:53:52 2024-03-29 10:53:52 最后回复小强鼓掌 2024-04-01 08:59:39
121 3

CSS
[技术干货] 用js+html，全网最火build出爱心【转】

原创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

林欣 发表于2023-05-30 11:13:15 2023-05-30 11:13:15 最后回复泽宇-Li 2023-05-30 14:28:20
246 1

CSS
[技术干货] CSS如何给文字添加描边效果?

在 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是深红色的意识。

加油O幸福 发表于2023-04-25 17:05:15 2023-04-25 17:05:15 最后回复加油O幸福 2023-04-25 17:05:15
33 0

CSS
[页面编排] css设置不生效

【功能模块】【操作步骤&问题现象】我的js设置css样式以后，被框架本身的css覆盖了，我感觉是js的css和框架本身的css生效的顺序导致的，请问我应该怎么设置我的js，才能让css生效呢【截图信息】【日志信息】（可选，上传日志内容或者附件）

eatingbanana 发表于2022-07-29 11:01:00 2022-07-29 11:01:00 最后回复 ADC小助手 2022-07-29 11:19:47
998 1

CSS
[页面编排] 【页面编排】怎样区别一个页面的几个prompt，是否可以单独设置css

怎样区别一个页面的几个prompt，是否可以单独设置css

如果云知道2 发表于2022-07-26 10:10:17 2022-07-26 10:10:17 最后回复 ADC小助手 2022-07-26 14:40:37
882 2

CSS
[技术干货] CSS 可以绘制出许多形状

说明使用 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;}

yd_275946504 发表于2022-07-06 09:21:23 2022-07-06 09:21:23 最后回复 koalalee 2022-07-06 10:31:22
128 3

CSS
[技术干货] 在鸿蒙上实现AnimateCSS动画

显式动画参考文档： 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开源技术社区微信公众号

星恒 发表于2022-05-30 21:16:43 2022-05-30 21:16:43 最后回复星恒 2022-05-30 21:16:43
180 0

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 举例（如果需要） */

智慧园区刘师傅 发表于2022-04-22 15:25:08 2022-04-22 15:25:08 最后回复智慧园区刘师傅 2022-04-22 15:25:08
229 0

CSS 5G智慧园区
[技术干货] 在HarmonyOS上写一个会动的充电效果

最近在学习 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'] },总结这些还只是鸿蒙组件库中动画样式里的一小部分，如果再使用旋转加平移属性就能实现更加炫酷的动画效果，能够带来更好的视觉体验，组件库中还有着许多有趣的组件实例和详细的使用方法，掌握这些组件的使用可以使我们更好的了解和参与鸿蒙。作者：汤志威转载于鸿蒙技术社区微信公众号

星恒 发表于2022-03-31 17:51:32 2022-03-31 17:51:32 最后回复星恒 2022-03-31 17:51:32
391 0

CSS
[技术干货] 鸿蒙css与普通css区别汇总！

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；这个属性。总结感觉鸿蒙在布局上以及标签上跟微信小程序有的类似，但又不是完全相同，鸿蒙生态更强大，不过由于出来的时间不是很久所有很多开发者还在观望和学习中，希望以后鸿蒙能越来越强大，更多的开发者加入这个阵营中。作者：郑瑶转载于鸿蒙技术社区微信公众号

星恒 发表于2022-03-31 17:41:31 2022-03-31 17:41:31 最后回复星恒 2022-03-31 17:41:31
307 0

CSS
[技术干货] CSS3实现指纹特效代码

具体代码如下所示：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

加油O幸福 发表于2022-03-19 15:14:07 2022-03-19 15:14:07 最后回复窗台 2022-03-19 20:12:11
237 1

CSS
[技术干货] 旧 Mac、PC 别扔，变身 Chromebook 了解一下[转载]

原文链接：https://blog.csdn.net/m0_50065287/article/details/122959703“回收旧电视、旧冰箱、旧电脑…”停、停、停！旧电脑可别送去回收，现在它们可以变身 Chromebook 了！本周一，谷歌宣布提前推出新版 Chrome OS——Chrome OS Flex，一款可下载至 Mac 或 Windows PC 上的 Chrome OS。一、从 2017 年开始布局Chrome OS Flex 并非凭空出世，早在 2017 年谷歌投资 Neverware 公司时其意图就有所体现。Neverware 成立于 2011 年，主要开发轻量级操作系统，在 2013 年推出采用私有技术的 PCReady 后投入 Chromium 开源项目，于 2015 年正式推出基于 Chromium 的软件应用 CloudReady，该应用可支持超过 350 款老旧 PC 或 Mac 设备运行 Chrome OS，将其融入 Chrome 生态，方便学校或企业的 IT 管理人员通过 Google Admin 控制台管理这些老旧设备。随后在 2020 年，谷歌更是直接收购 Neverware 将之纳入麾下。彼时 Neverware 表示“CloudReady 已是谷歌和 Chrome OS 团队的正式成员”，即 CloudReady 将会成为一个官方 Chrome OS 产品——而这也正是 Chrome OS Flex 的原型，它基本上就是 CloudReady 的谷歌官方版本。谷歌在介绍 Chrome OS Flex 的博文中表示：“CloudReady 帮助无数企业和学校实现了 PC 和 Mac 的现代化，所以我们也一直在努力将 CloudReady 的优势集成到新版的 Chrome OS 中。”二、“废物利用”起来启动时间久、系统被迫更新、安全插件版本低、管理愈发繁重等问题，很大程度上都是由于设备老旧而引起的，而这无疑对员工、学生和 IT 部门是一种很大的负担。相较于逐年老化变慢的 Windows PC 或升级 macOS 12 Monterey 都会“变砖”的旧 Mac，谷歌自信表示：“Chromebook 不会随着时间的推移而变慢，会一直保持最新状态、提供主动保护并且易于管理。 ”为此，谷歌希望能将这些旧 PC、Mac“废物利用”起来，将其变成一台 Chromebook，Chrome OS Flex 就是这个桥梁。虽然在官方博文中，谷歌声称 Chrome OS Flex 专为企业和学校设计，但总体来看，谷歌也将其视作旧 Mac 和 Windows PC 的解决方案，同样适用于无法升级 OS 最新版本的设备或没有预算更换设备的人。谷歌对 Chrome OS Flex 的评价很高，“可使老旧设备现代化”，还能“在 PC 和 Mac 上体验 Chrome OS 的优势所在”：快速、现代的工作体验：Chrome OS Flex 可在几秒钟内启动，且不会随着时间的推移而变慢。此外，支持对 Web 应用和虚拟化的快速访问，为用户提供直观、整洁的体验，并且系统更新在后台进行，即缩短了用户的停机时间。对安全问题提供最新保护：使用 Chrome OS Flex，只要定期安全更新，则无需防病毒软件。Chrome OS Flex 内置了针对病毒、勒索软件和网络钓鱼等安全隐患的保护功能，谷歌安全浏览会在用户访问恶意网站之前发出警告，甚至还可以通过远程擦除以防止设备上的数据丢失或被盗。轻松部署与管理：可通过 USB 或网络部署在几分钟内在设备上安装 Chrome OS Flex。登录后，用户原先的云配置文件将在设备上自动同步。对于 IT 管理人员来说，基于云的谷歌管理控制台也可提供强大而简单的管理体验。充分利用现有硬件的可持续解决方案：使用 Chrome OS Flex 可最大限度延长现有设备群的使用寿命，与其费心处理老化的 PC 和 Mac，使用现代、快速的操作系统对其进行更新可减少电子垃圾。不仅如此，Chrome OS Flex 基于与 Chrome OS 相同的代码库，发布及更新节奏将与 Chrome OS 保持一致，用户界面也相同，将提供官方 Chrome 浏览器、谷歌智能助理和跨设备功能，以此确保最终用户体验同步。目前，Chrome OS Flex 虽已官宣，但整体仍处于开发者预览版的早期阶段，为此谷歌呼吁广大开发者与之共同测试与反馈：只需一个 USB 驱动器和兼容的 PC 或 Mac 即可。用户可先直接从 USB 驱动器启动，无需安装即可无风险试用 Chrome OS Flex；准备就绪后，便可在 PC 或 Mac 上安装 Chrome OS Flex 以替换原本的操作系统，获得最佳体验。最后谷歌透露，Chrome OS Flex 正式稳定版预计将于几个月后推出，届时 CloudReady 用户将免费升级至 Chrome OS Flex。（欲试用 Chrome OS Flex 可访问以下网址：https://chromeenterprise.google/os/chromeosflex/）三、不过，据外媒 Ars Technica 从一位谷歌代表处得到的消息表示，因为谷歌“首先更关注操作系统的核心体验”，目前没有计划将 Google Play 商店和 Android 应用添加到 Chrome OS Flex 中，也不允许原先 CloudReady 家庭版支持的某些系统级访问，但未来这些情况是否会改善还未可知。对于谷歌这个旨在“废物利用”的系统，部分网友有些跃跃欲试：“我可能会尝试一下，目前我的笔记本电脑可以正常运行 Windows 11，但我很好奇使用更轻量级的操作系统会提高多少续航能力。”“我有几台苹果和微软拒绝支持的‘过时’设备，即便它们还可以完成大部分例行任务，但我想试试它。”但也有部分网友对 Chrome OS Flex 没有引入 Google Play 商店和 Android 应用这一点感到不满：“微软的 Windows 都在支持谷歌 Android 了，结果谷歌自己却没有将 Android 添加到自家操作系统里，多讽刺啊。”“谢谢，但我宁愿在我过时的 Mac 上安装一个轻量级的 Linux 也好过用这个具有超级限制性的操作系统。”还有人对谷歌这番“废物利用”的说辞提出质疑：“我希望谷歌为此成立一个组织来支持它的言论：他们的“支持”硬件列表现在看起来非常单薄，他们真的会将其扩展到所有机型吗？”（具体支持机型可参看：https://support.google.com/chromeosflex/answer/11513094#zippy=）“也就是说，谷歌明明有能力继续为旧 Chromebook 提供支持，至少可以为关键漏洞提供补丁，可他们却不这么做。”而对于这部分网友的质疑，谷歌在官方博文中已隐隐透露其推出 Chrome OS Flex 的另一目的：“凭借相似的最终用户和 IT 体验，当你准备购买新硬件时，可轻松地从 Chrome OS Flex 过渡到 Chrome OS 设备。”那么，你对 Chrome OS Flex 的看法如何？如电脑型号符合，你是否会尝试一番？参考链接：https://cloud.google.com/blog/products/chrome-enterprise/chrome-os-flexhttps://arstechnica.com/gadgets/2022/02/google-turns-old-macs-pcs-into-chromebooks-with-chrome-os-flex/?comments=1

泽宇-Li 发表于2022-02-18 10:04:58 2022-02-18 10:04:58 最后回复吃完就睡，快乐加倍 2022-02-20 22:31:11
668 4

macOS CSS
[问题求助] 【香港启德项目】【index.css】请求index.css接口，返回418

【功能模块】获取css文件，失败【操作步骤&问题现象】1、portal页面请求index.css文件接口报418错误码2、导致页面展示有问题，麻烦帮忙拉会议解决下【截图信息】【日志信息】（可选，上传日志内容或者附件）顾庆耀/18068848554/guqingyao@chinasoftinc.com

中软-顾庆耀 发表于2022-01-17 09:31:03 2022-01-17 09:31:03 最后回复智慧园区刘师傅 2022-01-17 11:21:16
564 2

CSS

推荐直播

热门标签

Java Python 数据结构数据库 Linux 机器学习网络任务调度 MySQL JavaScript