找到
12
篇与
资源分享
相关的结果
- 第 2 页
-
Joe主题美化教程-实用教程 AI摘要：本文提供Joe主题美化教程，包括顶部视频、头像呼吸灯、自定义透明度、格子背景、文章列表渐变颜色、弹窗和彩色标签等美化方法。000031图片 站点首页顶部视频 效果图 000015图片 教程 代码 - 首先在主题根目录（usr/themes/joe）新建一个文件夹，什么名称都可以 然后在刚刚创建的文件夹里面创建几个其他的文件夹分为index,post,other,css,js这几个文件夹 当然你也可以不创建，我这样只是为了方便你们区分 文件夹创建完成之后，在index这个文件夹里面创建一个video.php的文件 然后把以下代码放进去保存 <div class="video-background"> <video poster="https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/a7e1480a41a61cfa23145ea8a30fd75dfba726c0e06fc59c22ef8ce03f0a21381c5026a125fa502a27f32b1792d9c838?pictype=scale&from=30111&version=3.3.3.3&fname=Screenshot_2024_1127_034242.png&size=1024" playsinline="" autoplay="" loop="" muted=""> <source src="https://alimov2.a.kwimgs.com/upic/2024/12/13/19/BMjAyNDEyMTMxOTE4MjZfMzAxNDE5NDQ2Nl8xNTEwNTk4MTI5OTRfMl8z_b_B3addd920d6174ebffd11478576239387.mp4?clientCacheKey=3xkity3uyjknhhu_b.mp4" type="video/mp4"> </video> <span class="title"><?php $this->options->title(); ?></span> <span class="description"><?php $this->options->description(); ?></span> </div>然后在css里面新建一个video.css填入以下代码保存 <style>/*首页视频css*/ .video-background { width: 100%; height: 100%; position: relative; display: block; margin-bottom: 20px; border-radius: 5px; overflow: hidden; background-image: url('https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/a7e1480a41a61cfa23145ea8a30fd75dfba726c0e06fc59c22ef8ce03f0a21381c5026a125fa502a27f32b1792d9c838?pictype=scale&from=30111&version=3.3.3.3&fname=Screenshot_2024_1127_034242.png&size=1024'); background-size: cover; background-position: center; } .video-background video { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; playsinline: "autoplay"; autoplay: "autoplay"; loop: "loop"; muted: "muted"; } .video-background .title { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 9vw; font-weight: bold; text-align: center; white-space: nowrap; } .video-background .description { position: absolute; top: 65%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 3vw; font-weight: bold; text-align: center; white-space: nowrap; } @media (min-width: 768px) { .video-background .title { font-size: 36px; } .video-background .description { font-size: 16px; } }</style>以上两个文件创建完成之后找到分别找到以下两个文件 /usr/themes/joe/module/head.php 在里面适合的位置增加以下代码 <?php $this->need('改为你主题根目录创建的文件夹名称/css/video.css'); ?>然后 /usr/themes/再续前缘主题目录/index.php里面 把第 43 行下面的（有的人的可能不在43行，那就自己找下） 000022图片 $this->need('module/index/carousel.php'); 改为 000023图片 $this->need('你那会创建的文件夹名称/index/video.php'); Joe主题的头像呼吸灯 效果图 000013图片 评论区的头像也会自动加上呼吸灯，点击头像或电脑端停留在头像上面还会旋转 头像呼吸灯 - <style> /*头像呼吸光环和鼠标悬停旋转放大*/ .avatar { border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s; } .avatar:hover { transform: scale(1.15) rotate(720deg); } @keyframes light { 0%{box-shadow: 0 0 4px #f00;} 25%{box-shadow: 0 0 16px #0f0;} 50%{box-shadow: 0 0 4px #00f;} 75%{box-shadow: 0 0 16px #0f0;} 100%{box-shadow: 0 0 4px #f00;} } </style>将上面的代码放到网站的 或里面保存即可查看效果了，建议放在里面 使用CSS代码自定义调整博客主题的透明度 我们的博客在使用背景图后，可能会被文字遮挡，影响背景图的效果，方法很简单，不需要任何插件 教程开始 自定义博客主题透明度 - 打开主题的设置页面，找到 自定义CSS ，复制粘贴下面的代码 body { --background: rgba(255,255,255,0.7) }其中（ ）里面的0.7表示透明度，可以自行更改达到自己想要的效果 eg：我想要实现半透明，就把0.7改为0.5，代码如下 body { --background: rgba(255,255,255,0.5) }同理如果想实现完全透明，那就将0.7改为0.0即可完全透明 CSS代码实现让博客网站使用格子背景 网站美化能让我们的网站变得更好看，比如美化字体、增加特效、添加背景图片等，但是过度美化无疑会增加服务器的压力，今天分享一个 格子背景 由 CSS代码 实现，又节省一个 http请求调整博客主题的透明度可以达到一个不错的效果 😁 代码 格子背景 - body::before { background-image: linear-gradient(90deg, rgba(60, 10, 30, .04) 10%, transparent 0), linear-gradient(1turn, rgba(60, 10, 30, .04) 3%, transparent 0); background-size: 20px 20px; background-position: 50%; background-repeat: repeat; } }将上面的代码放在 自定义CSS 里面即可，此CSS还解决了部分特定页面下，普通背景高度不够的问题 Joe文章列表添加渐变颜色效果 效果图 000016图片 教程 接下来需要编辑的文件以及相对Joe主题的文件路径： joe.index.js →→→ usr/themes/Joe/assets/js/joe.index.js joe.index.css→→→usr/themes/Joe/assets/css/joe.index.css joe.mode.css →→→ usr/themes/Joe/assets/css/joe.mode.css 渐变颜色 - 添加HTML代码 打开joe.index.js文件找到如图所示位置 000017图片 可以直接搜joe_list__item wow default定位到，其实一打开就是了。 在第一个a标签元素后面加入如下代码 <div class="article-banner-wrap"></div> <div class="article-banner"></div>000018图片 添加CSS代码 直接将下面的css代码复制粘贴到joe.index.css文件的最后面就行了 /*首页列表渐变*/ .article-banner-wrap { position: absolute; height: 100%; width: 50%; right: 0; top: 0; } .article-banner { visibility: hidden; opacity: .2; position: absolute; height: 100%; width: 50%; right: 0; top: 0; z-index: 0; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-position: center center; transition: opacity 0.2s; -webkit-mask-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); border-radius: 8px; background:linear-gradient(to left,#2BC0E4,#EAECC6); visibility: visible; animation: banner-show 1s; } .joe_list__item.default:hover .article-banner{opacity: 1;}其中的background可以改成图片地址，这样效果就是图片了，但图片会拖累网站加载速度，可自行决定是否要换成图片。 适配夜间模式 打开joe.mode.css文件，将以下CSS代码加入文件底部即可。 /*首页列表图片渐变夜间模式*/ html[data-night='night'] .article-banner{ background: linear-gradient(to left,#1F1C2C,#928DAB); opacity:0.1 }000019图片 为网站添加一个的弹窗 效果图 000020图片 教程 弹窗代码 - 将下面的代码放在 自定义HTML里面即可， style="color:blue">在填写代码之前先把需要的弹窗内容修改完善 <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> 彩色标签 效果图 000021图片 教程 将下面的代码放在 自定义CSS 里面即可 CSS代码 - .article-tags{margin-bottom: 10px}.article-tags a{padding: 4px 10px;background-color: #19B5FE;color: white;font-size: 12px;line-height: 16px;font-weight: 400;margin: 0 5px 5px 0;border-radius: 2px;display: inline-block}.article-tags a:nth-child(5n){background-color: #4A4A4A;color: #FFF}.article-tags a:nth-child(5n+1){background-color: #ff5e5c;color: #FFF}.article-tags a:nth-child(5n+2){background-color: #ffbb50;color: #FFF}.article-tags a:nth-child(5n+3){background-color: #1ac756;color: #FFF}.article-tags a:nth-child(5n+4){background-color: #19B5FE;color: #FFF}.article-tags a:hover{background-color: #1B1B1B;color: #FFF} .item-tags{margin-bottom: 10px}.item-tags a{padding: 4px 10px;background-color: #19B5FE;color: white;font-size: 12px;line-height: 16px;font-weight: 400;margin: 0 5px 5px 0;border-radius: 2px;display: inline-block}.item-tags a:nth-child(5n){background-color: #4A4A4A;color: #FFF}.item-tags a:nth-child(5n+1){background-color: #ff5e5c;color: #FFF}.item-tags a:nth-child(5n+2){background-color: #ffbb50;color: #FFF}.item-tags a:nth-child(5n+3){background-color: #1ac756;color: #FFF}.item-tags a:nth-child(5n+4){background-color: #19B5FE;color: #FFF}.item-tags a:hover{background-color: #1B1B1B;color: #FFF} ffffff ffffff 这篇文章📃转自下面的博主 星启寒博客 Demius`Blog 圆弧派博客
-
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; }
-
POETIZE个人博客系统源码|最美博客 AI摘要：POETIZE个人博客系统源码，作者遗作，基于SpringBoot+Vue2+Vue3，支持移动端，含博客、聊天室等功能。听说作者得了重病，好像这个作品就是他的最后一个 POETIZE个人博客系统源码|最美博客，这个作者年级轻轻就得了重病，最后一个作品给他宣传宣传 这是一个SprinqBoot+Vue2+Vue3的产物，支持移动端自适应，配有完备的前台和后台管理功能。 网站分两个模块： 博客系统：具有文章，表白墙，图片墙，收藏夹，乐曲，视频播放，留言，友链，时间线，后台管理等功能。 聊天室系统：具有朋友圈（时间线），好友，群等功能。 P1图片 P2图片 P3图片 P4图片 P5图片 P6图片 P7图片 P8图片 P9图片 P10图片 P11图片 P12图片 {cat_download name="POETIZE博客系统-源码下载" url="https://www.123684.com/s/YWw7Vv-aJ38" password=""}
