首页
友链
壁纸
留言
今日热榜
更多
关于
时光
推荐
精品流量卡
Search
1
都二十多年了,你的梦为什么还没碎!
57,051 阅读
2
2022年5个好用的 BT/ 磁力链接下载工具推荐 |Windows 、安卓系统
37,156 阅读
3
nps内网穿透实现外网访问树莓派
32,369 阅读
4
实践利用宝塔建emlog个人博客-超详细【原创】
26,116 阅读
5
Typecho-Joe-Theme主题帮助文档
24,518 阅读
闲杂乱码
Python
网站源码
微信小程序
娱乐分享
Is相册
软件工具
登录
Search
标签搜索
PHP
HTML
API
Javascript
源码
JS
Vue
Github
CloudFlare
接口
函数
SQL
ASP.NET
MVC
EF
T4模板
后台管理
CDN
微信小程序
MAC
韩小韩
累计撰写
261
篇文章
累计收到
1,295
条评论
首页
栏目
闲杂乱码
Python
网站源码
微信小程序
娱乐分享
Is相册
软件工具
页面
友链
壁纸
留言
今日热榜
关于
时光
推荐
精品流量卡
搜索到
12
篇与
HTML
的结果
2021-07-31
HTML粘性滑块导航页面Demo - 可自由填充内容
HTML粘性滑块导航页面Demo{anote icon="fa-link" href="https://www.vvhan.com/other/demo/navslider/" type="secondary" content="点击查看效果"/}HTML 代码<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>jQuery粘性滑块导航(响应式)</title> <link rel="stylesheet" href="./style.css"> </head> <body> <section class="et-hero-tabs"> <h1>粘性滑块导航</h1> <h3>滑动内容与粘性选项卡导航</h3> <div class="et-hero-tabs-container"> <a class="et-hero-tab" href="#tab-es6">ES6</a> <a class="et-hero-tab" href="#tab-flexbox">Flexbox</a> <a class="et-hero-tab" href="#tab-react">React</a> <a class="et-hero-tab" href="#tab-angular">Angular</a> <a class="et-hero-tab" href="#tab-other">Other</a> <span class="et-hero-tab-slider"></span> </div> </section> <!-- Main --> <main class="et-main"> <section class="et-slide" id="tab-es6"> <h1>ES6</h1> <h3>something about es6</h3> </section> <section class="et-slide" id="tab-flexbox"> <h1>Flexbox</h1> <h3>something about flexbox</h3> </section> <section class="et-slide" id="tab-react"> <h1>React</h1> <h3>something about react</h3> </section> <section class="et-slide" id="tab-angular"> <h1>Angular</h1> <h3>something about angular</h3> </section> <section class="et-slide" id="tab-other"> <h1>Other</h1> <h3>something about other</h3> </section> </main> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script src="./script.js"></script> </body> </html>CSS 代码a { text-decoration: none; } .et-hero-tabs, .et-slide { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; position: relative; background: #eee; text-align: center; padding: 0 2em; } .et-hero-tabs h1, .et-slide h1 { font-size: 2rem; margin: 0; letter-spacing: 1rem; } .et-hero-tabs h3, .et-slide h3 { font-size: 1rem; letter-spacing: 0.3rem; opacity: 0.6; } .et-hero-tabs-container { display: flex; flex-direction: row; position: absolute; bottom: 0; width: 100%; height: 70px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); background: #fff; z-index: 10; } .et-hero-tabs-container--top { position: fixed; top: 0; } .et-hero-tab { display: flex; justify-content: center; align-items: center; flex: 1; color: #000; letter-spacing: 0.1rem; transition: all 0.5s ease; font-size: 0.8rem; } .et-hero-tab:hover { color: white; background: rgba(102, 177, 241, 0.8); transition: all 0.5s ease; } .et-hero-tab-slider { position: absolute; bottom: 0; width: 0; height: 6px; background: #66B1F1; transition: left 0.3s ease; } @media (min-width: 800px) { .et-hero-tabs h1, .et-slide h1 { font-size: 3rem; } .et-hero-tabs h3, .et-slide h3 { font-size: 1rem; } .et-hero-tab { font-size: 1rem; } }JS 代码class StickyNavigation { constructor() { this.currentId = null; this.currentTab = null; this.tabContainerHeight = 70; let self = this; $('.et-hero-tab').click(function() { self.onTabClick(event, $(this)); }); $(window).scroll(() => { this.onScroll(); }); $(window).resize(() => { this.onResize(); }); } onTabClick(event, element) { event.preventDefault(); let scrollTop = $(element.attr('href')).offset().top - this.tabContainerHeight + 1; $('html, body').animate({ scrollTop: scrollTop }, 600); } onScroll() { this.checkTabContainerPosition(); this.findCurrentTabSelector(); } onResize() { if(this.currentId) { this.setSliderCss(); } } checkTabContainerPosition() { let offset = $('.et-hero-tabs').offset().top + $('.et-hero-tabs').height() - this.tabContainerHeight; if($(window).scrollTop() > offset) { $('.et-hero-tabs-container').addClass('et-hero-tabs-container--top'); } else { $('.et-hero-tabs-container').removeClass('et-hero-tabs-container--top'); } } findCurrentTabSelector(element) { let newCurrentId; let newCurrentTab; let self = this; $('.et-hero-tab').each(function() { let id = $(this).attr('href'); let offsetTop = $(id).offset().top - self.tabContainerHeight; let offsetBottom = $(id).offset().top + $(id).height() - self.tabContainerHeight; if($(window).scrollTop() > offsetTop && $(window).scrollTop() < offsetBottom) { newCurrentId = id; newCurrentTab = $(this); } }); if(this.currentId != newCurrentId || this.currentId === null) { this.currentId = newCurrentId; this.currentTab = newCurrentTab; this.setSliderCss(); } } setSliderCss() { let width = 0; let left = 0; if(this.currentTab) { width = this.currentTab.css('width'); left = this.currentTab.offset().left; } $('.et-hero-tab-slider').css('width', width); $('.et-hero-tab-slider').css('left', left); } } new StickyNavigation();
2021年07月31日
1,095 阅读
2 评论
4 点赞
2021-05-27
鼠标点击波纹特效 html+css+js
定义标签 <div class="card"> <img src="3.3.png" alt="x" width="100%"> <h3>北极光之夜</h3> <p > 生活下去,错误下去,堕落下去,为胜利而欢呼,从生命中重新创造生命! </p> </div>卡片和文字的基本样式 .card{ width: 200px; height: 300px; box-shadow: 1px 1px 5px #555; cursor: pointer; background-color: rgb(243, 243, 243); position: relative; overflow: hidden; } .card h3,.card p{ padding: 5px; text-align: center; font-family: 'fangsong'; font-weight: bold; user-select: none; }{callout color="#f0ad4e"}cursor: pointer; 鼠标样式为小手。overflow: hidden; 子元素大小超出卡片区域的被隐藏。user-select: none; 文本不可选中。{/callout}js部分,见注释 <script> /* 获取元素 */ var card = document.querySelector('.card'); /* 绑定点击事件 */ card.addEventListener('click',function(e){ /* 获取鼠标点击的水平位置 */ let x = e.clientX - this.offsetLeft; /* 获取鼠标点击的垂直位置 */ let y = e.clientY - this.offsetTop; /* 创建一个span元素 */ let circle = document.createElement('span'); /* 为span元素添加定位的 left 属性 */ circle.style.left = x + 'px'; /* 为span元素添加定位的 top 属性 */ circle.style.top = y + 'px'; /* 卡片添加创建好的span元素 */ card.appendChild(circle); /* 1s后移除span元素 */ setInterval(function(){ circle.remove(); },1000) }) </script>添加上一步创建的 span 元素的css样式 .card span{ position: absolute; transform: translate(-50%,-50%); background-color: rgb(255, 254, 254); border-radius: 50%; animation: big 1s ; } @keyframes big{ 0%{ width: 0px; height: 0px; opacity: 1; } 100%{ width: 400px; height: 400px; opacity: 0; } }{callout color="#f0ad4e"}position: absolute; 绝对定位。transform: translate(-50%,-50%); 向左和上移动自身宽度和高度的一半。animation: big 1s; 定义动画,刚好1s完成动画 。opacity: 1; 不透明。opacity: 0; 透明。{/callout}完整源码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ height: 100vh; display: flex; justify-content: center; align-items: center; background-image: radial-gradient(white,black); } .card{ width: 200px; height: 300px; box-shadow: 1px 1px 5px #555; cursor: pointer; background-color: rgb(243, 243, 243); position: relative; overflow: hidden; } .card h3,.card p{ padding: 5px; text-align: center; font-family: 'fangsong'; font-weight: bold; user-select: none; } .card span{ position: absolute; transform: translate(-50%,-50%); background-color: rgb(255, 254, 254); border-radius: 50%; animation: big 1s ; } @keyframes big{ 0%{ width: 0px; height: 0px; opacity: 1; } 100%{ width: 400px; height: 400px; opacity: 0; } } </style> </head> <body> <div class="card"> <img src="3.3.png" alt="x" width="100%"> <h3>北极光之夜</h3> <p > 生活下去,错误下去,堕落下去,为胜利而欢呼,从生命中重新创造生命! </p> </div> <script> var card = document.querySelector('.card'); card.addEventListener('click',function(e){ let x = e.clientX - this.offsetLeft; let y = e.clientY - this.offsetTop; let circle = document.createElement('span'); circle.style.left = x + 'px'; circle.style.top = y + 'px'; card.appendChild(circle); setInterval(function(){ circle.remove(); },1000) }) </script> </body> </html>{callout color="#f0ad4e"}转自ㅤㅤㅤ超简单的鼠标点击波纹特效 html+css+js - 掘金ㅤㅤㅤ作者:北极光之夜ㅤㅤㅤ地址:https://juejin.cn/post/6966634855656325156{/callout}
2021年05月27日
1,683 阅读
0 评论
2 点赞
2021-05-27
6分钟实现CSS炫光倒影按钮
{message type="info" content="分享简单有趣的CSS创意特效,放松放松心情~"/}定义基本样式 *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'fangsong'; } body{ height: 100vh; display: flex; align-items: center; justify-content: center; background-color: rgb(0, 0, 0); }{callout color="#f0ad4e"}font-family: 'fangsong'; 仿宋字体。 display: flex; align-items: center; justify-content: center; flex布局,让按钮在屏幕居中。{/callout}定义基本标签 <a href="#" class="item item1"> aurora <span></span> <span></span> <span></span> <span></span> </a> <a href="#" class="item item2"> aurora <span></span> <span></span> <span></span> <span></span> </a> <a href="#" class="item item3"> aurora <span></span> <span></span> <span></span> <span></span> </a>{callout color="#f0ad4e"}3个a标签就对应3个按钮,每个按钮里4个span就是环绕按钮的4条边。 且都有个公共的选择器 .item 和 只属于自己的选择器。{/callout}定义每个按钮的基本样式 .item{ position: relative; margin: 50px; width: 300px; height: 80px; text-align: center; line-height: 80px; text-transform: uppercase; text-decoration: none; font-size: 35px; letter-spacing: 5px; color: aqua; overflow: hidden; -webkit-box-reflect: below 1px linear-gradient( transparent,rgba(6, 133, 133,0.3)); }{callout color="#f0ad4e"}text-align: center;文字对齐方式。line-height: 80px; 字行高。text-transform: uppercase; 字母为大写。text-decoration: none; 去掉a标签默认下划线。letter-spacing: 5px; 每个字符间的距离。overflow: hidden;溢出隐藏。-webkit-box-reflect: below 1px linear-gradient( transparent,rgba(6, 133, 133,0.3)); 这个属性能实现倒影效果。{/callout}鼠标经过按钮样式改变 .item:hover{ background-color: aqua; box-shadow:0 0 5px aqua, 0 0 75px aqua, 0 0 155px aqua; color: black; }{callout color="#f0ad4e"}box-shadow:0 0 5px aqua, 0 0 75px aqua, 0 0 155px aqua; 阴影,写多行可以叠加更亮。{/callout}设置环绕按钮的4根线上面那条的样式.item span:nth-of-type(1){ position: absolute; left: -100%; width: 100%; height: 3px; background-image: linear-gradient(to left,aqua ,transparent); animation: shang 1s linear infinite; } @keyframes shang{ 0%{ left:-100%; } 50%,100%{ left:100%; } }{callout color="#f0ad4e"}position: absolute;left: -100%; 定位在对应位置。background-image: linear-gradient(to left,aqua ,transparent); 线性渐变颜色。animation: shang 1s linear infinite; 动画属性,让它动起来。{/callout}以此类推,设置环绕按钮的其它3根样式 .item span:nth-of-type(2){ position: absolute; top: -100%; right: 0; width: 3px; height: 100%; background-image: linear-gradient(to top,aqua ,transparent); animation: you 1s linear infinite; animation-delay: 0.25s; } @keyframes you{ 0%{ top:-100%; } 50%,100%{ top:100%; } } .item span:nth-of-type(3){ position: absolute; right: -100%; bottom: 0; width: 100%; height: 3px; background-image: linear-gradient(to right,aqua ,transparent); animation: xia 1s linear infinite; animation-delay: 0.5s; } @keyframes xia{ 0%{ right:-100%; } 50%,100%{ right:100%; } } .item span:nth-of-type(4){ position: absolute; bottom: -100%; left: 0; width: 3px; height: 100%; background-image: linear-gradient(to bottom,aqua ,transparent); animation: zuo 1s linear infinite; animation-delay: 0.75s; } @keyframes zuo{ 0%{ bottom:-100%; } 50%,100%{ bottom:100%; } }{callout color="#f0ad4e"}animation-delay: 0.75s; 动画延迟执行。每条线对应延迟一段时间,形成时间差,形成环绕效果。{/callout}完整代码<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'fangsong'; } body{ height: 100vh; display: flex; align-items: center; justify-content: center; background-color: rgb(0, 0, 0); } .item{ position: relative; margin: 50px; width: 300px; height: 80px; text-align: center; line-height: 80px; text-transform: uppercase; text-decoration: none; font-size: 35px; letter-spacing: 5px; color: aqua; overflow: hidden; -webkit-box-reflect: below 1px linear-gradient( transparent,rgba(6, 133, 133,0.3)); } .item:hover{ background-color: aqua; box-shadow:0 0 5px aqua, 0 0 75px aqua, 0 0 155px aqua; color: black; } .item span:nth-of-type(1){ position: absolute; left: -100%; width: 100%; height: 3px; background-image: linear-gradient(to left,aqua ,transparent); animation: shang 1s linear infinite; } @keyframes shang{ 0%{ left:-100%; } 50%,100%{ left:100%; } } .item span:nth-of-type(2){ position: absolute; top: -100%; right: 0; width: 3px; height: 100%; background-image: linear-gradient(to top,aqua ,transparent); animation: you 1s linear infinite; animation-delay: 0.25s; } @keyframes you{ 0%{ top:-100%; } 50%,100%{ top:100%; } } .item span:nth-of-type(3){ position: absolute; right: -100%; bottom: 0; width: 100%; height: 3px; background-image: linear-gradient(to right,aqua ,transparent); animation: xia 1s linear infinite; animation-delay: 0.5s; } @keyframes xia{ 0%{ right:-100%; } 50%,100%{ right:100%; } } .item span:nth-of-type(4){ position: absolute; bottom: -100%; left: 0; width: 3px; height: 100%; background-image: linear-gradient(to bottom,aqua ,transparent); animation: zuo 1s linear infinite; animation-delay: 0.75s; } @keyframes zuo{ 0%{ bottom:-100%; } 50%,100%{ bottom:100%; } } .item1{ filter: hue-rotate(100deg); } .item3{ filter: hue-rotate(250deg); } </style> </head> <body> <a href="#" class="item item1"> aurora <span></span> <span></span> <span></span> <span></span> </a> <a href="#" class="item item2"> aurora <span></span> <span></span> <span></span> <span></span> </a> <a href="#" class="item item3"> aurora <span></span> <span></span> <span></span> <span></span> </a> </body> </html>{callout color="#604def"}转自 ㅤㅤㅤ6分钟实现CSS炫光倒影按钮 - 掘金ㅤㅤㅤ作者:北极光之夜ㅤㅤㅤ地址:https://juejin.cn/post/6966482130020859912{/callout}
2021年05月27日
973 阅读
0 评论
0 点赞
2021-05-20
HTML清除浮动的几种方法
父元素浮动给父元素设置浮动后,子元素的浮动会归位,不过如果还有父元素,还需要设置。不推荐使用。空标签设置在元素末尾插入一个无意义标签,并且设置css为clear:both;<div style="background: #000;"> <p style="float: left;color:#fff"> 我是浮动内容 </p> <div style="clear: both;"></div> </div>设置伪类方式使用伪类的:after方式,给清除浮动,比较流行使用这个。<style type="text/css"> .clearfix:after{ content: '.'; display: block; height: 0; clear: both; visibility: hidden; } </style> <div style="background: #000;" class="clearfix"> <p style="float: left;color:#fff"> 我是浮动内容 </p> </div>上面的css可以进一步优化.clearfix:after{ content: ''; display: table; clear: both; }显示方式属性给父元素设置overflow,即可清除里面的浮动<div style="background: #000;overflow: auto;"> <p style="float: left;color:#fff"> 我是浮动内容 </p> </div>BFC属性只要触发了bfc,就会清除浮动相关触发:overflow: auto; overflow: hidden; display: inline-block; display: table-cell; display: table-caption; position: absolute; position: fixed; float: left; float: right;
2021年05月20日
821 阅读
0 评论
0 点赞
2020-01-24
为网站添加满屏雪花下雪特效(接口版)
为网站添加满屏雪花下雪特效演示图直接上代码<script src='https://api.vvhan.com/api/snow'></script> 添加到你网站的body标签内即可
2020年01月24日
2,144 阅读
0 评论
2 点赞
2020-01-22
为你的博客加上梅花飘飘(接口版)
在你的个人网站上加上梅花飘飘演示图直接上代码<script src='https://api.vvhan.com/api/meihua'></script> 注意:此效果需要Jquery支持(若无Jquery,请添加以下) <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
2020年01月22日
1,987 阅读
4 评论
0 点赞
2020-01-22
为你的博客加上春节灯笼(接口版)
在你的个人网站上加上春节灯笼直接上代码<script src="https://api.vvhan.com/api/denglong"></script>把以上代码插入到网站的body标签内即可。效果图
2020年01月22日
1,869 阅读
4 评论
0 点赞
2019-08-28
CSS动态渐变彩色文字代码
HTML部分:<div class="wrap"> 闲看儿童捉柳花</div>CSS部分:@keyframes move { 0% {background-position: 0 0;} 100% { /*宽度固定,如果为百分比背景不会滚动*/ background-position: -300px 0; } } .wrap { /*设置背景渐变色*/ background-image: linear-gradient(to right, red, orange, yellow, green, yellow, orange, red, orange,yellow, green, yellow, orange, red); /*chrome私有样式,加前缀,文字显示背景图片*/ -webkit-background-clip: text; animation: move 5s infinite; /*文字颜色设为透明*/ color: transparent; /*宽度固定*/ width: 300px; }
2019年08月28日
2,003 阅读
0 评论
0 点赞
1
2