网站规划和建设方案,申请个人企业邮箱,千库网会员,源码商城网站源码前言#xff1a;哈喽#xff0c;大家好#xff0c;今天给大家分享htmlcss 绚丽效果#xff01;并提供具体代码帮助大家深入理解#xff0c;彻底掌握#xff01;创作不易#xff0c;如果能帮助到大家或者给大家一些灵感和启发#xff0c;欢迎收藏关注哦 #x1f495; 目… 前言哈喽大家好今天给大家分享htmlcss 绚丽效果并提供具体代码帮助大家深入理解彻底掌握创作不易如果能帮助到大家或者给大家一些灵感和启发欢迎收藏关注哦 目录 一、效果二、原理解析1.这是一个hover中间展开背景的效果。每个按钮都是由3部分组成button,button:before,文字,如下图。按钮组成简易示例 2.当按钮上有鼠标时hover效果触发运行transition过渡动画效果。3.具体的变换参数直接看代码可以一键复制查看效果 三、上代码可以直接复制使用目录htmlcss 一、效果 二、原理解析
1.这是一个hover中间展开背景的效果。每个按钮都是由3部分组成button,button:before,文字,如下图。 按钮组成简易示例 2.当按钮上有鼠标时hover效果触发运行transition过渡动画效果。
/*当hover时*/
.butBgCenterGrow:hover::before {transition: 0.4s all ease;left: 0;right: 0;opacity: 1;z-index: -1;
}.butBgCenterGrow:hover {font-size: large;color: rgb(54, 20, 20);font-weight: 300;cursor: pointer;
}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 classbutBgCenterGrow求点赞/buttonbutton classbutBgCenterGrow求关注/buttonbutton classbutBgCenterGrow求收藏/buttonbutton classbutBgCenterGrow求转发/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;
}.butBgCenterGrow {width: 150px;height: 50px;color: white;background: transparent;position: relative;transition: ease-out 0.3s;border: 1px solid #43fbf2;border-radius: 3px;font-size: 15px;outline: none;z-index: 1;
}.butBgCenterGrow::before {transition: 0.3s all ease;position: absolute;top: 0;bottom: 0;right: 50%;left: 50%;content: ;background-color: #43fbf2;
}/*当hover时*/
.butBgCenterGrow:hover::before {transition: 0.4s all ease;left: 0;right: 0;opacity: 1;z-index: -1;
}.butBgCenterGrow:hover {font-size: large;color: rgb(54, 20, 20);font-weight: 300;cursor: pointer;
}到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章创作不易如果能帮助到大家,希望大家多多支持宝码香车~ 更多专栏订阅推荐 htmlcssjs 绚丽效果 vue ✈️ Electron ⭐️ js 字符串 ✍️ 时间对象Date()操作
