炫彩的按钮渐变动画—

炫彩的按钮渐变动画——css3

效果（是动态的）：

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;
}body {background: #000;
}.light-btn {text-decoration: none;position: absolute;left: 50%;top:50%;transform: translate(-50%, -50%);font-size: 24px;background: linear-gradient(90deg, #ff9933, #ff5500, #ff0a01, #ff9933);background-size: 400%;width: 400px;height: 100px;line-height:100px;color: #fff;text-align: center;text-transform: uppercase;border-radius: 50px;z-index: 1;
}.light-btn:hover::before,
.light-btn:hover {animation: sun 4s infinite;
}.light-btn::before {content: '';position: absolute;left: -5px;right: -5px;top: -5px;bottom: -5px;background: linear-gradient(90deg, #ff9933, #ff5500, #ff0a01, #ff9933);background-size: 400%;border-radius: 50px;filter: blur(10px);z-index: -1;
}@keyframes sun {100%{background-position: -400% 0;}
}</style>
</head>
<body><button class="light-btn">button</button>
</body>
</html>

粘贴即用！

炫彩的按钮渐变动画——css3相关推荐

炫彩流光按钮 CSS + HTML
炫彩流光按钮写在前面你若要喜爱你自己的价值,你就得给世界创造价值.--歌德效果图三个绝美的样例 HTML代码 <div class="box"><butt ...
仿当当App首页按钮渐变动画效果
昨天群里有个朋友说当当App首页顶部的那几个按钮渐变动画效果如何实现.然后果断安装了当当App,打开查看下是什么样的动画.来看下当当App首页: 可以看到当我滑动一些距离后,顶部三个浅红色的按钮从右边 ...
炫彩流光按钮 html+css
话不多,先上效果: 简介: 用基础css做一个有一点炫酷的流光按钮,不止按钮,只要是盒子就行. 具体步骤: 1.先定义一个盒子当做按钮,如我就用a标签: <body><a href= ...
炫彩渐变流体元素PSD分层海报模板，耍酷就选它做背景！
在流动的世界里, 邂逅最美的意外. 以现代抽象画的重叠融混手法, 造出海浪的汹涌澎湃, 晚霞的瑰丽绚烂. 液体流动的自然效应, 正如海浪的波涛无时无刻的变化一样, 非人力所控. 流体绘画无需经典的 ...
炫彩渐变液态海报设计，太skr了！
在平面海报设计中有很多不同风格及表现方式,其中液态效果的海报设计十分常见,通常会选择用较为丰富的颜色进行渐变,液化或者扭曲的形式去呈现,画面的视觉效果大多以抽象概念呈现. 虽然很多人都表示看不懂,但大 ...
炫彩流光文字 html+css
效果: 实现: 1. 定义标签,各自作用看后面解析: <main><h1 class="txt">live on.</h1><h1 cla ...
html隐藏汉堡按钮,12种汉堡包图标按钮变形动画特效
插件描述:这是一款使用jquery和css3制作的炫酷汉堡包按钮变形动画特效.这组特效共12种动画效果,分别是在用户点击汉堡包按钮之后,汉堡包按钮以不同的方式执行变形动画. 图标按钮变形说明这是一款 ...
Canvas跟随鼠标炫彩小球
跟随鼠标炫彩小球 canvas没有让我失望,真的很有意思实现效果超级炫酷实现原理创建小球给小球添加随机颜色,随机半径鼠标移动通过实例化,新增小球通过调用给原型新增的方法,来实现小球的动画 ...
平面设计背景素材|打造超酷的炫彩光束光效海报！
光效素材背景的作用就是瞬间让我们的设计变的高档.大气.上档次. 适用于高清背景特效.特效合成.平面海报等设计. 更多素材到素材路上 www.sucai63.com 必将带来惊喜效果! 星光点缀数码线条 ...
炫彩流行艺术海报，品味不止一点点
炫彩流行艺术海报可以利用这些海报设计作为你自己设计项目的灵感,或者只是坐下来欣赏这些神奇海报的美丽. 入行的设计师可以用在各种设计中,有发现国外那些艺术海报特别喜欢用这种元素,就觉得, 他肯定表达了 ...

炫彩的按钮渐变动画——css3

炫彩的按钮渐变动画——css3

炫彩的按钮渐变动画——css3相关推荐

最新文章

热门文章