CSS技巧专栏一日一例：19 -纯CSS实现超酷的水晶按钮特效.zip 1.88KB

uuplay0216

资源文件列表:

CSS技巧专栏一日一例：19 -纯CSS实现超酷的水晶按钮特效.zip 大约有1个文件

CSS技巧专栏一日一例：19 -纯CSS实现超酷的水晶按钮特效.html 3.27KB

资源介绍:

CSS技巧专栏一日一例：19 -纯CSS实现超酷的水晶按钮特效.zip --------------------------------------------------------------------------------------------------------- 需要看看效果的，可以移步到我的专栏去看看。文章名与资源名一致。资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、纯CSS实现。适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。

<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CSS技巧专栏一日一例：19 -纯CSS实现超酷的水晶按钮特效</title> <style> *{ margin:0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } :root{ --main-bg-color: #333; --color:#000; --bg: #000000; --clr-1: #00ccff; --clr-2: #33ff8c; --clr-3: #ffcc00; --clr-4: #e54cff; --clr-5: #ffcc00; --blur: 1.2rem; } body { width:100%; height: auto; background: var(--main-bg-color); } button{ outline: 0; border: none; } .container{ /* 居中 */ position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width:auto; } .base{ position: relative; padding: 1rem 3rem; /* 用 padding 撑起按钮的宽度和高度，并确保了按钮文字水平方向居中 */ font-family: "微软雅黑", sans-serif; font-size: 1.5rem; line-height: 1.5rem; /* 行高和字号大小相等，可以实现按钮文字在按钮内垂直居中 */ font-weight:700; color: var(--color); /* 文字颜色为预定义的前景色 */ cursor: pointer; /* 鼠标移动到按钮上时候的形状：手型 */ user-select: none; /* 让用户不能选择按钮上的文字 */ white-space: nowrap; /* 避免英文单词间的空格导致文字换行 */ border-radius: 2rem; text-decoration: none; text-transform:uppercase; /* 字母自动修正为大写 */ transition: all .5s; /* 按钮响应动画效果的持续时间 */ margin: 1.5rem 2rem; } /* 水晶按钮 */ .crystal{ position: relative; border-radius: 15px; border:0; cursor: pointer; /* 将鼠标指针改为手指形状 */ box-shadow: 0px 5px 0px 0px rgba(0, 0,0, 0.7), 0px 0px 1px rgba(0, 0, 0, 0.25); overflow:hidden; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.6); background: linear-gradient(90deg, #0f0, #0ff 50%, #0cf 100%, transparent 0); transition: 300ms; } .crystal::before{ content: ''; position:absolute; border-radius: 15px; width: 100%; height: calc(100% - 2px); display: block; top:0; left: 0; box-shadow: inset 0 15px 0px 0 rgba(255, 255, 255, 0.6),inset 0 2px 0 0 rgba(255, 255, 255, 0.7); transition: 300ms; } .crystal:after { content: ""; position: absolute; height: 100%; width: 100%; margin: 0px -5px; box-shadow: 50px -23px 10px -10px rgba(255, 255, 255, 0.26); transform: rotate(-55deg); animation: shine 1.5s infinite ease; } @keyframes shine { 0% { top:50px; left:-110px; } 50% { top:50px; left:150px; } 100% { top:50px; left:-110px; } } .crystal:hover{ transform: translateY(5px); transition: 300ms; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.9); box-shadow: 0px 0px rgba(0, 153, 51, 0.4), 0px 0px 1px rgba(0, 0, 0, 0.25); } .crystal:hover::before{ box-shadow: inset 0 10px 0px 0 rgba(255, 255, 255, 0.6),inset 0 2px 0 0 rgba(255, 255, 255, 0.7); transition: 300ms; } </style> </head> <body> <div class="container"> <button class="base crystal">超酷的水晶按钮 </button> <button class="base crystal" >水晶按钮 </button> </div> </body> </html>

标题	大小	时间
JS+CSS案例：可适应上下布局和左右布局的菜单（含二级菜单）.zip	446.52KB	8月前

人体姿势识别yolo8预训练模型，内附完整Python运行代码，可直接运行，可用于图片或者视频的人体姿势识别	31.33MB	8月前
gdal1111-192.zip	46.47MB	8月前
gdal201.zip	23.62MB	8月前
Differential-Drive-Robot-main.zip	882.41KB	8月前

基于MATLAB的交通标志识别（完美运行）	258.16KB	8月前
基于MATLAB的火焰检测定位（完美运行）	1.46MB	8月前
2021-CUMCM-C-yasNing.zip	1.91MB	8月前