@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:"★"
}

好了就先这样，先看一下今天的主题：

按钮实现效果：

整体代码如下：

按钮的样式有点点多了，使用时可以封装成一个方法，或者封装一个单独的css页面，使用的时候将样式引用到要使用的页面中即可。

<!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>

纯css实现超炫酷的星空背景按钮相关推荐

纯CSS3实现超炫酷的萤火虫动画
纯CSS3实现超炫酷的萤火虫动画 120 人浏览发表回复今天要为大家带来一款很有意思的纯CSS3动画,这次我们要利用CSS3的一些动画属性来绘制一只闪闪发光的萤火虫,和之前分享的纯CSS3蚱蜢与纯 ...
particles超炫酷的粒子背景特效
话不多说先上一个demo效果图: 测试地址:https://codepen.io/VincentGarreau/pen/pnlso particlesJS 开源在Github上:https://git ...
php星空背景动态,纯CSS3炫酷3D星空动画特效
简要教程这是一款使用纯CSS3制作的炫酷3D星空动画特效.该特效中,以飞船向前快速移动为视角,所有的星星都快速的变大并向后移动,效果非常逼真. 使用方法 HTML结构该3D星空特效只使用一个元素 ...
纯CSS3炫酷3D星空动画特效
效果: 源码: <!DOCTYPE html> <html lang="zh"> <head><meta charset="UT ...
HTML+CSS+JavaScript 实现登录注册页面(超炫酷)
1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? 网页要求的总数量太多? 2.没有合适的模板?等等一系列问题.你想要解决的问题,在这篇博文中基本都能 ...
炫酷的css3动作源码,8 个超炫酷的纯 CSS3 动画及源码分享
在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3 ...
html5+css3满天星星音乐背景动画特效(超炫酷)
css3满天星星音乐背景动画特效 css3属性绘制唯美的满天星星和audio MP3音乐结合背景动画特效. 作品介绍 1.网页作品简介方面 :css3属性绘制唯美的满天星星和audio MP3音乐结合 ...
html舞动特效,7款纯CSS3实现的炫酷动画应用
原标题:7款纯CSS3实现的炫酷动画应用 HTML5确实非常强大,我们之前也分享过很多基于HTML5 Canvas的动画特效.但是你是否知道我们可以利用纯CSS制作一些很酷的动画效果?对,CSS3可以 ...
经典回顾超炫酷阅读效果3D Book使用方法
经典回顾超炫酷阅读效果3D Book使用方法现在有很多人都喜欢在电脑上看小说,而电脑上看小说基本都是以记事本TXT电子书形式阅读,看起来总是觉得没有书本的那种感觉:你是不是已经受够了使用记事本看小说 ...

纯css实现超炫酷的星空背景按钮