下载资源前端资源详情
CSS技巧专栏一日一例：19 -纯CSS实现超酷的水晶按钮特效.zip
大小:1.88KB
价格:49积分
下载量:0
评分:
5.0
上传者:uuplay0216
更新日期:2025-09-22

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

资源文件列表(大概)

文件名
大小
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; 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>

用户评论 (0)

发表评论

captcha

相关资源

JS+CSS案例：可适应上下布局和左右布局的菜单（含二级菜单）.zip

JS+CSS案例：可适应上下布局和左右布局的菜单（含二级菜单）。如题所述，这是一个可以通过前端页面的切换样式表改变菜单位置布局的一个案例。案例是非常时尚且实用的二级菜单。---------------------------------------------------------------------------------------------------------需要看看效果的，可以移步到我的专栏去看看。文章名与资源名一致。资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、CSS+JS实现。适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。

446.52KB10积分

人体姿势识别yolo8预训练模型，内附完整Python运行代码，可直接运行，可用于图片或者视频的人体姿势识别

项目：人体姿势识别预训练模型用途:可以直接用于人体姿势识别， 也可以作为基础模型再训练预测效果：资源内附唐朝诡事录经典站位图识别效果，可以准确识别出面部和躯体。人体姿势识别的作用:人体姿势识别预训练模型是一种在计算机视觉领域中具有重要应用的技术。它是通过使用大量的人体姿势相关数据进行训练得到的模型。这些数据通常包含了各种不同场景、不同个体、不同动作下的人体图像或视频帧。预训练模型的优势在于它能够学习到通用的人体姿势特征和模式。例如，它可以识别出站立、坐下、跑步、跳跃等常见姿势，还能区分不同身体部位的位置和姿态关系。在实际应用中，人体姿势识别预训练模型有着广泛的用途。比如在运动分析领域，它可以帮助教练评估运动员的动作是否标准，以便进行针对性的训练改进；在医疗康复领域，用于监测患者的康复训练动作是否正确；在虚拟现实和增强现实中，实现对用户身体动作的准确捕捉和响应，提供更加沉浸式的体验。总之，人体姿势识别预训练模型为许多领域带来了创新和便利，随着技术的不断发展，其性能和应用范围还将不断扩大。

31.33MB39积分

gdal1111-192.zip

gdal1111、gdal192、gdal1113、gdal1115源码合集

46.47MB31积分

gdal201.zip

gdal201在Windows系统下，使用Visual Studio 2010编译的二进制开发包，同时包含debug版本和Release版本，原始代码压缩包

23.62MB36积分