Web前端之按钮悬停效果、不一样的Css变量定义位置、Html内联样式定义变量、通过样式把字母转为大写

编程录(MJ682517)

于 2024-08-26 10:59:10 发布

阅读量1.1k

点赞数 34

分类专栏： Web前端 Html Style 文章标签：前端 web html css web前端

本文链接：https://blog.csdn.net/weixin_51157081/article/details/132287166

版权

Web前端同时被 3 个专栏收录

371 篇文章 6 订阅

订阅专栏

Style

95 篇文章 0 订阅

订阅专栏

Html

87 篇文章 1 订阅

订阅专栏

前言

1、代码段使用HTML和CSS，创建一个带有三种颜色按钮的方框。每个按钮在悬停时会有不同的颜色变化效果。
2、代码段创建一个居中的方框，里面包含三个链接按钮。每个按钮的颜色和效果由CSS变量–clr控制。悬停时，按钮文字会变成白色，并且背景色扩展和发光效果随着时间显现出来。这种设计使得按钮在视觉上非常引人注目。

效果图

Html

<div class="box">
    <a href="#" style="--clr: #1e9bff">1e9bff</a>
    <a href="#" style="--clr: #ff1867">ff1867</a>
    <a href="#" style="--clr: #6eff3e">6eff3e</a>
</div>
1、<div class="box">是一个包含三个链接按钮的容器，使用class="box"来指定它的样式。
2、<a href="#" style="--clr: #1e9bff">1e9bff</a>是一组链接按钮。style="--clr: #1e9bff"定义一个CSS变量–clr，它控制链接的颜色。链接显示为按钮，内容是颜色代码，例如“1e9bff”。
3、其他两个链接按钮类似，但使用不同的颜色代码。

Style

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #27282c;
}

.box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 68px;

    a {
        position: relative;
        padding: 6px 8px;
        box-sizing: border-box;
        font-size: 1.5em;
        color: var(--clr);
        text-decoration: none;
        text-transform: uppercase;
        text-shadow: 0 0 10px var(--clr);
        letter-spacing: 0.1em;
        border: 2px solid var(--clr);
        border-radius: 4px;
        transition: 0.3s;
    }

    a:hover {
        color: #ffffff;
        border: 2px solid transparent;
        text-shadow: 0 0 0 var(--clr);
        transition: 0.6s;
    }

    a::before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: var(--clr);
        border-radius: 4px;
        z-index: -1;
        transform: scale(0);
        transition: 0.3s;
    }

    a:hover::before {
        transform: scale(1);
        transition-delay: 0.3s;
        box-shadow: 0 0 8px var(--clr),
            0 0 8px var(--clr),
            0 0 8px var(--clr);
    }
}
*
1、选择器应用于页面上的所有元素。
2、margin: 0; padding: 0;取消默认的外边距和内边距，使页面布局更容易控制。
3、box-sizing: border-box;设置元素的宽度和高度包括内边距和边框，确保元素的尺寸控制更加直观。

body标签
1、设置整个网页的样式。
2、height: 100vh;让页面的高度占满整个视口高度。
3、display: flex; justify-content: center; align-items: center;使页面内容在垂直和水平居中显示。
4、background-color: #27282c;设置背景颜色为深灰色。

.box
1、选择器应用于包含链接的容器。
2、display: flex;使用Flexbox布局，使子元素(即链接)可以灵活布局。
3、justify-content: center; align-items: center;使链接在容器内水平和垂直居中。
4、flex-wrap: wrap;使链接在容器内根据空间自动换行。
5、gap: 68px;设置链接之间的间距为68像素。

a标签
01、选择器应用于每个链接按钮。
02、position: relative;使链接成为相对定位，为后续的伪元素::before定位做准备。
03、padding: 6px 8px;设置链接内部的上下内边距为6像素，左右内边距为8像素。
04、box-sizing: border-box;确保链接的宽度和高度包含内边距和边框。
05、font-size: 1.5em;设置字体大小为1.5倍于默认字体大小。
06、color: var(--clr);设置文本颜色为之前定义的–clr变量的值。
07、text-decoration: none;移除链接的默认下划线。
08、text-transform: uppercase;将文本转换为全大写字母。
09、text-shadow: 0 0 10px var(--clr);添加一个颜色为–clr的阴影，增强文字的发光效果。
10、letter-spacing: 0.1em;增加字母间距为0.1em。
11、border: 2px solid var(--clr);添加一个颜色为–clr的2像素边框。
12、border-radius: 4px;设置4像素的圆角边框。
13、transition: 0.3s;设置链接在不同状态之间过渡效果的持续时间为0.3秒。

a:hover
1、选择器应用于鼠标悬停在链接上的时候。
2、color: #ffffff;将文字颜色变为白色。
3、border: 2px solid transparent;将边框颜色变为透明。
4、text-shadow: 0 0 0 var(--clr);移除文字的阴影效果。
5、transition: 0.6s;设置悬停效果的过渡时间为0.6秒。

a::before
01、使用::before伪元素来在链接后面创建一个背景效果。
02、content: '';生成一个空内容的伪元素。
03、width: 100%; height: 100%;伪元素覆盖整个链接的尺寸。
04、position: absolute;使伪元素绝对定位，覆盖在链接后面。
05、top: 0; left: 0;将伪元素定位在链接的左上角。
06、background-color: var(--clr);设置背景颜色为–clr。
07、border-radius: 4px;使伪元素的边角与链接的边角一致。
08、z-index: -1;让伪元素位于链接文字下方。
09、transform: scale(0);初始时将伪元素缩放为0，使其不可见。
10、transition: 0.3s;设置伪元素的过渡时间为0.3秒。

a:hover::before
1、当鼠标悬停在链接上时，伪元素的效果会发生变化。
2、transform: scale(1);将伪元素的缩放恢复为原始尺寸，使其显现出来。
3、transition-delay: 0.3s;延迟0.3秒后开始过渡效果，形成一种逐渐展开的效果。
4、box-shadow: 0 0 8px var(--clr), 0 0 8px var(--clr), 0 0 8px var(--clr);为伪元素添加多层次的阴影，增强其发光效果。