CSS3实现发光按钮效果动画

在平时看到抽奖，或者一些活动内容页面，我们经常会看到一些发光效果的按钮，视觉上引导用户去点击，这种效果主要是利用css3的动画效果去实现，关键帧放大元素尺寸和改变元素的不透明度，还有就是渐变拉伸去设置对应的按钮渐变。

效果如下：

css3实现发光按钮效果

background-image: linear-gradient(to bottom right, #ef1212, #ff9800)

@keyframes spread {from {width: 120px;height: 120px;opacity: 1/* transform: scale(1); */}to {width: 140px;height: 140px;opacity: 0;/* transform: scale(1.5); */}}

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>html,body {width: 100%;height: 100%;margin: 0;padding: 0;position: relative;}.border {width: 120px;height: 120px;background-color: #ff9800;border-radius: 50%;position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;animation: spread linear 1.5s infinite;}.border2 {width: 120px;height: 120px;background-color: #ff9800;border-radius: 50%;position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;animation: spread2 linear 3s infinite;}.draw {width: 100px;height: 100px;line-height: 100px;text-align: center;font-size: 18px;font-weight: bolder;color: #ffffff;border-radius: 50px;cursor: pointer;/* position: absolute; *//* left: 0;top: 0;right: 0;bottom: 0; *//* margin: 10px auto; */position: fixed;top: calc(50% - 50px);left: calc(50% - 50px);background-image: linear-gradient(to bottom right, #ef1212, #ff9800)}@keyframes spread {from {width: 120px;height: 120px;opacity: 1/* transform: scale(1); */}to {width: 140px;height: 140px;opacity: 0;/* transform: scale(1.5); */}}@keyframes spread {from {width: 120px;height: 120px;opacity: 1/* transform: scale(1); */}to {width: 140px;height: 140px;opacity: 0;/* transform: scale(1.5); */}}</style>
</head><body><div class="border"></div><div class="border2"></div><div class="draw">参与抽奖</div></body></html>

CSS3实现发光按钮效果动画相关推荐

php实现动态按钮效果,HTML_很酷的CSS发光按钮实现方法，用CSS3实现的发光按钮效果，虽 - phpStudy...
很酷的CSS发光按钮实现方法用CSS3实现的发光按钮效果,虽然只能在safari 4和chrome中才能看到最终效果,但我们还是能享受到css3带给我们的美好憧憬. 对每一个按钮,所作的只需三件事: ...
汉堡式折叠html,纯CSS3菜单汉堡包按钮变形动画特效
这是一款非常有趣的纯CSS3菜单汉堡包按钮变形动画特效.该特效共有9种不同的按钮变形动画效果,这些效果都是使用CSS3帧动画完成的,效果非常的酷. 制作方法 HTML结构该按钮变形动画使用嵌套的H ...
php3d按钮,css3实现3D按钮效果的文章推荐
使用css3代码来制作3D按钮效果,这是一个系列的3D按钮制作效果,制作方法是老套(万变不离其中),但其中色彩的调各非常不错,因为很多效果在PS中制作是容易,特别对于设计师来说更容易,但对于一名cod ...
用css3实现ps蒙版效果+动画
说实话,css3越来越强大,使用css也可以做越来越多意想不到的效果. 今天,见到有人用css3实现了ps的蒙版效果,如下所示: 实现原理这个动画,其实也并不复杂.它使用background-cli ...
7款外观迷人的HTML5/CSS3 3D特效按钮特效
下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效,有几个还挺实用的,分享给大家. 1.CSS3超酷3D弹性按钮按钮实现非常简单之前我们分享过几款不错的CSS3 3D立体按钮,比如 ...
美妙的 CSS3 动画！一组梦幻般的按钮效果
今天给大家带来的是五款梦幻般的动画按钮效果.下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...
html边框炫酷效果,6种炫酷的CSS3按钮边框动画特效_html/css_WEB-ITnose
这是一款效果非常炫酷的CSS3按钮边框动画特效.这组按钮边框动画共有6种不同的效果.当鼠标滑过按钮的时候,按钮的边框会以不同的方式进行各种动画,效果非常的炫酷. 在线预览源码下载使用方法 HTML ...
鼠标动效html,5种纯CSS3鼠标hover按钮动画效果
这是一款鼠标hover按钮动画特效.该特效共有5种hover动画效果,它们在结构布局上使用flex来进行布局,并通过css transition来实现动画效果. 使用方法 HTML结构该按钮特效使用 ...
html 鼠标图标做成动画效果,纯css3实现的鼠标悬停动画按钮
今天给大家带来一款纯css3实现的鼠标悬停动画按钮.这款按钮鼠标经过前以正方形的形式,当鼠标经过的时候以动画的形式变成圆形.效果图如下: 实现的代码. html代码: 复制代码代码如下: css3代 ...

CSS3实现发光按钮效果动画

CSS3实现发光按钮效果动画相关推荐

最新文章

热门文章