HTML&CSS:不一样的开关效果

这个页面实现了一个具有复杂背景效果和立体按钮的简单布局。页面使用了多个径向渐变和线性渐变来创建视觉上丰富的背景效果,同时按钮也通过阴影和渐变效果增强了立体感。页面的整体设计风格现代且具有视觉吸引力。


大家复制代码时,可能会因格式转换出现错乱,导致样式失效。建议先少量复制代码进行测试,若未能解决问题,私信回复源码两字,我会发送完整的压缩包给你。

演示效果

HTML&CSS

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号关注:前端Hardy</title>
    <style>
        body {
            abackground: #c96;
            overflow: clip;
            min-height: 100vh;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 5em;
            font-size: 1rem;
            background:
                radial-gradient(70% 1% at 30% 5%, #c632 80%, #0000 0) 50% 50% / 100% 10%,
                radial-gradient(60% 1.3% at 30% 5%, #c631 80%, #0000 0) 30% 50% / 70% 7.5%,
                radial-gradient(50% 0.7% at 30% 5%, #c631 80%, #0000 0) 30% 50% / 50% 17.5%,
                radial-gradient(60% 1% at 30% 5%, #c631 80%, #0000 0) 0% 10% / 60% 9%,
                radial-gradient(80% 1.3% at 30% 5%, #a411 80%, #0000 0) 70% 20% / 66% 7.5%,
                radial-gradient(100% 1.1% at 30% 5%, #c631 80%, #0000 0) 0% 17% / 70% 12.5%,
                radial-gradient(60% 3% at 50% 0, #c631 80%, #0000 0) 0% 10% / 70% 7.5% repeat-y,
                radial-gradient(40% 4% at 70% 5%, #b521 80%, #0000 0) 100% 2% / 70% 5%,
                radial-gradient(80% 50% at 20% 20%, #c0824334 10%, #0000 25%),
                radial-gradient(140% 50% at 90% 45%, #c0824324 10%, #0000 15%),
                radial-gradient(100% 50% at 70% 50%, #c0824324 10%, #0000 15%),
                linear-gradient(to top right, #0001, #ffc5),
                #f0a274;
        }

        article {
            padding: 1.75em;
            position: relative;
            background:
                linear-gradient(90deg, #8884, #aaa6, #ccc6, #bbb6),
                radial-gradient(70% 1% at 30% 5%, #c632 80%, #0000 0) 50% 50% / 100% 20%,
                radial-gradient(60% 1.3% at 30% 5%, #c631 80%, #0000 0) 30% 50% / 70% 17.5%,
                radial-gradient(50% 0.7% at 30% 5%, #c631 80%, #0000 0) 30% 50% / 50% 27.5%,
                radial-gradient(60% 1% at 30% 5%, #c631 80%, #0000 0) 0% 10% / 60% 19%,
                radial-gradient(80% 1.3% at 30% 5%, #a411 80%, #0000 0) 70% 20% / 66% 17.5%,
                radial-gradient(100% 1.1% at 30% 5%, #c631 80%, #0000 0) 0% 17% / 70% 22.5%,
                radial-gradient(60% 3% at 50% 0, #c631 80%, #0000 0) 0% 10% / 70% 17.5% repeat-y,
                radial-gradient(40% 4% at 70% 5%, #b521 80%, #0000 0) 100% 2% / 70% 15%,
                linear-gradient(#aaa, #ccc);
            border-radius: 1.5em;
            box-shadow:
                inset 0 0 0.2em #ddd,
                inset 0 -0.25em 0.5em #0001,
                0 0 1em #0003,
                -0.35em -0.35em 1em #3212,
                -0.25em -0.25em 0.25em #3211,
                0 0 0 1px #ababab inset;

            &::before {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: calc(100% - 2.5em);
                height: calc(100% - 2.5em);
                background: #fff2;
                border-radius: 0.75em;
                box-shadow:
                    inset 0 0 0.6em #0008,
                    inset -0.1em -0.1em 0.5em #0003,
                    inset 0 0.5em 0.25em #fff3;
            }

            &::after {
                content: "";
                position: absolute;
                top: 0;
                left: 50%;
                transform: translate(-50%, -100vh);
                width: 1.25em;
                height: 100vh;
                background:
                    linear-gradient(90deg, #ccc, #eee, #ddd) 0 100% / 100% 1.75em,
                    linear-gradient(90deg, #0000 20%, #ccc 0, #ddd, #eee, #ddd 80%, #0000 0);
                background-repeat: no-repeat;
                filter: drop-shadow(-0.25em 0 0.5em #0005);
                z-index: -1;
            }

            button {
                position: relative;
                box-sizing: border-box;
                border-radius: 0.65em;
                font-size: 1em;
                padding: 1em;
                display: flex;
                align-items: flex-end;
                border: 0.125em solid #000;
                color: #eeec;
                width: 9em;
                height: 5em;
                background:
                    radial-gradient(at 50% 10%, #fff1, #fff0),
                    #333;
                box-shadow:
                    inset 0 0 0 0.1em #333,
                    inset 0 0 0.25em 0.1em #fff3,
                    -0.125em -0.125em 0.5em #000c;
                transition: all 0.125s;

                &:active {
                    border: 0.05em solid #000;
                    padding: 1.05em;
                    box-shadow:
                        inset 0 0 0 0.1em #333,
                        inset 0 0 0.25em 0.1em #fff3,
                        -0.125em -0.125em 0.25em #000c;
                }
            }
        }
    </style>
</head>

<body>
    <article role="img" aria-labelledby="illustration of an Apple-looking mini-keyboard with only the tab key">
        <button>tab</button>
    </article>
</body>

</html>

HTML 结构

  • article:定义了一个具有装饰性背景和按钮的容器。
  • img:为屏幕阅读器提供图像的角色说明。
  • aria-labelledby:指定描述该元素的文本内容。
  • button:定义了一个按钮,显示文本"tab"。

CSS 样式

body全局样式

  • body:背景颜色为#c96。
  • 使用overflow: clip防止内容溢出。
  • 设置最小高度为视口高度(min-height: 100vh)。
  • 使用Flexbox布局居中显示内容,设置间距为5em。字体大小为1rem。
  • 背景使用了多个径向渐变和线性渐变,创建复杂的视觉效果。

article容器样式

  • article:内边距为1.75em。使用相对定位。
  • 背景使用了多个径向渐变和线性渐变,创建复杂的视觉效果。
  • 边框半径为1.5em。阴影效果包括内阴影和外阴影,增强立体感。
  • ::before伪元素:绝对定位,居中显示。背景为半透明白色,带有圆角和阴影效果。
  • ::after伪元素:绝对定位,位于顶部。背景使用线性渐变,模拟光线效果。使用filter添加阴影效果。

button按钮样式

  • button:相对定位。使用Flexbox布局,内容对齐到末尾。边框半径为0.65em。字体大小为1em。内边距为1em。无边框,颜色为#eeec。宽度为9em,高度为5em。
  • 背景使用径向渐变和纯色,创建立体效果。阴影效果包括内阴影和外阴影。
  • :active伪类:按下时调整边框宽度和内边距。调整阴影效果,增强按下感。

---各位互联网搭子,要是这篇文章成功引起了你的注意,别犹豫,关注、点赞、评论、分享走一波,让我们把这份默契延续下去,一起在知识的海洋里乘风破浪!

相关推荐
时光追逐者2 分钟前
在 Blazor 中使用 Chart.js 快速创建数据可视化图表
开发语言·javascript·信息可视化·c#·.net·blazor
hz.ts18 分钟前
Angular 国际化
javascript·ecmascript·angular.js
6武719 分钟前
Vue 数据传递流程图指南
前端·javascript·vue.js
夏天想29 分钟前
vant4+vue3上传一个pdf文件并实现pdf的预览。使用插件pdf.js
开发语言·javascript·pdf·vant
....49234 分钟前
antvX6节点全选后鼠标通过拖拉调整视图的展示位置
javascript·计算机外设·数据中台·antvx6
samuel9181 小时前
axios取消重复请求
前端·javascript·vue.js
滿1 小时前
Vue 3 中按照某个字段将数组分成多个数组
前端·javascript·vue.js
安分小尧1 小时前
[特殊字符] 使用 Handsontable 构建一个支持 Excel 公式计算的动态表格
前端·javascript·react.js·typescript·excel
好_快2 小时前
Lodash源码阅读-baseClone
前端·javascript·源码阅读
好_快2 小时前
Lodash源码阅读-baseToString
前端·javascript·源码阅读