站外推广营销方案网站顶部广告图片
也是在制作项目时发现的，找了很多demo，一点一点测试，发现这个按钮也是非常的炫酷
用到了几个属性，@keyframes，::after,::before
先了解一下他们分别都是干嘛的
@keyframes
关键帧 @keyframes at-rule 规则通过在动画序列中定义关键帧（或 waypoints）的样式来控制 CSS 动画序列中的中间步骤。和 转换（transition）相比，关键帧 keyframes 可以控制动画序列的中间步骤。
怎么使用关键帧：
要使用关键帧，先创建一个带名称的 @keyframes 规则，以便后续使用 animation-name 属性将动画同其关键帧声明匹配。每个 @keyframes 规则包含多个关键帧，也就是一段样式块语句，每个关键帧有一个百分比值作为名称，代表在动画进行中，在哪个阶段触发这个帧所包含的样式。
::after
CSS伪元素::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。
他的语法格式：
element:after { style properties } /* CSS2 语法 */element::after { style properties } /* CSS3 语法 */
::after表示法是在CSS 3 中引入的，::符号是用来区分[伪类](/zh-CN/CSS/Pseudo-classes)和伪元素的。支持 CSS3 的浏览器同时也都支持 CSS2 中引入的表示法:after`。
::before
在css中，::before 是一个伪类元素，代表生成的内容元素，表示相应元素的可抽象样式的第一个子元素，即：所选元素的第一个子元素。
利用::before可以把需插入的内容插入到元素的其他内容之前，并且默认内联显示。::before需要使用content属性来指定内容的值。
就比如：在链接前面加一个星星等..
a::before{
content:"★"
}好了就先这样，先看一下今天的主题：
按钮实现效果：
整体代码如下：
<!DOCTYPE html>
<html lang="en-us"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>css——button</title><style>
.dialog_but {display: flex;justify-content: center;align-items: center;width: 13rem;height: 3rem;background-size: 300% 300%;backdrop-filter: blur(1rem);border-radius: 5rem;transition: 0.5s;animation: gradient_301 5s ease infinite;border: double 4px transparent;background-image: linear-gradient(#212121, #212121), linear-gradient(137.48deg, #ffdb3b 10%,#FE53BB 45%, #8F51EA 67%, #0044ff 87%);background-origin: border-box;background-clip: content-box, border-box;
}#dialog_container {position: fixed;z-index: -1;width: 100%;height: 100%;overflow: hidden;transition: 0.5s;backdrop-filter: blur(1rem);border-radius: 5rem;
}strong {z-index: 2;font-family: 'Avalors Personal Use';font-size: 12px;letter-spacing: 5px;color: #FFFFFF;text-shadow: 0 0 4px white;
}#dialog_glow {position: absolute;display: flex;width: 12rem;
}.dialog_circle {width: 100%;height: 30px;filter: blur(2rem);animation: pulse_3011 4s infinite;z-index: -1;
}.dialog_circle:nth-of-type(1) {background: rgba(254, 83, 186, 0.636);
}.dialog_circle:nth-of-type(2) {background: rgba(142, 81, 234, 0.704);
}.dialog_but:hover #dialog_container {z-index: 1;background-color: #212121;
}.dialog_but:hover {transform: scale(1.1)
}.dialog_but:active {border: double 4px #FE53BB;background-origin: border-box;background-clip: content-box, border-box;animation: none;
}.dialog_but:active .dialog_circle {background: #FE53BB;
}#dialog_content_container {position: relative;background: transparent;width: 200rem;height: 200rem;
}#dialog_content_container::after {content: "";position: absolute;top: -10rem;left: -100rem;width: 100%;height: 100%;animation: animStarRotate 90s linear infinite;
}#dialog_content_container::after {background-image: radial-gradient(#ffffff 1px, transparent 1%);background-size: 50px 50px;
}#dialog_content_container::before {content: "";position: absolute;top: 0;left: -50%;width: 170%;height: 500%;animation: animStar 60s linear infinite;
}#dialog_content_container::before {background-image: radial-gradient(#ffffff 1px, transparent 1%);background-size: 50px 50px;opacity: 0.5;
}
/*控制按钮中 小点点的移动*/
@keyframes animStar {from {transform: translateY(0);}to {transform: translateY(-135rem);}
}
/*控制按钮中 小点点的旋转*/
@keyframes animStarRotate {from {transform: rotate(360deg);}to {transform: rotate(0);}
}@keyframes gradient_301 {0% {background-position: 0% 50%;}50% {background-position: 100% 50%;}100% {background-position: 0% 50%;}
}@keyframes pulse_3011 {0% {transform: scale(0.75);box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);}70% {transform: scale(1);box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);}100% {transform: scale(0.75);box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);}
}</style></head><body><button type="button" class="dialog_but"><strong>按钮</strong><div id="dialog_container"><div id="dialog_content_container"></div></div><div id="dialog_glow"><div class="dialog_circle"></div><div class="dialog_circle"></div></div></button></body></html>