html+css 炫彩流光按钮

先上效果

上代码通俗易懂

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {display: 0;margin: 0;}html,body {height: 100%;background-color: black;}/* 设置按钮样式*/.top_btn {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);/*设置渐变颜色*/background: linear-gradient(45deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);background-size: 400%;font-size: 24px;color: #fff;width: 400px;text-align: center;line-height: 100px;height: 100px;border-radius: 50px;/* 变为大写字母 */text-transform: uppercase;z-index: 1;}a::before {position: absolute;content: '';top: -5px;left: -5px;right: -5px;bottom: -5px;background: linear-gradient(45deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);border-radius: 50px;/* 滤镜 */filter: blur(20px);z-index: -1;}a:hover {/* infinite无限循环 */animation: sun 8s infinite;}/* 伪元素动画 */a:hover::before {animation: sun 8s infinite;}@keyframes sun {100% {background-position: -400% 0;}}</style>
</head><body><!-- <div class="top"> --><a class="top_btn">按钮</a><!-- </div> -->
</body></html>

html+css 炫彩流光按钮相关推荐

炫彩流光按钮 CSS + HTML
炫彩流光按钮写在前面你若要喜爱你自己的价值,你就得给世界创造价值.--歌德效果图三个绝美的样例 HTML代码 <div class="box"><butt ...
炫彩流光按钮 html+css
话不多,先上效果: 简介: 用基础css做一个有一点炫酷的流光按钮,不止按钮,只要是盒子就行. 具体步骤: 1.先定义一个盒子当做按钮,如我就用a标签: <body><a href= ...
炫彩流光文字 html+css
效果: 实现: 1. 定义标签,各自作用看后面解析: <main><h1 class="txt">live on.</h1><h1 cla ...
炫彩流光CSS特效按钮
炫彩流光CSS特效按钮教程地址:原文地址(YouTube) B站教程:原文转载(bilibili) 两个视频的内容相同,第二个为转载效果图 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存 ...
Canvas跟随鼠标炫彩小球
跟随鼠标炫彩小球 canvas没有让我失望,真的很有意思实现效果超级炫酷实现原理创建小球给小球添加随机颜色,随机半径鼠标移动通过实例化,新增小球通过调用给原型新增的方法,来实现小球的动画 ...
HTML5+CSS3小实例：炫彩的流光按钮
HTML+CSS3实现炫彩的流光按钮,是不是有点小好看,关键是代码还简单,遇到这样的按钮,我都不忍点击,就一直悬停在上面,静静欣赏它的美. 效果: <!DOCTYPE html> < ...
HTML+CSS制作炫彩的数字时钟
HTML+CSS制作炫彩的数字时钟效果图如下: HTML部分代码如下: <!DOCTYPE html> <html lang="zh-Hans">< ...
Web前端——用CSS的常用样式制作一个炫酷的按钮
文章目录笔记:CSS的常用样式炫酷按钮效果实现笔记:CSS的常用样式边框以及弧度样式 border-width:边框的线条宽度. border-style:边框的样式,例如 solid实现 d ...
炫彩界面库v1.4.2-360安全卫士v8.5-UI设计器使用教程
炫彩界面库-UI设计器使用教程,该教程以360安全卫士为例. 先上一张最终程序截图文件相对路径 -说明文件的相对路径为UI设计器的路径;例如在UI设计器目录中有个UI项目文件夹[MyProject ...
android 呼吸灯权限_小米新机搭载炫彩呼吸灯酷到爆；三星顶级旗舰Note 10正式官宣...
各位,早上好!即日起,魅族Meizu Pay京津冀互联互通卡免费开卡,你期待吗? 1,苦等436天!国产超优秀ROM终于换代 7月2日,有网友曝光了魅族Flyme 8的海报图片,图片显示:你所期待的我 ...

html+css 炫彩流光按钮

html+css 炫彩流光按钮相关推荐

最新文章

热门文章