CSS技巧专栏一日一例：15 -纯CSS实现立体形状的按钮特效.zip

uuplay0216CSS技巧专栏一日一例：15 -纯CSS实现立体形状的按钮特效.zip 1.78KB

资源文件列表:

CSS技巧专栏一日一例：15 -纯CSS实现立体形状的按钮特效.zip 大约有1个文件

CSS技巧专栏：一日一例 15 -纯CSS实现立体形状的按钮特效.html 2.9KB

资源介绍:

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

<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CSS技巧专栏：一日一例 15 -纯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: #111; --color:#000; --hover-color:#ff1a75; } body { width:100%; height: auto; background: var(--main-bg-color); } button{ margin: 0.3em; outline: 0; border: none; } .container{ /* 居中 */ position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; background: #dcdcdc; } .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; } /* 模拟立方体：我想起飞 */ .cube{ position: relative; background: #fff; transform: rotate(-30deg) skew(25deg); box-shadow: -25px 25px 5px rgba(0, 0, 0, 0.5); transition: all 0.5s ease; border-radius: 0px; bottom:50px; z-index: 9; } .cube::before, .cube::after{ position: absolute; content: ""; left:-35px; top:27px; width: 28.5%; height: 30%; background: #ccc; transform: rotate(90deg) skew(45deg); } .cube::after{ left: -9.5px; top: 55.5px; width: 100%; height: 30%; transform: rotate(0deg) skew(-45deg); transition: all 0.5s ease; } .cube:hover{ color: #660029; text-shadow: -1px -1px 0px rgba(0,0,0,0.3),1px 1px 0px rgba(255,255,255,0.3); background: #ff0066; bottom: 65px; box-shadow: -30px 30px 20px rgba(0, 0, 0, 0.5); /* 调整按钮阴影 */ transition: all 0.5s ease; } .cube:hover::before, .cube:hover::after{ background: #cc0052; transition: all 0.5s ease; } .cube:hover::after{ background: #b30047; } </style> </head> <body> <div class="container"> <button class="base cube">你在哪里</button> <button class="base cube">你想干嘛</button> <button class="base cube">你是谁呢</button> <button class="base cube">谁在乎呢</button> <button class="base cube">我是萌新</button> </div> </body> </html>