| 今日分享 | 您所在的位置：网站首页 › css按钮颜色渐变 › 今日分享 |
今日分享
|
「这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战」 前言大家好，今天来分享几个按钮的CSS样式。为什么突然想写这个呢，这就要说到最近掘金出了个小游戏——海底掘金，打开游戏页面，底部有两个大大的按钮，鼠标按下去会有较立体且真实的交互感，看到这个我就在想这个是怎么实现的，于是就有了今天这篇文章。 今天要分享的按钮全家福 👇 思路就是hover后修改背景颜色、字体颜色，添加闪烁的效果。 闪烁使用:before伪元素，利用skew倾斜，再translate3d移动即可。 .twinkle { overflow: hidden; position: relative; border: 2px solid #2c3e50; color: #2c3e50; transition: background-color .2s; } .twinkle::before { content: ""; position: absolute; width: 50px; height: 200%; background-color: rgba(255, 255, 255, .6); transform: skew(45deg) translate3d(-200px,0,0); } .twinkle:hover { background-color: #2c3e50; } .twinkle:hover::before { transition: ease-in-out .5s; transform: skew(45deg) translate3d(300px,0,0); } 复制代码 滑动填充类似进度条的效果，同样也是用:before伪元素实现，修改伪元素的宽度即可。 注意修改z-index，不然会被覆盖掉。 .slide { border: 2px solid #2980b9; color: #2980b9; position: relative; overflow: hidden; z-index: 1; transition: .5s; } .slide::before { content: ""; position: absolute; z-index: -1; width: 0; height: 100%; left: 0; background-color: #2980b9; transition: ease-in-out .5s; } .slide:hover::before { width: 100%; } 复制代码 边缘移动小球乍一看挺有趣的：小球是如何绕着边框移动的呢？先让我们看看下面这张图。 原来，并不只有小球在运动，他有一个容器，这个容器起初进行水平运动，在到达外框的时候，旋转180度，这样在容器顶部的小球自然而然随着旋转，看起来就像是绕着边框运动一样。 但是我在实现的过程中，发现还是挺难调整的，不难发现，我的小球在旋转的过程中，其实并没有完全沿着按钮的边框运动，这跟容器的形状有关系，我尝试过正圆的容器，尝试过矩形的，目前还没研究出来这是个怎样的计算公式，大家感兴趣的可以研究一下。 .ball { border: 2px solid #8e44ad; color: #8e44ad; position: relative; } .dot { position: absolute; left: 0; top: 0; width: 60px; height: 100%; border-radius: 20px; background-color: #bdc3c7; transition: all .3s ease; display: none; } .dot::before { content: ""; position: absolute; top: -11px; width: 10px; height: 10px; background-color: #8e44ad; border-radius: 50%; border: 4px solid #8e44ad; box-shadow: 0 0 10px 0 #8e44ad; } .ball:hover { color: #8e44ad; } .ball:hover .dot { animation: move 2s infinite linear; display: block; } @keyframes move { 0% { transform: translateX(0) rotate(0); } 30% { transform: translateX(calc(200px - 60px)) rotate(0); } 50% { transform: translateX(calc(200px - 60px)) rotate(180deg); } 80% { transform: translateX(0) rotate(180deg); } 100% { transform: translateX(0) rotate(360deg); } } 复制代码 一阵波浪效果伪元素实现边框，hover后显示边框，逐渐放大，宽度逐渐缩小，透明度逐渐降为0。 .boom { background-color: #16a085; color: #fff; position: relative; z-index: 1; } .boom::before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; bottom: 0; right: 0; border: 2px solid #16a085; border-radius: 20px; transform-origin: center; } .boom:hover::before { transform: scale(1.25); transition: all ease-out .5s; border: 1px solid #96f3e0; opacity: 0; } 复制代码 气泡效果伪元素实现的圆形居中，之后逐渐放大，按钮元素设置overflow:hidden。 .circle { background-color: #e74c3c; color: #fff; position: relative; z-index: 1; overflow: hidden; } .circle::before { content: ""; position: absolute; z-index: -1; top: 50%; left: 50%; width: 1rem; height: 1rem; transform: translate3d(-50%,-50%,0) scale(0,0); border-radius: 50%; background-color: #c0392b; transform-origin: center; transition: ease-in-out .5s; } .circle:hover::before { transform: translate3d(-50%,-50%,0) scale(15,15); } 复制代码 立体效果使用box-shadow来实现这个立体的效果，active之后按钮元素向下移动，同时纵向阴影减少就可以达到这个效果，我用了好几层text-shadow来加深文字的阴影效果。 .three-d { color: #fff; background-color: #f1c40f; text-shadow: -2px 2px 2px rgb(209 132 0), -2px 2px 2px rgb(209 132 0), -2px 2px 2px rgb(209 132 0), -2px 2px 2px rgb(209 132 0), -2px 2px 2px rgb(209 132 0), -2px 2px 2px rgb(209 132 0); box-shadow: 0px 15px 0px 0px #f39c12; transition: all .5s; } .three-d:hover { background-color: #fcdc5e; } .three-d:active { transform: translate(0,4px); box-shadow: 0px 1px 0px 0px #f39c12; } 复制代码 结语以上就是本期的内容，纯属娱乐。 如有纰漏，欢迎指出！ |
【本文地址】
公司简介
联系我们