做网站咋做,权威的网站建设,赣县城乡规划建设局网站,浙江网站建设哪里有前言#xff1a;哈喽#xff0c;大家好#xff0c;今天给大家分享htmlcss 绚丽效果#xff01;并提供具体代码帮助大家深入理解#xff0c;彻底掌握#xff01;创作不易#xff0c;如果能帮助到大家或者给大家一些灵感和启发#xff0c;欢迎收藏关注哦 #x1f495; 目… 前言哈喽大家好今天给大家分享htmlcss 绚丽效果并提供具体代码帮助大家深入理解彻底掌握创作不易如果能帮助到大家或者给大家一些灵感和启发欢迎收藏关注哦 目录 一、效果二、原理解析1.这是一个hover出现2个选择按钮的效果。每个按钮都是由4部分组成1个div,1个div的伪元素before,2个button,如下图。1.1 div元素是最外层的位置和代码。1.2 div:before是白底黑字也是默认的文字位置和代码。1.3 2个button按钮的位置和代码。1.4 按钮组成关系。 2.当按钮上有鼠标时hover效果触发最上层的div:before隐藏运行transition过渡动画效果。3.具体的变换参数直接看代码可以一键复制查看效果 三、上代码可以直接复制使用目录htmlcss 一、效果 二、原理解析
1.这是一个hover出现2个选择按钮的效果。每个按钮都是由4部分组成1个div,1个div的伪元素before,2个button,如下图。 1.1 div元素是最外层的位置和代码。 1.2 div:before是白底黑字也是默认的文字位置和代码。 1.3 2个button按钮的位置和代码。 1.4 按钮组成关系。 2.当按钮上有鼠标时hover效果触发最上层的div:before隐藏运行transition过渡动画效果。 /*当hover时*/
.butWrap:hover::before {opacity: 0;pointer-events: none;
}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 classwrapperdiv classbutWrapbutton classbutLeft必须/buttonbutton classbutRight一定/button/divdiv classbutWrapbutton classbutLeft必须/buttonbutton classbutRight一定/button/divdiv classbutWrapbutton classbutLeft必须/buttonbutton classbutRight一定/button/divdiv classbutWrapbutton classbutLeft必须/buttonbutton classbutRight一定/button/div/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;
}.butWrap {font-size: 1.2rem;cursor: pointer;position: relative;display: flex;align-items: center;transition: 1s;overflow: hidden;
}.butWrap::before {content: 求点赞;display: flex;justify-content: center;align-items: center;position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;z-index: 10;background: #fff;transition: 0.2s;border-radius: 3px;font-size: 16px;
}.butWrap:nth-child(2)::before {content: 求关注;
}.butWrap:nth-child(3)::before {content: 求收藏;
}.butWrap:nth-child(4)::before {content: 求转发;
}.butWrap button {width: 50%;padding: 10px 15px;border: 0px;color: white;font-size: 1rem;font-weight: 700;cursor: pointer;outline: none;
}.butLeft {background: rgb(217, 20, 20);border-radius: 5px 0px 0px 5px;
}.butRight {background: rgb(29, 161, 242);border-radius: 0px 5px 5px 0px;
}.butWrap button:hover {filter: brightness(400%);
}
/*当hover时*/
.butWrap:hover::before {opacity: 0;pointer-events: none;
}到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章创作不易如果能帮助到大家,希望大家多多支持宝码香车~ 更多专栏订阅推荐 htmlcssjs 绚丽效果 vue ✈️ Electron ⭐️ js 字符串 ✍️ 时间对象Date()操作
