搜索到
16
篇与
的结果
-
html隐藏div怎么设置 HTML 中隐藏 DIV 元素的方法有几种：1. display 属性这是最直接的方法，将 DIV 的 display 属性设置为 none 即可。<div id="myDIV" style="display: none;">...</div>2. visibility 属性visibility 属性用于控制元素的可见性。将 DIV 的 visibility 属性设置为 hidden 即可隐藏它。<div id="myDIV" style="visibility: hidden;">...</div>3. opacity 属性opacity 属性用于控制元素的透明度。将 DIV 的 opacity 属性设置为 0 可以使其不可见。<div id="myDIV" style="opacity: 0;">...</div>4. z-index 属性z-index 属性用于控制元素的层叠顺序。将 DIV 的 z-index 属性设置为一个负值 (例如 -999) 即可将其移至其他元素的后面。<div id="myDIV" style="z-index: -999;">...</div>注意：选择合适的方法取决于具体的需要。display 属性是隐藏 DIV 的最彻底的方法，而 visibility 和 opacity 属性允许 DIV 仍然占据页面空间。z-index 属性用于将 DIV 移动到其他元素后面，但不会将其隐藏。 -
动态背景，视觉盛宴：JavaScript动画让网页活起来！ 先看效果 背景往往被视作页面的基础元素，但在现代设计实践中，背景也可以是动态的、引人入胜的焦点。本文将探索如何使用JavaScript来创造酷炫的背景动画效果，让网页背景跳出静态的框架，变得生动而富有吸引力。下面是代码html部分<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>particles.js</title> <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles."> <meta name="author" content="Vincent Garreau" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="stylesheet" media="screen" href="css/style.css"> </head> <body> <!-- particles.js container --> <div id="particles-js"></div> <!-- scripts --> <script src="./particles.js"></script> <script src="js/app.js"></script> </body> </html>// app.js particlesJS('particles-js', { "particles": { "number": { "value": 80, "density": { "enable": true, "value_area": 800 } }, "color": { "value": "#ffffff" }, "shape": { "type": "circle", "stroke": { "width": 0, "color": "#000000" }, "polygon": { "nb_sides": 5 }, }, "opacity": { "value": 0.5, "random": false, "anim": { "enable": false, "speed": 1, "opacity_min": 0.1, "sync": false } }, "size": { "value": 5, "random": true, "anim": { "enable": false, "speed": 40, "size_min": 0.1, "sync": false } }, "line_linked": { "enable": true, "distance": 150, "color": "#ffffff", "opacity": 0.4, "width": 1 }, "move": { "enable": true, "speed": 6, "direction": "none", "random": false, "straight": false, "out_mode": "out", "attract": { "enable": false, "rotateX": 600, "rotateY": 1200 } } }, "interactivity": { "detect_on": "canvas", "events": { "onhover": { "enable": true, "mode": "repulse" }, "onclick": { "enable": true, "mode": "push" }, "resize": true }, "modes": { "grab": { "distance": 400, "line_linked": { "opacity": 1 } }, "bubble": { "distance": 400, "size": 40, "duration": 2, "opacity": 8, "speed": 3 }, "repulse": { "distance": 200 }, "push": { "particles_nb": 4 }, "remove": { "particles_nb": 2 } } }, "retina_detect": true, "config_demo": { "hide_card": false, "background_color": "#b61924", "background_image": "", "background_position": "50% 50%", "background_repeat": "no-repeat", "background_size": "cover" } } );
-
HTML+CSS+JS 立体字时钟 实现了一个时钟效果，包括一个背景颜色为淡粉色的容器和一个使用Google字体库中的Kanit字体的时钟。时钟使用了flex布局，使其水平和垂直居中。时钟的数字使用了Kanit字体，字体大小为150px，字体加粗，阴影效果使用了多个不同颜色和大小的阴影，使其看起来更加立体和有层次感。codehtml<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>立体字时钟</title> <link rel="stylesheet" href="./30-立体字时钟.css"> </head> <body> <div class="clock"> <p id="1">0</p> <p id="2">0</p> <p id="3">:</p> <p id="4">0</p> <p id="5">0</p> <p id="6">:</p> <p id="7">0</p> <p id="8">0</p> </div> </body> <script src="./30-立体字时钟.js"></script> </html>css@import url("http://fonts.googleapis.com/css?family=Kanit"); * { margin: 0; padding: 0; } body { height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #eacccc; user-select: none; } .clock { display: flex; } .clock p { width: 95px; font-size: 150px; color: #fff; text-align: center; font-family: "Kanit"; font-weight: 900; text-shadow: 0 1px 0 #deafaf, 0 2px 0 #bda8a8, 0 3px 0 #d8a1a1, 0 4px 0 #d59999, 0 5px 0 #d29292, 0 6px 0 #cf8b8b, 0 7px 0 #cc8484, 0 8px 0 #c97d7d, 0 0 5px rgba(231, 156, 156, 0.05), 0 -1px 3px rgba(231, 156, 156, 0.2), 0 9px 9px rgba(231, 156, 156, 0.3), 0 12px 12px rgba(231, 156, 156, 0.3), 0 15px 15px rgba(231, 156, 156, 0.3); }JavaScriptfunction myTime() { let time = new Date(); let hh = time.getHours(); let mm = time.getMinutes(); let ss = time.getSeconds(); document.getElementById("1").innerText = Math.floor(hh / 10); document.getElementById("2").innerText = hh % 10; document.getElementById("4").innerText = Math.floor(mm / 10); document.getElementById("5").innerText = mm % 10; document.getElementById("7").innerText = Math.floor(ss / 10); document.getElementById("8").innerText = ss % 10; } setInterval(myTime, 1000);实现思路拆分@import url("http://fonts.googleapis.com/css?family=Kanit");这段代码使用了Google字体库中的Kanit字体，用于时钟数字的显示。* { margin: 0; padding: 0; }这段代码设置了所有元素的外边距和内边距为0，这是为了避免不同浏览器之间的默认样式差异。body { height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #eacccc; user-select: none; }这段代码设置了body元素的高度为100vh，使其占据整个视口的高度。同时，使用flex布局使其水平和垂直居中。背景颜色为淡粉色。使用user-select属性禁止用户选择文本。.clock { display: flex; }这段代码设置了时钟的样式，使用flex布局，使其水平和垂直居中。.clock p { width: 95px; font-size: 150px; color: #fff; text-align: center; font-family: "Kanit"; font-weight: 900; text-shadow: 0 1px 0 #deafaf, 0 2px 0 #bda8a8, 0 3px 0 #d8a1a1, 0 4px 0 #d59999, 0 5px 0 #d29292, 0 6px 0 #cf8b8b, 0 7px 0 #cc8484, 0 8px 0 #c97d7d, 0 0 5px rgba(231, 156, 156, 0.05), 0 -1px 3px rgba(231, 156, 156, 0.2), 0 9px 9px rgba(231, 156, 156, 0.3), 0 12px 12px rgba(231, 156, 156, 0.3), 0 15px 15px rgba(231, 156, 156, 0.3); }这段代码设置了时钟数字的样式，使其宽度为95px，字体大小为150px，颜色为白色，居中对齐，使用了Google字体库中的Kanit字体，字体加粗。同时，使用了多个不同颜色和大小的阴影，使其看起来更加立体和有层次感。
-
有趣的css - 圆形金属质感按钮 🔑思路： 创建一个圆形，利用渐变函数模拟金属质感，再通过选择器根据多选框是否被选中，点亮圆点标记。可以扩展多个按钮，配上文字说明，来模拟机器上的各种按钮，例如启动或者停止按钮等。html 页面<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title>圆形金属质感按钮</title> </head> <body> <div class="app"> <label class="btn76"> <input type="checkbox" class="inp76" /> </label> </div> </body> </html>css 样式.app{ width: 100%; height: 100vh; background-color: #ffffff; position: relative; display: flex; justify-content: center; align-items: center; } .btn76{ width: 64px; height: 64px; background: conic-gradient(from 180deg at 50% 50%, rgba(0, 0, 0, 0.4) 0deg, #FFFFFF 90deg, rgba(0, 0, 0, 0.4) 181deg, #FFFFFF 270deg, rgba(0, 0, 0, 0.4) 360deg); border-radius: 50%; border: 1px solid rgba(0,0,0,0.2); box-shadow: 1px 1px 0 rgba(255,255,255,0.4) inset,-1px -1px 0 rgba(255,255,255,0.2) inset; outline: 1px dashed rgba(0,0,0,0.2); outline-offset: -6px; cursor: pointer; position: relative; box-sizing: border-box; } .inp76{ width: 6px; height: 6px; background-color: rgba(255, 255, 255, 0.6); border-radius: 50%; position: absolute; left: 24px; top: 5px; appearance: none; z-index: 10; } .btn76:active{ transform: scale(0.98); } .inp76:checked{ background: #0DFF00; box-shadow: 0px 0px 4px 2px rgba(78, 229, 70, 0.4); }代码思路1、定义 label 标签基本样式，利用 conic-gradient 圆锥渐变函数给按钮添加渐变背景，模拟出金属质感；添加 outline 属性，给圆形按钮添加轮廓边，通过 outline-offset 对轮廓边进行内偏移。2、定义多选框 input 标签样式，通过 appearance: none; 属性自定义多选框样式，将多选框样式定义为圆形标识，通过 position 定位属性，将标识定位到圆形按钮的上方区域。3、利用 :checked 选择器，多选框选中时，改变圆形标识样式，给圆形标识添加亮绿色背景，以及扩散阴影，模拟圆形标识发光效果；多选框未选中时，默认圆形标识样式。4、利用 :active 选择器，给圆形金属质感图标整体添加一个缩放效果，当圆形金属质感图标被按下时，会有一个缩小效果，来模拟按钮被按下的视觉效果。
-
HTML+CSS TAB导航栏 这段代码实现了一个名为"Tab导航栏"的效果，它是一个基于CSS的导航栏，包含五个选项卡，每个选项卡都有一个带有渐变背景色的滑块，当用户点击选项卡时，滑块会滑动到相应的位置。同时，选中的选项卡会变为白色，未选中的选项卡会变为灰色。Codehtml<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TAB导航栏</title> <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="./04-TAB导航栏.css"> </head> <body> <div class="wrapper"> <nav> <input type="radio" name="tab" id="home" checked> <input type="radio" name="tab" id="comment"> <input type="radio" name="tab" id="envelope"> <input type="radio" name="tab" id="heart"> <input type="radio" name="tab" id="user"> <label for="home" class="home" onclick="location.href='#';"> <a><i class="fa fa-home" aria-hidden="true"></i>Home</a> </label> <label for="comment" class="comment" onclick="location.href='#';"> <a><i class="fa fa-comment" aria-hidden="true"></i>Comment</a> </label> <label for="envelope" class="envelope" onclick="location.href='#';"> <a><i class="fa fa-envelope" aria-hidden="true"></i>Envelope</a> </label> <label for="heart" class="heart" onclick="location.href='#';"> <a><i class="fa fa-heart" aria-hidden="true"></i>Heart</a> </label> <label for="user" class="user" onclick="location.href='#';"> <a><i class="fa fa-user" aria-hidden="true"></i>User</a> </label> <div class="tab"></div> </nav> </div> </body> </html>css* { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; background: linear-gradient(200deg, #e8e8e8, #a8edea, #d1fffc, #e8e8e8); } .wrapper { width: 60vw; height: 60px; line-height: 60px; background-color: #fff; box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.25); border-radius: 50px; } .wrapper nav { display: flex; position: relative; } .wrapper nav label { flex: 1; width: 100%; position: relative; z-index: 1; cursor: pointer; } .wrapper nav label a { position: relative; z-index: -1; color: #333; font-size: 20px; font-weight: bold; text-decoration: none; } .wrapper nav label a i { font-size: 25px; margin: 0px 7px; } .wrapper nav input { display: none; } .wrapper nav .tab { position: absolute; height: 100%; width: 20%; left: 0px; bottom: 0px; background: linear-gradient(to right, #ff5858, #ff5858); border-radius: 50px; transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .wrapper nav #home:checked~label.home a, .wrapper nav #comment:checked~label.comment a, .wrapper nav #envelope:checked~label.envelope a, .wrapper nav #heart:checked~label.heart a, .wrapper nav #user:checked~label.user a { color: #fff; transition: 0.6s; } .wrapper nav #comment:checked~.tab { left: 20%; } .wrapper nav #envelope:checked~.tab { left: 40%; } .wrapper nav #heart:checked~.tab { left: 60%; } .wrapper nav #user:checked~.tab { left: 80%; }实现思路拆分* { margin: 0; padding: 0; box-sizing: border-box; }这段代码是设置所有元素的外边距和内边距为0，并且使用 border-box 盒模型。body { height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; background: linear-gradient(200deg, #e8e8e8, #a8edea, #d1fffc, #e8e8e8); }这段代码是设置body元素的高度为100vh，使其占据整个视口的高度。同时，使用 flex 布局使其子元素水平和垂直居中。最后，设置背景为一个线性渐变。.wrapper { width: 60vw; height: 60px; line-height: 60px; background-color: #fff; box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.25); border-radius: 50px; }这段代码是设置一个名为"wrapper"的元素的宽度、高度、行高、背景颜色、阴影和圆角。.wrapper nav { display: flex; position: relative; }这段代码是设置一个名为"nav"的元素的布局为flex，并且设置其相对定位。.wrapper nav label { flex: 1; width: 100%; position: relative; z-index: 1; cursor: pointer; }这段代码是设置一个名为 "label" 的元素的布局为flex，并且设置其相对定位和 z-index 属性。同时，设置光标为指针。.wrapper nav label a { position: relative; z-index: -1; color: #333; font-size: 20px; font-weight: bold; text-decoration: none; }这段代码是设置一个名为"a"的元素的相对定位和 z-index 属性。同时，设置字体颜色、字体大小、字体加粗和文本装饰为无。.wrapper nav label a i { font-size: 25px; margin: 0px 7px; }这段代码是设置一个名为"i"的元素的字体大小和外边距。.wrapper nav input { display: none; }这段代码是设置一个名为 "input" 的元素的显示属性为 none ，即隐藏该元素。.wrapper nav .tab { position: absolute; height: 100%; width: 20%; left: 0px; bottom: 0px; background: linear-gradient(to right, #ff5858, #ff5858); border-radius: 50px; transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); }这段代码是设置一个名为 "tab" 的元素的绝对定位、高度、宽度、左侧和底部位置、背景颜色和圆角。同时，设置过渡效果。.wrapper nav #home:checked~label.home a, .wrapper nav #comment:checked~label.comment a, .wrapper nav #envelope:checked~label.envelope a, .wrapper nav #heart:checked~label.heart a, .wrapper nav #user:checked~label.user a { color: #fff; transition: 0.6s; }这段代码是设置选中的选项卡的字体颜色为白色，并且设置过渡效果。.wrapper nav #comment:checked~.tab { left: 20%; } .wrapper nav #envelope:checked~.tab { left: 40%; } .wrapper nav #heart:checked~.tab { left: 60%; } .wrapper nav #user:checked~.tab { left: 80%; }这段代码是设置选中的选项卡的滑块的位置。当选中 "comment" 选项卡时，滑块会向右移动20%的距离，以此类推。
CC BY-NC-ND