江苏省工程建设招标网站,网页设计网站建设招聘,商丘河南网站建设,网站做app开发工具也是在制作项目时发现的#xff0c;找了很多demo#xff0c;一点一点测试#xff0c;发现这个按钮也是非常的炫酷 用到了几个属性#xff0c;keyframes#xff0c;::after,::before
先了解一下他们分别都是干嘛的
keyframes
关键帧 keyframes at-rule 规则通过在动画序… 也是在制作项目时发现的找了很多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 langen-usheadmeta charsetutf-8meta nameviewport contentwidthdevice-widthtitlecss——button/titlestyle
.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/headbodybutton typebutton classdialog_butstrong按钮/strongdiv iddialog_containerdiv iddialog_content_container/div/divdiv iddialog_glowdiv classdialog_circle/divdiv classdialog_circle/div/div/button/body/html
