【HTML】简单制作一个3D动画效果重叠圆环

目录

前言

开始       

HTML部分

CSS部分

效果图

总结


前言

        无需多言,本文将详细介绍一段代码,具体内容如下:

0ee4df6bf96a4b0dadc5c89a3a6e0703.png

开始       

        首先新建文件夹,创建两个文本文档,其中HTML的文件名改为[index.html],CSS的文件名改为[style.css],创建好后右键用文本文档打开,再把下面相对应代码填入后保存即可。

d2ff443751024176b9d551595bee35be.png

HTML部分

        下面HTML代码构建了一个包含动态效果的网页布局,通过定义一系列的<div>元素,并利用CSS变量来控制每个元素的动画和样式属性,从而实现了一个视觉上富有动感和交互性的界面。这些元素被组织在一个名为“cont”的容器内,每个子元素“ac”都有一个唯一的动画属性值,这些值在CSS或JavaScript中被用来定制每个元素的行为,共同创造出一个具有吸引力和功能性的网页设计。

<!DOCTYPE html><!-- 声明文档类型为HTML5,这是创建现代网页的基础。 -->

<html lang="en" ><!-- 根元素,设置语言为英语,有助于搜索引擎优化和多语言支持。 -->
<head>
  <meta charset="UTF-8"><!-- 设置字符编码为UTF-8,确保网页可以正确显示多语言内容。 -->
  <title>雷神 Leo</title><!-- 网页标题,显示在浏览器标签页上,同时也是搜索引擎结果中的标题。 -->
  <link rel="stylesheet" href="./style.css"><!-- 引入外部CSS文件,用于网页样式设计,提升用户界面体验。 -->

</head>
<body>
<div class="cont" style="--t:360"><!-- 使用CSS变量--t设置容器的旋转角度,这里设置为360度,意味着容器会完整旋转一圈。 -->
  <div class="ac" style="--a:1"></div><!-- 一系列的div元素,每个都包含CSS变量--a,用于控制每个子元素的动画属性。每个div都有一个独特的--a值,这在CSS或JavaScript中可以用来控制每个元素的特定样式或行为。 -->
  <div class="ac" style="--a:2"></div>
  <div class="ac" style="--a:3"></div>
  <div class="ac" style="--a:4"></div>
  <div class="ac" style="--a:5"></div>
  <div class="ac" style="--a:6"></div>
  <div class="ac" style="--a:7"></div>
  <div class="ac" style="--a:8"></div>
  <div class="ac" style="--a:9"></div>
  <div class="ac" style="--a:10"></div>
  <div class="ac" style="--a:11"></div>
  <div class="ac" style="--a:12"></div>
  <div class="ac" style="--a:13"></div>
  <div class="ac" style="--a:14"></div>
  <div class="ac" style="--a:15"></div>
  <div class="ac" style="--a:16"></div>
  <div class="ac" style="--a:17"></div>
  <div class="ac" style="--a:18"></div>
  <div class="ac" style="--a:19"></div>
  <div class="ac" style="--a:20"></div>
  <div class="ac" style="--a:21"></div>
  <div class="ac" style="--a:22"></div>
  <div class="ac" style="--a:23"></div>
  <div class="ac" style="--a:24"></div>
  <div class="ac" style="--a:25"></div>
  <div class="ac" style="--a:26"></div>
  <div class="ac" style="--a:27"></div>
  <div class="ac" style="--a:28"></div>
  <div class="ac" style="--a:29"></div>
  <div class="ac" style="--a:30"></div>
  <div class="ac" style="--a:31"></div>
  <div class="ac" style="--a:32"></div>
  <div class="ac" style="--a:33"></div>
  <div class="ac" style="--a:34"></div>
  <div class="ac" style="--a:35"></div>
  <div class="ac" style="--a:36"></div>
  <div class="ac" style="--a:37"></div>
  <div class="ac" style="--a:38"></div>
  <div class="ac" style="--a:39"></div>
  <div class="ac" style="--a:40"></div>
  <div class="ac" style="--a:41"></div>
  <div class="ac" style="--a:42"></div>
  <div class="ac" style="--a:43"></div>
  <div class="ac" style="--a:44"></div>
  <div class="ac" style="--a:45"></div>
  <div class="ac" style="--a:46"></div>
  <div class="ac" style="--a:47"></div>
  <div class="ac" style="--a:48"></div>
  <div class="ac" style="--a:49"></div>
  <div class="ac" style="--a:50"></div>
  <div class="ac" style="--a:51"></div>
  <div class="ac" style="--a:52"></div>
  <div class="ac" style="--a:53"></div>
  <div class="ac" style="--a:54"></div>
  <div class="ac" style="--a:55"></div>
  <div class="ac" style="--a:56"></div>
  <div class="ac" style="--a:57"></div>
  <div class="ac" style="--a:58"></div>
  <div class="ac" style="--a:59"></div>
  <div class="ac" style="--a:60"></div>
  <div class="ac" style="--a:61"></div>
  <div class="ac" style="--a:62"></div>
  <div class="ac" style="--a:63"></div>
  <div class="ac" style="--a:64"></div>
  <div class="ac" style="--a:65"></div>
  <div class="ac" style="--a:66"></div>
  <div class="ac" style="--a:67"></div>
  <div class="ac" style="--a:68"></div>
  <div class="ac" style="--a:69"></div>
  <div class="ac" style="--a:70"></div>
  <div class="ac" style="--a:71"></div>
  <div class="ac" style="--a:72"></div>
  <div class="ac" style="--a:73"></div>
  <div class="ac" style="--a:74"></div>
  <div class="ac" style="--a:75"></div>
  <div class="ac" style="--a:76"></div>
  <div class="ac" style="--a:77"></div>
  <div class="ac" style="--a:78"></div>
  <div class="ac" style="--a:79"></div>
  <div class="ac" style="--a:80"></div>
  <div class="ac" style="--a:81"></div>
  <div class="ac" style="--a:82"></div>
  <div class="ac" style="--a:83"></div>
  <div class="ac" style="--a:84"></div>
  <div class="ac" style="--a:85"></div>
  <div class="ac" style="--a:86"></div>
  <div class="ac" style="--a:87"></div>
  <div class="ac" style="--a:88"></div>
  <div class="ac" style="--a:89"></div>
  <div class="ac" style="--a:90"></div>
  <div class="ac" style="--a:91"></div>
  <div class="ac" style="--a:92"></div>
  <div class="ac" style="--a:93"></div>
  <div class="ac" style="--a:94"></div>
  <div class="ac" style="--a:95"></div>
  <div class="ac" style="--a:96"></div>
  <div class="ac" style="--a:97"></div>
  <div class="ac" style="--a:98"></div>
  <div class="ac" style="--a:99"></div>
  <div class="ac" style="--a:100"></div>
  <div class="ac" style="--a:101"></div>
  <div class="ac" style="--a:102"></div>
  <div class="ac" style="--a:103"></div>
  <div class="ac" style="--a:104"></div>
  <div class="ac" style="--a:105"></div>
  <div class="ac" style="--a:106"></div>
  <div class="ac" style="--a:107"></div>
  <div class="ac" style="--a:108"></div>
  <div class="ac" style="--a:109"></div>
  <div class="ac" style="--a:110"></div>
  <div class="ac" style="--a:111"></div>
  <div class="ac" style="--a:112"></div>
  <div class="ac" style="--a:113"></div>
  <div class="ac" style="--a:114"></div>
  <div class="ac" style="--a:115"></div>
  <div class="ac" style="--a:116"></div>
  <div class="ac" style="--a:117"></div>
  <div class="ac" style="--a:118"></div>
  <div class="ac" style="--a:119"></div>
  <div class="ac" style="--a:120"></div>
  <div class="ac" style="--a:121"></div>
  <div class="ac" style="--a:122"></div>
  <div class="ac" style="--a:123"></div>
  <div class="ac" style="--a:124"></div>
  <div class="ac" style="--a:125"></div>
  <div class="ac" style="--a:126"></div>
  <div class="ac" style="--a:127"></div>
  <div class="ac" style="--a:128"></div>
  <div class="ac" style="--a:129"></div>
  <div class="ac" style="--a:130"></div>
  <div class="ac" style="--a:131"></div>
  <div class="ac" style="--a:132"></div>
  <div class="ac" style="--a:133"></div>
  <div class="ac" style="--a:134"></div>
  <div class="ac" style="--a:135"></div>
  <div class="ac" style="--a:136"></div>
  <div class="ac" style="--a:137"></div>
  <div class="ac" style="--a:138"></div>
  <div class="ac" style="--a:139"></div>
  <div class="ac" style="--a:140"></div>
  <div class="ac" style="--a:141"></div>
  <div class="ac" style="--a:142"></div>
  <div class="ac" style="--a:143"></div>
  <div class="ac" style="--a:144"></div>
  <div class="ac" style="--a:145"></div>
  <div class="ac" style="--a:146"></div>
  <div class="ac" style="--a:147"></div>
  <div class="ac" style="--a:148"></div>
  <div class="ac" style="--a:149"></div>
  <div class="ac" style="--a:150"></div>
  <div class="ac" style="--a:151"></div>
  <div class="ac" style="--a:152"></div>
  <div class="ac" style="--a:153"></div>
  <div class="ac" style="--a:154"></div>
  <div class="ac" style="--a:155"></div>
  <div class="ac" style="--a:156"></div>
  <div class="ac" style="--a:157"></div>
  <div class="ac" style="--a:158"></div>
  <div class="ac" style="--a:159"></div>
  <div class="ac" style="--a:160"></div>
  <div class="ac" style="--a:161"></div>
  <div class="ac" style="--a:162"></div>
  <div class="ac" style="--a:163"></div>
  <div class="ac" style="--a:164"></div>
  <div class="ac" style="--a:165"></div>
  <div class="ac" style="--a:166"></div>
  <div class="ac" style="--a:167"></div>
  <div class="ac" style="--a:168"></div>
  <div class="ac" style="--a:169"></div>
  <div class="ac" style="--a:170"></div>
  <div class="ac" style="--a:171"></div>
  <div class="ac" style="--a:172"></div>
  <div class="ac" style="--a:173"></div>
  <div class="ac" style="--a:174"></div>
  <div class="ac" style="--a:175"></div>
  <div class="ac" style="--a:176"></div>
  <div class="ac" style="--a:177"></div>
  <div class="ac" style="--a:178"></div>
  <div class="ac" style="--a:179"></div>
  <div class="ac" style="--a:180"></div>
  <div class="ac" style="--a:181"></div>
  <div class="ac" style="--a:182"></div>
  <div class="ac" style="--a:183"></div>
  <div class="ac" style="--a:184"></div>
  <div class="ac" style="--a:185"></div>
  <div class="ac" style="--a:186"></div>
  <div class="ac" style="--a:187"></div>
  <div class="ac" style="--a:188"></div>
  <div class="ac" style="--a:189"></div>
  <div class="ac" style="--a:190"></div>
  <div class="ac" style="--a:191"></div>
  <div class="ac" style="--a:192"></div>
  <div class="ac" style="--a:193"></div>
  <div class="ac" style="--a:194"></div>
  <div class="ac" style="--a:195"></div>
  <div class="ac" style="--a:196"></div>
  <div class="ac" style="--a:197"></div>
  <div class="ac" style="--a:198"></div>
  <div class="ac" style="--a:199"></div>
  <div class="ac" style="--a:200"></div>
  <div class="ac" style="--a:201"></div>
  <div class="ac" style="--a:202"></div>
  <div class="ac" style="--a:203"></div>
  <div class="ac" style="--a:204"></div>
  <div class="ac" style="--a:205"></div>
  <div class="ac" style="--a:206"></div>
  <div class="ac" style="--a:207"></div>
  <div class="ac" style="--a:208"></div>
  <div class="ac" style="--a:209"></div>
  <div class="ac" style="--a:210"></div>
  <div class="ac" style="--a:211"></div>
  <div class="ac" style="--a:212"></div>
  <div class="ac" style="--a:213"></div>
  <div class="ac" style="--a:214"></div>
  <div class="ac" style="--a:215"></div>
  <div class="ac" style="--a:216"></div>
  <div class="ac" style="--a:217"></div>
  <div class="ac" style="--a:218"></div>
  <div class="ac" style="--a:219"></div>
  <div class="ac" style="--a:220"></div>
  <div class="ac" style="--a:221"></div>
  <div class="ac" style="--a:222"></div>
  <div class="ac" style="--a:223"></div>
  <div class="ac" style="--a:224"></div>
  <div class="ac" style="--a:225"></div>
  <div class="ac" style="--a:226"></div>
  <div class="ac" style="--a:227"></div>
  <div class="ac" style="--a:228"></div>
  <div class="ac" style="--a:229"></div>
  <div class="ac" style="--a:230"></div>
  <div class="ac" style="--a:231"></div>
  <div class="ac" style="--a:232"></div>
  <div class="ac" style="--a:233"></div>
  <div class="ac" style="--a:234"></div>
  <div class="ac" style="--a:235"></div>
  <div class="ac" style="--a:236"></div>
  <div class="ac" style="--a:237"></div>
  <div class="ac" style="--a:238"></div>
  <div class="ac" style="--a:239"></div>
  <div class="ac" style="--a:240"></div>
  <div class="ac" style="--a:241"></div>
  <div class="ac" style="--a:242"></div>
  <div class="ac" style="--a:243"></div>
  <div class="ac" style="--a:244"></div>
  <div class="ac" style="--a:245"></div>
  <div class="ac" style="--a:246"></div>
  <div class="ac" style="--a:247"></div>
  <div class="ac" style="--a:248"></div>
  <div class="ac" style="--a:249"></div>
  <div class="ac" style="--a:250"></div>
  <div class="ac" style="--a:251"></div>
  <div class="ac" style="--a:252"></div>
  <div class="ac" style="--a:253"></div>
  <div class="ac" style="--a:254"></div>
  <div class="ac" style="--a:255"></div>
  <div class="ac" style="--a:256"></div>
  <div class="ac" style="--a:257"></div>
  <div class="ac" style="--a:258"></div>
  <div class="ac" style="--a:259"></div>
  <div class="ac" style="--a:260"></div>
  <div class="ac" style="--a:261"></div>
  <div class="ac" style="--a:262"></div>
  <div class="ac" style="--a:263"></div>
  <div class="ac" style="--a:264"></div>
  <div class="ac" style="--a:265"></div>
  <div class="ac" style="--a:266"></div>
  <div class="ac" style="--a:267"></div>
  <div class="ac" style="--a:268"></div>
  <div class="ac" style="--a:269"></div>
  <div class="ac" style="--a:270"></div>
  <div class="ac" style="--a:271"></div>
  <div class="ac" style="--a:272"></div>
  <div class="ac" style="--a:273"></div>
  <div class="ac" style="--a:274"></div>
  <div class="ac" style="--a:275"></div>
  <div class="ac" style="--a:276"></div>
  <div class="ac" style="--a:277"></div>
  <div class="ac" style="--a:278"></div>
  <div class="ac" style="--a:279"></div>
  <div class="ac" style="--a:280"></div>
  <div class="ac" style="--a:281"></div>
  <div class="ac" style="--a:282"></div>
  <div class="ac" style="--a:283"></div>
  <div class="ac" style="--a:284"></div>
  <div class="ac" style="--a:285"></div>
  <div class="ac" style="--a:286"></div>
  <div class="ac" style="--a:287"></div>
  <div class="ac" style="--a:288"></div>
  <div class="ac" style="--a:289"></div>
  <div class="ac" style="--a:290"></div>
  <div class="ac" style="--a:291"></div>
  <div class="ac" style="--a:292"></div>
  <div class="ac" style="--a:293"></div>
  <div class="ac" style="--a:294"></div>
  <div class="ac" style="--a:295"></div>
  <div class="ac" style="--a:296"></div>
  <div class="ac" style="--a:297"></div>
  <div class="ac" style="--a:298"></div>
  <div class="ac" style="--a:299"></div>
  <div class="ac" style="--a:300"></div>
  <div class="ac" style="--a:301"></div>
  <div class="ac" style="--a:302"></div>
  <div class="ac" style="--a:303"></div>
  <div class="ac" style="--a:304"></div>
  <div class="ac" style="--a:305"></div>
  <div class="ac" style="--a:306"></div>
  <div class="ac" style="--a:307"></div>
  <div class="ac" style="--a:308"></div>
  <div class="ac" style="--a:309"></div>
  <div class="ac" style="--a:310"></div>
  <div class="ac" style="--a:311"></div>
  <div class="ac" style="--a:312"></div>
  <div class="ac" style="--a:313"></div>
  <div class="ac" style="--a:314"></div>
  <div class="ac" style="--a:315"></div>
  <div class="ac" style="--a:316"></div>
  <div class="ac" style="--a:317"></div>
  <div class="ac" style="--a:318"></div>
  <div class="ac" style="--a:319"></div>
  <div class="ac" style="--a:320"></div>
  <div class="ac" style="--a:321"></div>
  <div class="ac" style="--a:322"></div>
  <div class="ac" style="--a:323"></div>
  <div class="ac" style="--a:324"></div>
  <div class="ac" style="--a:325"></div>
  <div class="ac" style="--a:326"></div>
  <div class="ac" style="--a:327"></div>
  <div class="ac" style="--a:328"></div>
  <div class="ac" style="--a:329"></div>
  <div class="ac" style="--a:330"></div>
  <div class="ac" style="--a:331"></div>
  <div class="ac" style="--a:332"></div>
  <div class="ac" style="--a:333"></div>
  <div class="ac" style="--a:334"></div>
  <div class="ac" style="--a:335"></div>
  <div class="ac" style="--a:336"></div>
  <div class="ac" style="--a:337"></div>
  <div class="ac" style="--a:338"></div>
  <div class="ac" style="--a:339"></div>
  <div class="ac" style="--a:340"></div>
  <div class="ac" style="--a:341"></div>
  <div class="ac" style="--a:342"></div>
  <div class="ac" style="--a:343"></div>
  <div class="ac" style="--a:344"></div>
  <div class="ac" style="--a:345"></div>
  <div class="ac" style="--a:346"></div>
  <div class="ac" style="--a:347"></div>
  <div class="ac" style="--a:348"></div>
  <div class="ac" style="--a:349"></div>
  <div class="ac" style="--a:350"></div>
  <div class="ac" style="--a:351"></div>
  <div class="ac" style="--a:352"></div>
  <div class="ac" style="--a:353"></div>
  <div class="ac" style="--a:354"></div>
  <div class="ac" style="--a:355"></div>
  <div class="ac" style="--a:356"></div>
  <div class="ac" style="--a:357"></div>
  <div class="ac" style="--a:358"></div>
  <div class="ac" style="--a:359"></div>
  <div class="ac" style="--a:360"></div>
</div>
  
</body>
</html>

CSS部分

       这段代码定义了两个动画:rotrot-controt 动画使得元素从完全旋转的状态过渡到静止状态,而 rot-cont 动画则是一个连续旋转的效果,元素在X轴旋转一圈,Y轴反向旋转一圈,Z轴旋转两圈。这些动画可以通过将 animation 属性应用到相应的CSS选择器上来使用。

/* 定义根变量 --delay-offset */
:root {
  --delay-offset: -1s;
}

/* 定义类ac的样式 */
.ac {
  --l: 10; /* 线宽 */
  --clr: hsl(calc(var(--a) * 360deg / var(--t) ) 75% calc(var(--l) * 6% + 15%)); /* 颜色 */
  background-color: var(--clr); /* 背景色 */
  box-shadow: 0 0 0.5em var(--clr); /* 盒子阴影 */
}

/* 定义类cont的样式 */
.cont {
  position: relative; /* 相对定位 */
  width: 50vmin; /* 宽度 */
  height: 50vmin; /* 高度 */
  border-radius: 100vmax; /* 圆角 */
  box-shadow: 0 0 1em 0.5em #fff5, inset 0 0 1em 0.5em #fff5; /* 外部和内部阴影 */
  animation: rot-cont infinite forwards linear 10s; /* 无限循环动画,持续时间10秒 */
}

/* 定义div的通用样式 */
div {
  box-sizing: border-box; /* 边框盒模型 */
  transform-style: preserve-3d; /* 3D变换保持子元素的3D位置 */
}

/* 再次定义类ac的样式 */
.ac {
  --dist: 25vmin; /* 距离 */
  position: absolute; /* 绝对定位 */
  width: 0.3em; /* 宽度 */
  height: 0.3em; /* 高度 */
  top: 25vmin; /* 顶部位置 */
  left: 25vmin; /* 左侧位置 */
  border-radius: 100%; /* 圆形 */
  --x: calc(cos(calc(var(--a) * 360deg / var(--t))) * var(--dist)); /* x坐标 */
  --y: calc(sin(calc(var(--a) * 360deg / var(--t))) * var(--dist)); /* y坐标 */
  --z: 5em; /* z坐标 */
  opacity: 0; /* 不透明度 */
  animation: rot linear 5s infinite forwards calc(var(--a) * var(--delay-offset)); /* 动画效果 */
}

@keyframes rot {
  from {
    /* 在动画开始时,元素完全透明并且沿着X、Y、Z轴旋转360度。同时,根据变量 --x、--y 和 --z 的值进行平移。 */
    opacity: 1; /* 元素完全不透明 */
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg) translateX(var(--x)) translateY(var(--y)) translateZ(var(--z));
  }
  to {
    /* 在动画结束时,元素保持不透明,并且旋转角度重置为0度。平移位置保持不变。 */
    opacity: 1; /* 元素保持不透明 */
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(var(--x)) translateY(var(--y)) translateZ(var(--z));
  }
}

@keyframes rot-cont {
  from {
    /* 动画开始时,元素没有任何旋转。 */
    transform: rotateX(0) rotateY(0) rotateZ(0);
  }
  to {
    /* 动画结束时,元素沿着X轴旋转360度,Y轴旋转-360度(反向旋转),Z轴旋转720度。 */
    transform: rotateX(360deg) rotateY(-360deg) rotateZ(720deg);
  }
}

/* 定义body的样式 */
body {
  display: grid; /* 网格布局 */
  place-content: center; /* 水平垂直居中 */
  place-items: center; /* 水平垂直居中 */
  min-height: 100vh; /* 最小高度 */
  margin: 0; /* 移除默认外边距 */
  perspective: 30em; /* 透视效果 */
  background-image: radial-gradient(circle at center, #2E4755, #1f2020); /* 背景图片 */
  color: #fefefe50; /* 文本颜色 */
}

效果图

a6591c03b3314ec5b3c4393567826177.png

 

总结

        这段HTML和CSS代码描述了一个具有3D动画效果的网页结构。HTML部分定义了一个带有cont类的容器,其中包含了多个带有ac类的子元素。每个子元素都通过CSS变量--a赋予了一个唯一的标识,这些标识将用于控制每个元素的动画和样式。

        CSS部分首先设置了一些根变量,如--delay-offset,用于后续动画延迟的计算。.ac类的样式定义了子元素的颜色和阴影效果,而.cont类则定义了容器的大小、阴影和自身的动画效果。 动画rot是一个简单的旋转动画,使得每个子元素从完全旋转的状态过渡到静止状态。动画rot-cont则使得容器本身进行一个复杂的3D旋转。

        最后,body的样式将整个页面设置为居中布局,并且提供了一个深色调的背景,以及为页面添加了透视效果,使得3D动画更加立体和生动。整体上,这段代码创建了一个动态的、视觉效果丰富的网页,通过3D动画增加了用户的交互体验。

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/515183.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Tensorflow2.0笔记 - 自定义Layer和Model实现CIFAR10数据集的训练

本笔记记录使用自定义Layer和Model来做CIFAR10数据集的训练。 CIFAR10数据集下载&#xff1a; https://www.cs.toronto.edu/~kriz/cifar-10-python.tar.gz 自定义的Layer和Model实现较为简单&#xff0c;参数量较少&#xff0c;并且没有卷积层和dropout等&#xff0c;最终准确率…

Java—抽象方法与接口

声明&#xff1a;以下内容是根据B站黑马程序员的Java课程&#xff0b;博主自己的理解整理而成&#xff0c;课程很好&#xff0c;适合初学者学习。 关于此类题目&#xff0c;重要的是识别出用什么来实现&#xff0c;到底是接口还是抽象方法&#xff0c;还是共有的属性等等&…

医用三维影像PACS系统源码 一套成熟的PACS系统应具备哪些核心要素?

医用三维影像PACS系统源码 一套成熟的PACS系统应具备哪些核心要素&#xff1f; PACS及影像存取与传输系统”( Picture Archiving and Communication System)&#xff0c;为以实现医学影像数字化存储、诊断为核心任务&#xff0c;从医学影像设备&#xff08;如CT、CR、DR、MR、…

ZZS-7/1G212分合闸电源综合控制装置 220VAC 板前接线 JOSEF约瑟

系列型号&#xff1a; ZZS-7G/1分闸、合闸、电源监视综合控制装置&#xff1b; ZZS-7G/11分闸、合闸、电源监视综合控制装置&#xff1b; ZZS-7G/23分闸、合闸、电源监视综合控制装置&#xff1b; ZZS-7G/24分闸、合闸、电源监视综合控制装置&#xff1b; ZZS-7/1G11分闸、合闸…

21.兼容性测试

考试频率低&#xff1b; 一般考兼容性测试会结合web测试&#xff1b;&#xff08;兼容性矩阵&#xff09; 主要议题&#xff1a; 1.兼容性测试概述 2.硬件兼容性测试 最低配置不讲究工作负载&#xff0c;意思是软件能够运行的最低要求环境&#xff1b; 推荐配置&#xff0c…

修复503 Service Unavailable Error问题

近期我们网网站经常出现503 Service Unavailable Error&#xff0c;在此之前我们的网站从未出现过这种问题&#xff0c;我们向虚拟主机提供商Hostease咨询后&#xff0c;了解到503 Service Unavailable错误是指服务器暂时无法处理请求&#xff0c;通常是由于服务器过载、维护、…

Python数据结构与算法——数据结构(链表、哈希表、树)

目录 链表 链表介绍 创建和遍历链表 链表节点插入和删除 双链表 链表总结——复杂度分析 哈希表(散列表) 哈希表介绍 哈希冲突 哈希表实现 哈希表应用 树 树 树的示例——模拟文件系统 二叉树 二叉树的链式存储 二叉树的遍历 二叉搜索树 插入 查询 删除 AVL树 …

路由Vue-Router使用

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成&#xff0c;让用 Vue.js 构建单页应用变得轻而易举。 介绍 | Vue Router (vuejs.org) 1. 安装 npm install vue-router4 查看安装好的vue-router 2. 添加路由 新建views文件夹用来存放所有的页面&#xff0c;在…

初入职,如何用好 git 快速上手项目开发

前言 介绍在工作中使用 git 工具 文章目录 前言一、git 简介1、是什么作用操作3、用途 二、基本概念1、工作区2、暂存区3、版本库4、操作过程 三、基本命令操作 一、git 简介 1、是什么 git 是一个方便管理代码版本的工具&#xff0c;用一个树结构来维护和管理所有的历史版本…

数据结构记录

之前记录的数据结构笔记&#xff0c;不过图片显示不了了 数据结构与算法(C版) 1、绪论 1.1、数据结构的研究内容 一般应用步骤&#xff1a;分析问题&#xff0c;提取操作对象&#xff0c;分析操作对象之间的关系&#xff0c;建立数学模型。 1.2、基本概念和术语 数据&…

Finite Element Procedures K.J.Bathe 【教材pdf+部分源码】|有限元经典教材 | 有限元编程

专栏导读 作者简介&#xff1a;工学博士&#xff0c;高级工程师&#xff0c;专注于工业软件算法研究本文已收录于专栏&#xff1a;《有限元编程从入门到精通》本专栏旨在提供 1.以案例的形式讲解各类有限元问题的程序实现&#xff0c;并提供所有案例完整源码&#xff1b;2.单元…

flask的使用学习笔记1

跟着b站学的1-06 用户编辑示例_哔哩哔哩_bilibili flask是一个轻量级&#xff0c;短小精悍&#xff0c;扩展性强&#xff0c;可以扩展很多组件&#xff0c;django大而全 编程语言它们的区别&#xff1a; (这些语言都很了解&#xff0c;java和python是高级语言&#xff0c;都…

动手做一个最小Agent——TinyAgent!

Datawhale干货 作者&#xff1a;宋志学&#xff0c;Datawhale成员 前 言 大家好&#xff0c;我是不要葱姜蒜。在ChatGPT横空出世&#xff0c;夺走Bert的桂冠之后&#xff0c;大模型愈发地火热&#xff0c;国内各种模型层出不穷&#xff0c;史称“百模大战”。大模型的能力是毋…

UE4几个常用节点链接

UE4几个常用节点链接 2017-12-02 12:54 1. 流光材质(及uv平铺次数) 2. 跑九宫格 3.闪光3。1 粒子闪烁效果 4.图案重复5.平移扭曲 6.溶解 刀光的uv滚动图片源或采样节点属性里改成clamp无后期发光光晕anistropic 各向异性高光法线图 法线图叠加 blendangle orrectedNo…

探索设计模式的魅力:揭秘B/S模式在AI大模型时代的蜕变与进化

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 揭秘B/S模式在AI大模型时代的蜕变与进化 &#x1f680;在AI的波澜壮阔中&#xff0c;B/S模式&…

为 AI 而生的编程语言「GitHub 热点速览」

Mojo 是一种面向 AI 开发者的新型编程语言。它致力于将 Python 的简洁语法和 C 语言的高性能相结合&#xff0c;以填补研究和生产应用之间的差距。Mojo 自去年 5 月发布后&#xff0c;终于又有动作了。最近&#xff0c;Mojo 的标准库核心模块已在 GitHub 上开源&#xff0c;采用…

面试题:JVM 调优

一、JVM 参数设置 1. tomcat 的设置 vm 参数 修改 TOMCAT_HOME/bin/catalina.sh 文件&#xff0c;如下图 JAVA_OPTS"-Xms512m -Xmx1024m" 2. springboot 项目 jar 文件启动 通常在linux系统下直接加参数启动springboot项目 nohup java -Xms512m -Xmx1024m -jar…

前端html+css+js常用总结快速入门

&#x1f525;博客主页&#xff1a; A_SHOWY&#x1f3a5;系列专栏&#xff1a;力扣刷题总结录 数据结构 云计算 数字图像处理 力扣每日一题_ 学习前端全套所有技术性价比低下且容易忘记&#xff0c;先入门学会所有基础的语法&#xff08;cssjsheml&#xff09;&#xff…

Valkey是一个新兴的开源项目,旨在成为Redis的替代品,背后得到了AWS、Google、Oracle支持

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

Windows 禁用 Defender

原文&#xff1a;https://blog.iyatt.com/?p8078 2024.4.4 Windows 11 专业版 23H2 Beta 预览版 进入安全中心&#xff0c;关闭所有&#xff0c;特别是篡改防护选项 打开注册表 地址栏粘粘路径 计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Windows Defende…