搜索到
3
篇与
CSS3
的结果
-
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(); -
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}
-
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;
