汕头市php网站建设,企业网站深圳,做广告牌子,动漫做的游戏 迅雷下载网站前言#xff1a;哈喽#xff0c;大家好#xff0c;今天给大家分享htmlcss 绚丽效果#xff01;并提供具体代码帮助大家深入理解#xff0c;彻底掌握#xff01;创作不易#xff0c;如果能帮助到大家或者给大家一些灵感和启发#xff0c;欢迎收藏关注哦 #x1f495; 文… 前言哈喽大家好今天给大家分享htmlcss 绚丽效果并提供具体代码帮助大家深入理解彻底掌握创作不易如果能帮助到大家或者给大家一些灵感和启发欢迎收藏关注哦 文章目录 效果原理解析1.每个按钮是由buttonbutton::beforespanbutton::after组成。2.当按钮上有鼠标时hover效果触发改变button::before和button::after,并且从代码里可以看出点击时button::after也会有一个向下的位移。3.具体的变换参数直接看代码可以一键复制查看效果 上代码可以直接复制使用目录htmlcss 效果 原理解析
1.每个按钮是由buttonbutton::beforespanbutton::after组成。 2.当按钮上有鼠标时hover效果触发改变button::before和button::after,并且从代码里可以看出点击时button::after也会有一个向下的位移。
/*当hover时*/
.butBilayer:hover::before {transform: translate(5%, 20%);width: 110%;height: 110%;
}.butBilayer:hover::after {border-radius: 10px;transform: translate(0, 0);width: 100%;height: 100%;
}/*点击时的效果*/
.butBilayer:active::after {transition: 0s;transform: translate(0, 5%);
}3.具体的变换参数直接看代码可以一键复制查看效果
上代码可以直接复制使用
目录
html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlehtmlcss 实现hover双层按钮/titlelink relstylesheet href./style.css
/head
body
div classcontainerh1 styletext-align: center;color:#fff;margin-bottom: 50px;padding-top: 50px; text-shadow: 0 3px 3px #4c6ed3;htmlcss 实现hover双层按钮/h1div classwrapperbutton classbutBilayerspan求点赞/span/buttonbutton classbutBilayerspan求关注/span/buttonbutton classbutBilayerspan求收藏/span/buttonbutton classbutBilayerspan求转发/span/button/div
/div/body
/htmlcss
*
{margin: 0;padding: 0;box-sizing: border-box;
}
:root
{--btn-bg-color:#fff;--font-color-black: #000;--btn-bg-color-hover: #FF5833;
}
.container{min-height: 100vh;background-color: #0e1538;
}
.wrapper{display: flex;flex-direction: column;align-items: center;gap:40px;
}.butBilayer {all: unset;width: 100px;height: 30px;font-size: 16px;background: transparent;border: none;position: relative;color: #f0f0f0;cursor: pointer;z-index: 1;padding: 10px 20px;display: flex;align-items: center;justify-content: center;white-space: nowrap;user-select: none;-webkit-user-select: none;touch-action: manipulation;
}.butBilayer::after,
.butBilayer::before {content: ;position: absolute;bottom: 0;right: 0;z-index: -99999;transition: all 0.4s;
}.butBilayer::before {transform: translate(0%, 0%);width: 100%;height: 100%;background: #28282d;border-radius: 10px;
}.butBilayer::after {transform: translate(10px, 10px);width: 35px;height: 35px;background: #ffffff15;backdrop-filter: blur(5px);-webkit-backdrop-filter: blur(5px);border-radius: 50px;
}
/*当hover时*/
.butBilayer:hover::before {transform: translate(5%, 20%);width: 110%;height: 110%;
}.butBilayer:hover::after {border-radius: 10px;transform: translate(0, 0);width: 100%;height: 100%;
}
/*点击时的效果*/
.butBilayer:active::after {transition: 0s;transform: translate(0, 5%);
} 到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章创作不易如果能帮助到大家,希望大家多多支持宝码香车~ 更多专栏订阅推荐 htmlcssjs 绚丽效果 vue ✈️ Electron ⭐️ js 字符串 ✍️ 时间对象Date()操作
