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
876 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
243 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
132 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
248 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 可以绘制出许多形状

说明使用 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
129 3

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
232 0

CSS 5G智慧园区
[技术干货] 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
567 2

CSS
[技术干货] css3溢出隐藏的方法

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。实现方法：123overflow: hidden;text-overflow:ellipsis;white-space: nowrap;但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。接下来重点说一说多行文本溢出显示省略号，如下。实现方法：1234display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;适用范围：因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；注：• -webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：• display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。• -webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。实现方法：1234567p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;background: -webkit-linear-gradient(left, transparent, #fff 55%);background: -o-linear-gradient(right, transparent, #fff 55%);background: -moz-linear-gradient(right, transparent, #fff 55%);background: linear-gradient(to right, transparent, #fff 55%);}适用范围：该方法适用范围广，但文字未超出行的情况下也会出现省略号,可结合js优化该方法。注：1. 将height设置为line-height的整数倍，防止超出的文字露出。2. 给p::after添加渐变背景可避免文字只显示一半。3. 由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：<span>…<span/>）；兼容ie8需要将::after替换成:after。以上所述是小编给大家介绍的css3溢出隐藏的方法

加油O幸福 发表于2021-12-29 12:39:36 2021-12-29 12:39:36 最后回复加油O幸福 2021-12-29 12:39:36
224 0

CSS
[技术干货] Logstash-OSS 7.16.2(解决Apache Log4j2漏洞)对接华为云CSS(ES 7.6.2)失败问题解决方案

【背景】Logstash-OSS受Apache Log4j2远程代码影响:https://discuss.elastic.co/t/apache-log4j2-remote-code-execution-rce-vulnerability-cve-2021-44228-esa-2021-31/291476，需要由7.10.1版本升级至解决问题版本7.16.2【问题】logstash.conf:output { elasticsearch{ hosts => ["https://10.33.27.xxx:9200","https://10.33.27.xxy:9200","https://10.33.27.xxz:9200"] user => "admin" password => "xxxxx" cacert => "xxxxx" ilm_enabled => false index => "xxxx-%{+YYYY.MM.dd}" manage_template => true template_overwrite => true template_name => "xxxx_template" }}华为云CSS服务版本为ElasticSearch 7.6.2版本，升级Logstash-OSS版本至7.16.2后，启动失败：[2021-12-27T09:44:20,042][ERROR][logstash.javapipeline][main]Pipelineerror{:pipeline_id=>"main",:exception=>#<LogStash::ConfigurationError:CouldnotconnecttoacompatibleversionofElasticsearch>,:backtrace=>["/home/test/logstash/vendor/bundle/jruby/2.5.0/gems/logstash-output-Elasticsearch-11.2.3-java/lib/logstash/outputs/Elasticsearch/http_client/pool.rb:247:in blockinhealthcheck!'","org/jruby/RubyHash.java:1415:in each'","/home/test/logstash/vendor/bundle/jruby/2.5.0/gems/logstash-output-Elasticsearch-11.2.3-java/lib/logstash/outputs/Elasticsearch/http_client/pool.rb:240:in healthcheck!'","/home/test/logstash/vendor/bundle/jruby/2.5.0/gems/logstash-output-elasticsearch-11.2.3-java/lib/logstash/outputs/elasticsearch/http_client/pool.rb:374:in update_urls'","/home/test/logstash/vendor/bundle/jruby/2.5.0/gems/logstash-output-Elasticsearch-11.2.3-java/lib/logstash/outputs/Elasticsearch/http_client/pool.rb:89:in update_initial_urls'","/home/test/logstash/vendor/bundle/jruby/2.5.0/gems/logstash-output-elasticsearch-11.2.3-java/lib/logstash/outputs/elasticsearch/http_client/pool.rb:83:in start'","/home/test/logstash/vendor/bundle/jruby/2.5.0/gems/logstash-output-Elasticsearch-11.2.3-java/lib/logstash/outputs/Elasticsearch/http_client.rb:359:in build_pool'","/home/test/logstash/vendor/bundle/jruby/2.5.0/gems/logstash-output-elasticsearch-11.2.3-java/lib/logstash/outputs/elasticsearch/http_client.rb:63:in initialize'","/home/test/logstash/vendor/bundle/jruby/2.5.0/gems/logstash-output-Elasticsearch-11.2.3-java/lib/logstash/outputs/Elasticsearch/http_client_builder.rb:106:in create_http_client'","/home/test/logstash/vendor/bundle/jruby/2.5.0/gems/logstash-output-elasticsearch-11.2.3-java/lib/logstash/outputs/elasticsearch/http_client_builder.rb:102:in build'","/home/test/logstash/vendor/bundle/jruby/2.5.0/gems/logstash-output-Elasticsearch-11.2.3-java/lib/logstash/plugin_mixins/Elasticsearch/common.rb:34:in build_client'","/home/test/logstash/vendor/bundle/jruby/2.5.0/gems/logstash-output-elasticsearch-11.2.3-java/lib/logstash/outputs/elasticsearch.rb:275:in register'","org/logstash/config/ir/compiler/OutputStrategyExt.java:131:in register'","org/logstash/config/ir/compiler/AbstractOutputDelegatorExt.java:68:in register'","/home/test/logstash/logstash-core/lib/logstash/java_pipeline.rb:232:in blockinregister_plugins'","org/jruby/RubyArray.java:1821:in each'","/home/test/logstash/logstash-core/lib/logstash/java_pipeline.rb:231:in register_plugins'","/home/test/logstash/logstash-core/lib/logstash/java_pipeline.rb:589:in maybe_setup_out_plugins'","/home/test/logstash/logstash-core/lib/logstash/java_pipeline.rb:244:in start_workers'","/home/test/logstash/logstash-core/lib/logstash/java_pipeline.rb:189:in run'","/home/test/logstash/logstash-core/lib/logstash/java_pipeline.rb:141:in`blockinstart'"],"pipeline.sources"=>["/home/test/conf/logstash.conf"],:thread=>"#<Thread:0x3a3c3828run>"}[2021-12-27T09:44:20,053][INFO][logstash.javapipeline][main]Pipelineterminated{"pipeline.id"=>"main"}[2021-12-27T09:44:20,078][ERROR][logstash.agent]Failedtoexecuteaction{:id=>:main,:action_type=>LogStash::ConvergeResult::FailedAction,:message=>"Couldnotexecuteaction:PipelineAction::Create,action_result:false",:backtrace=>nil}[2021-12-27T09:44:20,188][INFO][logstash.runner]Logstashshutdown.[2021-12-27T09:44:20,201][FATAL][org.logstash.Logstash]Logstashstoppedprocessingbecauseofanerror:(SystemExit)exitorg.jruby.exceptions.SystemExit:(SystemExit)exitatorg.jruby.RubyKernel.exit(org/jruby/RubyKernel.java:747)~[jruby-complete-9.2.20.1.jar:?]atorg.jruby.RubyKernel.exit(org/jruby/RubyKernel.java:710)~[jruby-complete-9.2.20.1.jar:?]athome.test.logstash.lib.bootstrap.environment.(/home/test/logstash/lib/bootstrap/environment.rb:94)~[?:?]官方ReleaseNode：https://www.elastic.co/guide/en/logstash/7.16/logstash-7-13-0.html从7.11版本开始，ES不再提供ElasticSearch-OSS版本：https://github.com/logstash-plugins/logstash-output-elasticsearch/pull/1005Logstash-OSS从7.13.0开始，检查ES license，不再支持对接ElasticSearch-OSS版本，故Logstash-OSS升级至7.16.2后对接失败【解决方案】OpenSearch：https://opensearch.org/OpenSearch is a community-driven, open source search and analytics suite derived from Apache 2.0 licensed Elasticsearch 7.10.2 & Kibana 7.10.2. It consists of a search engine daemon, OpenSearch, and a visualization and user interface, OpenSearch Dashboards. OpenSearch enables people to easily ingest, secure, search, aggregate, view, and analyze data. These capabilities are popular for use cases such as application search, log analytics, and more. With OpenSearch people benefit from having an open source product they can use, modify, extend, monetize, and resell how they want. At the same time, OpenSearch will continue to provide a secure, high-quality search and analytics suite with a rich roadmap of new and innovative functionality.OpenSearch提供Logstash OSS with OpenSearch Ouput Plugin:https://opensearch.org/downloads.html对应Logstash-OSS官方版本+logstash plugin(logstash-output-opensearch：https://github.com/opensearch-project/logstash-output-opensearch)二次打包：https://github.com/opensearch-project/logstash-output-opensearch/blob/main/release/tar/generate-artifact.sh从OpenSearch官方下载：https://artifacts.opensearch.org/logstash/logstash-oss-with-opensearch-output-plugin-7.16.2-linux-x64.tar.gz，或者通过logstash-plugin安装logstash-ouput-opensearch插件。修改logstash.conf：output { opensearch{ hosts => ["https://10.33.27.xxx:9200","https://10.33.27.xxy:9200","https://10.33.27.xxz:9200"] user => "admin" password => "xxxxx" cacert => "xxxxx" index => "xxxx-%{+YYYY.MM.dd}" manage_template => true template_overwrite => true template_name => "xxxx_template" }}启动成功：

swxEmily 发表于2021-12-27 15:17:23 2021-12-27 15:17:23 最后回复 swxEmily 2021-12-27 15:17:23
2815 0

CSS Apache Elasticsearch
[问题求助] 【香港启德】【App开发】引用css顺序导致界面样式混乱

【功能模块】App开发【操作步骤&问题现象】1、LogInfoManagement App---->Page---->LogInfoManagement标准页面2、用户管理跟日志管理两个标准页面, 先访问用户管理页面, element-ui 这个css并没有加载, 然后访问日志管理页面, 其他的css文件一致没有重复加载,这就导致了element的css文件再最后加载了, 覆盖了之前自定义的样式我想知道这个element的资源文件是在哪里引入的3、图1：样式错乱图2：样式正常图3：样式加载问题【截图信息】【日志信息】（可选，上传日志内容或者附件）

呼呼哈嘿 发表于2021-10-14 17:57:13 2021-10-14 17:57:13 最后回复 Brushace 2021-10-14 18:02:25
728 1

CSS 移动APP
[问题求助] 【标准页面】园区主题库ThemeCSS4IOC 4.0.1按照文档给步骤条引用类“dream-steps-simple”无样式

【功能模块】【标准页面】园区主题库ThemeCSS4IOC 4.0.1按照文档给步骤条引用类“dream-steps-simple”无样式，请问怎么引入园区主题库ThemeCSS4IOC 步骤条的默认样式？【操作步骤&问题现象】1、下载ThemeCSS4IOC 4.0.1库后，在css代码中没有搜到关于“dream-steps-simple”的样式2、搜索“steps”有关于 “el-steps” “hw-steps”的样式，但是他们的子元素类名都为“el-step__”，而在标准页面创建步骤条后的默认类名为“ivu-steps”，将样式复制到标准页面样式代码中，步骤条有默认样式，需要给每一行样式添加“!important”才能生效请问怎么引入园区主题库ThemeCSS4IOC 步骤条的默认样式【截图信息】【日志信息】（可选，上传日志内容或者附件）

周乐 发表于2021-09-13 13:22:01 2021-09-13 13:22:01 最后回复智慧园区座席二 2021-09-13 17:23:20
1600 6

CSS
[技术干货] css 分页实例

简单分页如果你的网站有很多个页面，你就需要使用分页来为每个页面做导航。以下实例演示了如何使用 HTML 和 CSS 来创建分页：CSS 实例ul.pagination { display: inline-block; padding: 0; margin: 0;}ul.pagination li {display: inline;}ul.pagination li a { color: black; float: left; padding: 8px 16px; text-decoration: none;}点击及鼠标悬停分页样式«1234567»如果点击当前页，可以使用 .active 来设置当前页样式，鼠标悬停可以使用 :hover 选择器来修改样式：CSS 实例ul.pagination li a.active { background-color: #4CAF50; color: white;}ul.pagination li a:hover:not(.active) {background-color: #ddd;}CSS 实例ul.pagination li a.active { background-color: #4CAF50; color: white;}ul.pagination li a:hover:not(.active) {background-color: #ddd;}圆角样式«1234567»可以使用 border-radius 属性为选中的页码来添加圆角样式:CSS 实例ul.pagination li a { border-radius: 5px;}ul.pagination li a.active { border-radius: 5px;}鼠标悬停过渡效果«1234567»我们可以通过添加 transition 属性来为鼠标移动到页码上时添加过渡效果:CSS 实例ul.pagination li a { transition: background-color .3s;}带边框分页«1234567»我们可以使用 border 属性来添加带边框分页:CSS 实例ul.pagination li a { border: 1px solid #ddd; /* Gray */}圆角边框提示: 在第一个分页链接和最后一个分页链接添加圆角：«1234567»CSS 实例.pagination li:first-child a { border-top-left-radius: 5px; border-bottom-left-radius: 5px;}.pagination li:last-child a { border-top-right-radius: 5px; border-bottom-right-radius: 5px;}分页间隔提示: 你可以使用 margin 属性来为每个页码直接添加空格：«1234567»CSS 实例ul.pagination li a { margin: 0 4px; /* 0 对应的是头部与底部，可以修改它看看效果 */}分页字体大小«1234567»我们可以使用 font-size 属性来设置分页的字体大小:CSS 实例ul.pagination li a { font-size: 22px;}居中分页«1234567»如果要让分页居中，可以在容器元素上 (如 <div>) 添加 text-align:center 样式：CSS 实例div.center { text-align: center;}更多实例CSS 实例面包屑导航首页前端 HTML 教程 HTML 段落另外一种导航为面包屑导航，实例如下：CSS 实例ul.breadcrumb { padding: 8px 16px; list-style: none; background-color: #eee;}ul.breadcrumb li {display: inline;}ul.breadcrumb li+li:before { padding: 8px; color: black; content: "/\00a0";

泽宇-Li 发表于2021-09-05 07:36:56 2021-09-05 07:36:56 最后回复泽宇-Li 2021-09-05 07:36:56
442 0

CSS HTML

推荐直播

热门标签

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