下载资源前端资源详情
CSS技巧专栏一日一例:20 -纯CSS实现点击时会凹陷下去的按钮特效.zip
大小:1.68KB
价格:14积分
下载量:0
评分:
5.0
上传者:uuplay0216
更新日期:2025-09-22

CSS技巧专栏一日一例:20 -纯CSS实现点击时会凹陷下去的按钮特效.zip

资源文件列表(大概)

文件名
大小
CSS技巧专栏一日一例:20 -纯CSS实现点击时会凹陷下去的按钮特效.html
2.46KB

资源内容介绍

CSS技巧专栏一日一例:20 -纯CSS实现点击时会凹陷下去的按钮特效.zip---------------------------------------------------------------------------------------------------------需要看看效果的,可以移步到我的专栏去看看。文章名与资源名一致。资源特点:代码短小、代码容易阅读、重点注释、方便扩展、样式美观、纯CSS实现。适用人群:前端从业职,新手小白,有网站开发能力对美工有所欠缺的后端工程师。
<!DOCTYPE html><html lang="en" ><head><meta charset="UTF-8"><title>CSS技巧专栏一日一例:20 -纯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: #eaeaea; --color:#000; --hover-bg:#fff;}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;}.push_down{ color: #333; cursor: pointer; border:1px solid var(--main-bg-color); height: 60px; background: var(--main-bg-color); transition: 0.3s; text-shadow: 1px 2px 1px rgba(255, 255, 255, 0.9); }.push_down:hover{ background-color: var(--hover-bg); }.push_down:active{ color: #666; box-shadow:0px 1px 30px rgba(0, 0, 0, 0.03)inset, 2px 2px 2px rgba(0, 0, 0, 0.029)inset,0px 1px 1px rgba(0, 0, 0, 0.06) inset,0px -1px 0px rgba(255, 255, 255, 0.06) inset,5px 5px 6px rgba(0, 0, 0, 0.027) inset,10px 9px 12px rgba(0, 0, 0, 0.07) inset; text-shadow: 1px 2px 1px rgba(255, 255, 255,1); transition: 0.3s;}</style></head><body> <div class="container"> <button class="base push_down">会凹陷的按钮</button> <button class="base push_down" >凹下的按钮</button> </div> </body></html>

用户评论 (0)

发表评论

captcha

相关资源

CSS+js 做漂亮时钟.zip

CSS+js 做漂亮时钟。这是一个非常仿真的圆形时钟。通过js获取当前时间并调整时钟的指针旋转,完成时间的显示。样子也非常漂亮。---------------------------------------------------------------------------------------------------------需要看看效果的,可以移步到我的专栏去看看。文章名与资源名一致。资源特点:代码短小、代码容易阅读、重点注释、方便扩展、样式美观适用人群:前端从业职,新手小白,有网站开发能力对美工有所欠缺的后端工程师。

53.83KB21积分

protoc3.19的window下载安装包

protoc3.19的window下载安装包

1.41MB28积分

车辆路径问题常用数据集,带时间窗约束的车辆路径规划问题(VRPTW)、容量限制的车辆路径问题(CVRP)

CVRP问题是一类在特定约束条件下优化车辆行驶路线的NP-hard问题。它要求在满足一系列客户点的需求且不超过车辆容量的前提下,安排适当的车辆行驶路线,旨在最小化总成本,包括车辆启动成本和行驶成本。CVRP问题是运筹学和物流管理中的一个重要课题,直接关联到物流配送的成本效益和服务质量。Solomon数据集是用于研究车辆路径问题(VRPTW、CVRP)的一系列标准测试实例,由Solomon于1987年提出。Solomon数据集在CVRPLIB中被广泛采用,其中包含一个起始点(CUST NO.==0)和100个客户点,所有的常量都为整数。该数据集包括最大可派遣车辆数K、每辆车的最大载重量Q、各节点的横纵坐标XCOORD和YCOOR以及节点之间的距离视为运输成本、节点处的需求量DEMAND、服务最早开始时间READY TIME和服务截止时间DUE TIME等信息。

76.14KB50积分

多目标鲸鱼优化算法matlab代码

多目标鲸鱼优化算法(Non-Dominated Sorting Whale Optimization Algorithm,NSWOA)是一种基于鲸鱼优化算法(Whale Optimization Algorithm,WOA)的改进算法,专门用于解决多目标优化问题。多目标鲸鱼优化算法在原有WOA的基础上引入了非支配排序、拥挤度计算和精英保留策略等概念,以提高算法处理多目标问题的性能。WOA模拟座头鲸捕食行为,通过收缩包围、螺旋更新和随机搜索三个阶段来不断更新个体位置。然而,原始的WOA无法直接处理多目标优化问题。为了将WOA应用于多目标优化,NSWOA引入了非支配排序的概念。该排序方法将种群中的个体按照其适应度进行分级,支配等级越低的个体越优秀。通过这种方式,算法能够有效筛选出优秀的非支配个体,引导种群进化。

13.58KB43积分