找到
13
篇与
HTML
相关的结果
- 第 2 页
-
聚光灯效果-HTML AI摘要：本文介绍了如何使用HTML和CSS实现聚光灯效果，通过设置背景渐变和裁剪路径，使文字产生动态的聚光灯效果。效果图 000032图片 代码 HTML+CSS - html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>HTML+CSS — 聚光灯</title> <link rel="stylesheet" href="index.css" /> </head> <body> <h1>Happy Birthday</h1> </body> </html> css * { padding: 0; margin: 0; } body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #000; } h1 { position: relative; /* 1rem=16px */ font-size: 8rem; color: #333; } h1:after { content: 'Happy Birthday'; position: absolute; top: 0; left: 0; /* 透明色 */ color: transparent; background-image: linear-gradient(to right, #c23616, #192a56, #00d2d3, yellow, #6d214f, #2e86de,#4cd137, #e84118); /* 背景绘制区域，值为text时，给文字设置镂空效果，前提必须是文字颜色为透明色 */ background-clip: text; /* 谷歌浏览器私有属性 */ -webkit-background-clip: text; /* 使用裁切方法创建元素的可显示区域 circle表示裁切一个圆形 100px表示圆的直径 0%和50%表示圆心位置 直径和圆心两组值中间用at隔开*/ clip-path: circle(100px at 0% 50%); -webkit-clip-path: circle(100px at 0% 50%); animation: move 5s infinite; } @keyframes move { 0% { clip-path: circle(100px at 0% 50%); -webkit-clip-path: circle(100px at 0% 50%); } 50% { clip-path: circle(100px at 100% 50%); -webkit-clip-path: circle(100px at 100% 50%); } 100% { clip-path: circle(100px at 0% 50%); -webkit-clip-path: circle(100px at 0% 50%); } }
-
动态404页面 AI摘要：创建了一个动态的404页面，包含两个山顶洞人形象，通过HTML和CSS实现，包含动画效果。效果图 000030图片 演示站点-404 代码 代码 - HTML <!DOCTYPE html> <html lang="cn" > <head> <meta charset="UTF-8"> <title>404 error</title> <link rel="stylesheet" href="1.css"> </head> <body> <div class="text"><p>404</p></div> <div class="container"> <div class="caveman"> <div class="leg"> <div class="foot"><div class="fingers"></div></div> </div> <div class="leg"> <div class="foot"><div class="fingers"></div></div> </div> <div class="shape"> <div class="circle"></div> <div class="circle"></div> </div> <div class="head"> <div class="eye"><div class="nose"></div></div> <div class="mouth"></div> </div> <div class="arm-right"><div class="club"></div></div> </div> <div class="caveman"> <div class="leg"> <div class="foot"><div class="fingers"></div></div> </div> <div class="leg"> <div class="foot"><div class="fingers"></div></div> </div> <div class="shape"> <div class="circle"></div> <div class="circle"></div> </div> <div class="head"> <div class="eye"><div class="nose"></div></div> <div class="mouth"></div> </div> <div class="arm-right"><div class="club"></div></div> </div> </div> </body> </html> CSS body { background-color: #FF7F2E; font-family: "Concert One", cursive; margin: 0; overflow: hidden; padding: 0; } /*/////////////////// 规则 */ /*/////////////////// 场景 */ .text { left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); color: rgba(19, 36, 44, 0.1); font-size: 30em; text-align: center; top: 40%; } .container { left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); height: 300px; width: 500px; } .container:after { position: absolute; content: ""; background-color: rgba(19, 36, 44, 0.1); border-radius: 12px; bottom: 40px; height: 12px; left: 80px; width: 350px; z-index: -1; } /*/////////////////// 山顶洞人 */ .caveman { height: 300px; position: absolute; width: 250px; } .caveman:nth-child(1) { right: 20px; } .caveman:nth-child(2) { left: 20px; transform: rotateY(180deg); } .head { position: absolute; background-color: #13242C; border-radius: 50px; height: 140px; left: 60px; top: 25px; width: 65px; } .head:after, .head:before { content: ""; position: absolute; background-color: #13242C; border-radius: 10px; height: 20px; width: 7px; } .head:after { left: 35px; top: -8px; transform: rotate(20deg); } .head:before { left: 30px; top: -8px; transform: rotate(-20deg); } .head .eye { left: 50%; position: absolute; transform: translateX(-50%); background-color: #EAB08C; border-radius: 50px; height: 16px; left: 45%; top: 40px; width: 48px; } .head .eye:after, .head .eye:before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); background-color: #13242C; border-radius: 50%; height: 5px; width: 5px; } .head .eye:after { left: 5px; } .head .eye:before { right: 9px; } .head .eye .nose { left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); background-color: #D9766C; border-left: 8px solid rgba(19, 36, 44, 0.1); border-radius: 10px; box-sizing: border-box; height: 35px; left: 45%; top: 12px; width: 15px; } .shape { left: 50%; position: absolute; transform: translateX(-50%); border-radius: 50%; height: 140px; overflow: hidden; top: 70px; width: 140px; } .shape .circle { position: absolute; border-radius: 50%; height: 60px; width: 60px; } .shape .circle:after, .shape .circle:before { content: ""; position: absolute; border-radius: 50%; height: 20px; width: 20px; } .shape .circle:after { left: 50px; top: 10px; } .shape .circle:before { left: 60px; top: 45px; } .shape .circle:nth-child(1) { left: -12px; top: 80px; } .shape .circle:nth-child(2) { right: 10px; top: 0px; transform: rotate(90deg); } .shape .circle:nth-child(2):after { left: 65px; top: 10px; } .shape .circle:nth-child(2):before { display: none; } .caveman:nth-child(1) .shape { background-color: #D13433; } .caveman:nth-child(1) .shape .circle { background-color: #932422; } .caveman:nth-child(1) .shape .circle:after, .caveman:nth-child(1) .shape .circle:before { background-color: #932422; } .caveman:nth-child(2) .shape { background-color: #932422; } .caveman:nth-child(2) .shape .circle { background-color: #D13433; } .caveman:nth-child(2) .shape .circle:after, .caveman:nth-child(2) .shape .circle:before { background-color: #D13433; } .arm-right { position: absolute; background-color: #EAB08C; border-left: 8px solid rgba(19, 36, 44, 0.1); border-radius: 50px; box-sizing: border-box; height: 180px; left: 135px; top: 80px; transform-origin: 30px 30px; width: 60px; z-index: 1; } .arm-right .club { position: absolute; border-bottom: 110px solid #601513; border-left: 10px solid transparent; border-right: 10px solid transparent; height: 0; left: -60px; top: 120px; transform: rotate(70deg); width: 20px; } .arm-right .club:after, .arm-right .club:before { position: absolute; content: ""; background-color: #601513; border-radius: 50%; left: 0; } .arm-right .club:after { height: 20px; width: 20px; top: -10px; } .arm-right .club:before { height: 40px; width: 40px; left: -10px; top: 90px; } .leg { position: absolute; border-radius: 10px; height: 55px; top: 200px; width: 10px; } .leg:after { position: absolute; content: ""; border-radius: 50%; height: 10px; left: -5px; top: 15px; width: 10px; } .leg .foot { position: absolute; border-radius: 25px 25px 0 0; height: 25px; left: -38px; top: 30px; width: 50px; } .leg .foot:after, .leg .foot:before, .leg .foot .fingers, .leg .foot .fingers:after { position: absolute; background-color: #EAB08C; border-radius: 50%; bottom: 0px; height: 15px; transform-origin: bottom; width: 15px; } .leg .foot:after { left: -6px; content: ""; } .leg .foot:before { left: 8px; transform: scale(0.6); content: ""; } .leg .foot .fingers { left: 15px; transform: scale(0.6); } .leg .foot .fingers:after { left: 11px; content: ""; } .leg:nth-child(1) { background-color: #B2524D; left: 95px; } .leg:nth-child(1):after { background-color: #B2524D; } .leg:nth-child(1) .foot { background-color: #B2524D; } .leg:nth-child(1) .foot:after { background-color: #B2524D; } .leg:nth-child(1) .foot:before { display: none; } .leg:nth-child(2) { background-color: #D9766C; left: 115px; } .leg:nth-child(2):after { background-color: #D9766C; } .leg:nth-child(2) .foot { background-color: #D9766C; } /*/////////////////// 动画 */ .caveman:nth-child(1) .arm-right { animation: arm-anima 1.2s infinite cubic-bezier(0.55, 0.01, 0.16, 1.34); } .caveman:nth-child(2) .arm-right { animation: arm-anima 1.2s infinite cubic-bezier(0.55, 0.01, 0.16, 1.34); animation-delay: 0.6s; } @keyframes arm-anima { 0% { transform: rotate(0); } 100% { transform: rotate(-360deg); } } .caveman:nth-child(2) .head { animation: head-anima 1.2s infinite cubic-bezier(0.55, 0.01, 0.16, 1.34); } .caveman:nth-child(1) .head { animation: head-anima 1.2s infinite cubic-bezier(0.55, 0.01, 0.16, 1.34); animation-delay: 0.6s; } @keyframes head-anima { 0% { top: 25px; } 42% { top: 25px; } 45% { top: 50px; } 100% { top: 25px; } } .caveman:nth-child(2) .eye:after, .caveman:nth-child(2) .eye:before { animation: eye-anima 1.2s infinite cubic-bezier(0.55, 0.01, 0.16, 1.34); } .caveman:nth-child(1) .eye:after, .caveman:nth-child(1) .eye:before { animation: eye-anima 1.2s infinite cubic-bezier(0.55, 0.01, 0.16, 1.34); animation-delay: 0.6s; } @keyframes eye-anima { 0% { height: 5px; } 42% { height: 5px; } 45% { height: 1px; } 100% { height: 5px; } } .container:after { animation: shadow-anima 1.2s infinite cubic-bezier(0.55, 0.01, 0.16, 1.34); animation-delay: 0.1s; } @keyframes shadow-anima { 0% { width: 350px; left: 80px; } 25% { width: 450px; left: 80px; } 50% { width: 350px; left: 80px; } 75% { width: 450px; left: 0px; } 100% { width: 350px; left: 80px; } } #link { bottom: 20px; color: #000; opacity: 0.2; display: flex; align-items: center; position: absolute; left: 50%; transform: translateX(-50%); } #link p { margin: 0; margin-left: 5px; } #link:hover { opacity: 1; }
-
给网页添加一个弹窗--HTML AI摘要：本文介绍了如何使用HTML和CSS创建一个弹窗效果，包括样式设置和JavaScript控制显示与隐藏。通过将提供的代码片段添加到网页的head标签下方，即可实现弹窗功能。效果展示 你进入这篇文章的时候就已经看到了 000026图片 .popup-container { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 9999; justify-content: center; align-items: center; } .popup { animation: popOut .4s ease-in-out forwards; transform-origin: center center; transform: scale(0); } @keyframes popOut { to { transform: scale(1); } } .popup-content { background-color: #fff; padding: 30px; max-width: 400px; text-align: center; border-radius: 6px; /* 添加弹窗的圆角边框 */ } .popup-title { font-size: 21px; font-weight: bold; margin-bottom: 10px; color: #000000 } .popup-text { text-align: left; font-size: 14px; margin-bottom: 20px; color: #808080 } .popup-button { background-color: #007bff; color: #fff; border: none; padding: 6px 20px; font-size: 13px; cursor: pointer; body border-radius: 4px; /* 添加圆角 */ background-color: #B0C4DE; } .slide-container { width: 100%; height: 200px; overflow: hidden; /* 隐藏超出部分 */ } .slide-content { width: 100%; /* 比容器宽度多一定值，保证有滚动条 */ height: 100%; padding: 5px; /* 内容区域留白 */ overflow-y: scroll; /* y方向滚动 */ } } 公告 您好，仔细欢迎访问的我个人Blog 这里将会记录我的一些生活内容...... 此处省略一万字😂 我已知晓 var popupContainer = document.querySelector('.popup-container'); var popupButton = document.getElementById('popup-button'); // 显示弹窗 function showPopup() { popupContainer.style.display = 'flex'; } // 隐藏弹窗 function hidePopup() { popupContainer.style.display = 'none'; } // 显示初始弹窗 showPopup(); // 处理关闭按钮点击事件 popupButton.addEventListener('click', hidePopup); 教程 把下面的代码加入在您的网页的head标签的下方即可 然后把自己想要弹出⏏️的内容编辑好 弹窗代码 - <style> .popup-container { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 9999; justify-content: center; align-items: center; } .popup { animation: popOut .4s ease-in-out forwards; transform-origin: center center; transform: scale(0); } @keyframes popOut { to { transform: scale(1); } } .popup-content { background-color: #fff; padding: 30px; max-width: 400px; text-align: center; border-radius: 6px; /* 添加弹窗的圆角边框 */ } .popup-title { font-size: 21px; font-weight: bold; margin-bottom: 10px; color: #000000 } .popup-text { text-align: left; font-size: 14px; margin-bottom: 20px; color: #808080 } .popup-button { background-color: #007bff; color: #fff; border: none; padding: 6px 20px; font-size: 13px; cursor: pointer; border-radius: 4px; /* 添加圆角 */ background-color: #B0C4DE; } .slide-container { width: 100%; height: 200px; overflow: hidden; /* 隐藏超出部分 */ } .slide-content { width: 100%; /* 比容器宽度多一定值，保证有滚动条 */ height: 100%; padding: 5px; /* 内容区域留白 */ overflow-y: scroll; /* y方向滚动 */ } } </style> <div class="popup-container"> <div class="popup-content"> <h2 class="popup-title">公告</h2> <div class="popup"><div class="slide-container"><div class="slide-content"><p class="popup-text"> 您好，仔细欢迎访问的我个人Blog 这里将会记录我的一些生活内容...... 此处省略一万字😂 </font></i></div> </div></div> </p> <button class="popup-button" id="popup-button">我已知晓 </div> </div> <script> var popupContainer = document.querySelector('.popup-container'); var popupButton = document.getElementById('popup-button'); // 显示弹窗 function showPopup() { popupContainer.style.display = 'flex'; } // 隐藏弹窗 function hidePopup() { popupContainer.style.display = 'none'; } // 显示初始弹窗 showPopup(); // 处理关闭按钮点击事件 popupButton.addEventListener('click', hidePopup); </script> </body>
-
2025新年倒计时 AI摘要：2025年新年倒计时，距2025年1月29日还有58天21时4分30秒。 2 0 2 5年-新年倒计时 58天 21时 4分 30秒 function getRTime() { var EndTime = new Date('2025/01/29 00:00:00'); var NowTime = new Date(); var t = EndTime.getTime() - NowTime.getTime(); var d = Math.floor(t / 1000 / 60 / 60 / 24); var h = Math.floor(t / 1000 / 60 / 60 % 24); var m = Math.floor(t / 1000 / 60 % 60); var s = Math.floor(t / 1000 % 60); document.getElementById("t_d").innerHTML = d + " 天"; document.getElementById("t_h").innerHTML = h + " 时"; document.getElementById("t_m").innerHTML = m + " 分"; document.getElementById("t_s").innerHTML = s + " 秒"; } setInterval(getRTime, 1000);
-
html+css实现漂亮透明的登录页面，HTML实现炫酷登录页面 AI摘要：使用HTML和CSS创建了一个炫酷透明的登录页面，包含背景颜色、模糊效果和动画元素，实现了一个美观且动态的登录界面。废话不多少，先给大家放图例😁 图例 00005图片 接下来就是代码内容😎 ⌨️ 演示站点 漂亮登录页-演示 HTML部分 请把HTML代码中css引用的css名称改为您自己命名的css文件名称 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="1.css"> <title>登录</title> </head> <body> <section> <!-- 背景颜色 --> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="box"> <!-- 背景圆 --> <div class="circle" style="--x:0"></div> <div class="circle" style="--x:1"></div> <div class="circle" style="--x:2"></div> <div class="circle" style="--x:3"></div> <div class="circle" style="--x:4"></div> <!-- 登录框 --> <div class="container"> <div class="form"> <h2>登录</h2> <form> <div class="inputBox"> <input type="text" placeholder="用户名"> </div> <div class="inputBox"> <input type="password" placeholder="密码"> </div> <div class="inputBox"> <input type="submit" value="登录"> </div> <p class="forget">忘记密码?<a href="#"> 点击这里 </a></p> <p class="forget">没有账户?<a href="#"> 注册 </a></p> </form> </div> </div> </div> </section> </body> </html>CSS部分 /* 清除浏览器默认边距， 使边框和内边距的值包含在元素的width和height内 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 使用flex布局，让内容垂直和水平居中 */ section { /* 相对定位 */ position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; min-height: 100vh; /* linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片 */ background: linear-gradient(to bottom, #f1f4f9, #dff1ff); } /* 背景颜色 */ section .color { /* 绝对定位 */ position: absolute; /* 使用filter(滤镜) 属性，给图像设置高斯模糊*/ filter: blur(200px); } /* :nth-child(n) 选择器匹配父元素中的第 n 个子元素 */ section .color:nth-child(1) { top: -350px; width: 600px; height: 600px; background: #ff359b; } section .color:nth-child(2) { bottom: -150px; left: 100px; width: 500px; height: 500px; background: #fffd87; } section .color:nth-child(3) { bottom: 50px; right: 100px; width: 500px; height: 500px; background: #00d2ff; } .box { position: relative; } /* 背景圆样式 */ .box .circle { position: absolute; background: rgba(255, 255, 255, 0.1); /* backdrop-filter属性为一个元素后面区域添加模糊效果 */ backdrop-filter: blur(5px); box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.5); border-right: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; /* 使用filter(滤镜) 属性，改变颜色。 hue-rotate(deg) 给图像应用色相旋转 calc() 函数用于动态计算长度值 var() 函数调用自定义的CSS属性值x*/ filter: hue-rotate(calc(var(--x) * 70deg)); /* 调用动画animate，需要10s完成动画， linear表示动画从头到尾的速度是相同的， infinite指定动画应该循环播放无限次*/ animation: animate 10s linear infinite; /* 动态计算动画延迟几秒播放 */ animation-delay: calc(var(--x) * -1s); } /* 背景圆动画 */ @keyframes animate { 0%, 100%, { transform: translateY(-50px); } 50% { transform: translateY(50px); } } .box .circle:nth-child(1) { top: -50px; right: -60px; width: 100px; height: 100px; } .box .circle:nth-child(2) { top: 150px; left: -100px; width: 120px; height: 120px; z-index: 2; } .box .circle:nth-child(3) { bottom: 50px; right: -60px; width: 80px; height: 80px; z-index: 2; } .box .circle:nth-child(4) { bottom: -80px; left: 100px; width: 60px; height: 60px; } .box .circle:nth-child(5) { top: -80px; left: 140px; width: 60px; height: 60px; } /* 登录框样式 */ .container { position: relative; width: 400px; min-height: 400px; background: rgba(255, 255, 255, 0.1); display: flex; justify-content: center; align-items: center; backdrop-filter: blur(5px); box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.5); border-right: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .form { position: relative; width: 100%; height: 100%; padding: 50px; } /* 登录标题样式 */ .form h2 { position: relative; color: #fff; font-size: 24px; font-weight: 600; letter-spacing: 5px; margin-bottom: 30px; cursor: pointer; } /* 登录标题的下划线样式 */ .form h2::before { content: ""; position: absolute; left: 0; bottom: -10px; width: 0px; height: 3px; background: #fff; transition: 0.5s; } .form h2:hover:before { width: 53px; } .form .inputBox { width: 100%; margin-top: 20px; } /* 输入框样式 */ .form .inputBox input { width: 100%; padding: 10px 20px; background: rgba(255, 255, 255, 0.2); outline: none; border: none; border-radius: 30px; border: 1px solid rgba(255, 255, 255, 0.5); border-right: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); font-size: 16px; letter-spacing: 1px; color: #fff; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); } .form .inputBox input::placeholder { color: #fff; } /* 登录按钮样式 */ .form .inputBox input[type="submit"] { background: #fff; color: #666; max-width: 100px; margin-bottom: 20px; font-weight: 600; cursor: pointer; } .forget { margin-top: 6px; color: #fff; letter-spacing: 1px; } .forget a { color: #fff; font-weight: 600; text-decoration: none; }
