金币一闪一闪的css,前端css怎么实现一闪一闪的特效？

最新推荐文章于 2023-02-26 22:16:49 发布
最新推荐文章于 2023-02-26 22:16:49 发布
阅读量450 收藏
点赞数
文章标签： 金币一闪一闪的css

现在，我有如下流程，我想让当前的某个位置mary特别显示。想让它一闪一闪地，有种呼吸的感觉，比如边框有特别的颜色也可以。如何实现呢？

例如，以下网页中http://www.17sucai.com/pins/demoshow/4863，这种当鼠标停在上面时候的 呼吸效果。

现在要它自动呼吸。如何实现。前端大神，求解决方法。

bVzl6K

demo

代码在这里了，纯css3,用动画实现

body {

background-color:  #151515;

}

.super-input input {

background: #222;

background: -webkit-linear-gradient(#333, #222);

background: -moz-linear-gradient(#333, #222);

background: -o-linear-gradient(#333, #222);

background: -ms-linear-gradient(#333, #222);

background: linear-gradient(#333, #222);

border: 1px solid #444;

border-radius: 5px 0 0 5px;

box-shadow: 0 2px 0 #000;

color: #888;

display: block;

float: left;

font-family: 'Cabin', helvetica, arial, sans-serif;

font-size: 13px;

font-weight: 400;

height: 40px;

margin: 0;

padding: 0 10px;

text-shadow: 0 -1px 0 #000;

width: 200px;

}

/*这里是重点*/

.super-input input:focus {

-webkit-animation: glow 800ms ease-out infinite alternate;

-moz-animation: glow 800ms ease-out infinite alternate;

-o-animation: glow 800ms ease-out infinite alternate;

-ms-animation: glow 800ms ease-out infinite alternate;

/*这里使用了呼吸动画*/

animation: glow 800ms ease-out infinite alternate;

background: #222922;

background: -webkit-linear-gradient(#333933, #222922);

background: -moz-linear-gradient(#333933, #222922);

background: -o-linear-gradient(#333933, #222922);

background: -ms-linear-gradient(#333933, #222922);

background: linear-gradient(#333933, #222922);

border-color: #393;

box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;

color: #efe;

outline: none;

}

/*以下定义动画帧*/

@-webkit-keyframes glow {

0% {

border-color: #393;

box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;

}

100% {

border-color: #6f6;

box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;

}

}

@-moz-keyframes glow {

0% {

border-color: #393;

box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;

}

100% {

border-color: #6f6;

box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;

}

}

@-o-keyframes glow {

0% {

border-color: #393;

box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;

}

100% {

border-color: #6f6;

box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;

}

}

@-ms-keyframes glow {

0% {

border-color: #393;

box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;

}

100% {

border-color: #6f6;

box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;

}

}

@keyframes glow {

0% {

border-color: #393;

box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;

}

100% {

border-color: #6f6;

box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;

}

}

hi，哥们，给你撸了一个，仅供参考

demo

只能借助JS实现，比如用jQuery

可以用css3动画的keyframes创建动画，用的时候用js添加绑定了动画的类。

<!DOCTYPE html>

<html>

<head>

<style>

.highlight

{

width:100px;

height:100px;

background:red;

animation:myfirst 5s;

animation-iteration-count: infinite;

}

@keyframes myfirst

{

0%   {background: red;}

25%  {background: yellow;}

50%  {background: blue;}

100% {background: red;}

}

</style>

</head>

<body>

<div class = "highlight"></div>

</body>

</html>

当然用js写也是可以的

css3 里的 animation 就可以做到，属性可以设置循环次数。请参考http://www.w3school.com.cn/cssref/pr_animation.asp

又或者js、jq也是可以实现的。

css :

.u-arrow img {

animation: start 1.5s infinite ease-in-out;

-moz-animation: start 1.5s infinite ease-in-out;

-webkit-animation: start 1.5s infinite ease-in-out;

-o-animation: start 1.5s infinite ease-in-out;

-ms-animation: start 1.5s infinite ease-in-out;

background-position: 0 -82px;

height: 14px;

left: 50%;

margin: -7px 0 0 -14px;

position: absolute;

top: 50%;

width: 24px;

}

@-webkit-keyframes start {

0%,30% {opacity: 0;-webkit-transform: translate(0,10px);}

60% {opacity: 1;-webkit-transform: translate(0,0);}

100% {opacity: 1;-webkit-transform: translate(0,-8px);}

}

@-moz-keyframes start {

0%,30% {opacity: 0;-moz-transform: translate(0,10px);}

60% {opacity: 1;-moz-transform: translate(0,0);}

100% {opacity: 1;-moz-transform: translate(0,-8px);}

}

@keyframes start {

0%,30% {opacity: 0;transform: translate(0,10px);}

60% {opacity: 1;transform: translate(0,0);}

100% {opacity: 1;transform: translate(0,-8px);}

}

html:

<a class="lr_btn u-arrow u-arrow-bottom" href="javascript:void(0);">

<img src="/images/btn01_arrow.png">

</a>

图片自己找个箭头

3431402c1bcafac7e7cfb291f3f55629.png

苏试试
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css3中实现摘取金币_CSS3新特性
weixin_32576389的博客
01-07 248
一、CSS3简介CSS3是CSS(层叠样式表)技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案。CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时间支持不同特性，这也让跨浏览器开发变得...
css金币动画_【续篇】2分钟做出金币飞舞到钱袋的效果
weixin_30970867的博客
01-01 1547
大家都知道，之前大部分的路径类动画都是采用 SVG 的方式来实现那第一个问题来了：复杂一些的线条动画如何生成呢？比如一些公司常用自己的吉祥物来作为 loading 背景图。有经验的同学应该会知道，可以通过工具(PS 或者AI)导出 SVG 路径。codePen 上有很多复杂的 path 动画，感兴趣可以搜索一下今天我们其实要解决的是很多养成类应用中特别核心的一个动画交互：金币飞舞到宝箱...
css3中实现摘取金币_Vue+CSS3实现转盘抽奖的示例代码
weixin_31444881的博客
12-23 217
最近有个转盘抽奖的需求，搜了一下现有的轮子，有的是用jQuery的动画函数实现的，有的是用canvas绘图然后再用高频率的setTimeout调用旋转方法，前者太老了没法简单移植到vue项目，后者感觉性能表现可能不会太好。也有一些用CSS动画的方案，设计了加速-匀速-减速三个动画，再计算偏转角度让三个动画尽可能无缝衔接，但我感觉绕了大远路，应该有更简单轻量的实现方案。个人更倾向于用transiti...
H5签到金币效果
鲸落
10-12 459
一、效果图 二、构想 使用CSS的animation来做动画移动效果 使用CSS的transform来做翻转效果 1. 知识点 1.1 transform属性 实例 div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -webkit-transform:rotate(7deg); /* Safari and Chrome */ } 参数 参数 解释 none 定义不进行转换。
css3实现闪光金币效果
leng0920的博客
03-16 678
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <style type="text/css"> *, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizi.
CSS实现的一闪而过的图片闪光效果
09-25
种当鼠标悬停时光泽一闪而过。十分的简单，但非常的漂亮。在重新设计网站版面时，我很想在我的logo上使用这种效果。
H5 CSS3 @keyframes 文字一闪一闪提示
04-26
在这个“文字一闪一闪提示”的例子中，我们将探讨如何使用`@keyframes`来制作一个简单的文字闪烁效果。 首先，`@keyframes`定义了一个动画序列，由一系列的关键帧组成，这些关键帧定义了元素在动画过程中的不同样式...
程序猿表白前端程序css文件之一
03-03
程序猿表白前端程序css文件之一
纯css3显示隐藏一个div特效的具体实现
09-25
显示隐藏一个div特效的方法有很多，下为大家介绍下使用纯css3是如何实现的，感兴趣的朋友可以参考下
css金币动画_用纯CSS3制作的金币（铜币 | 钱币）
weixin_39941792的博客
12-20 1111
CSS语言：CSSSCSS确定body {margin: 0;background: #262626;}span {font-family: "Montserrat", sans-serif;}.jump {animation: jump 1.5s infinite ease;}@keyframes jump {0% {top: 0;}50% {top: -40px;}100% {top: 0;}...
仿淘宝金币掉落撒落动画
09-09
仿淘宝金币掉落撒落动画，金币散落 动画 淘宝 金币掉落 ，值得研究！
html实现图片的闪烁效果,前端css怎么实现一闪一闪的特效？
weixin_39640904的博客
06-04 1065
代码在这里了，纯css3,用动画实现body {background-color: #151515;}.super-input input {background: #222;background: -webkit-linear-gradient(#333, #222);background: -moz-linear-gradient(#333, #222);background: -o-lin...
闪光css,css实现图片闪光效果
weixin_42356378的博客
08-04 3328
1.这个效果是看到京东商城上的一个下效果，原本的思路是用js控制一个图片在某张需要闪光的图片上重复出现，但是网上找了一些资料，竟然是用css写的，真是太帅了！！！2.原理：在需要闪光的图片前添加before属性；内容为空；宽为200px,高为100%，left：-150px,overflow:hiddden;background属性设置为渐变；颜色看自己需要；transform-skewX(-2...
html边框线怎么闪烁,闪烁特效边框代码
weixin_35715440的博客
06-18 731
另类闪动表格边框(3例)1.另类闪动表格边框代码:宽高可根据模块大小来修定align=centerbackground=http://image48.360doc.com/DownloadImg/2012/01/1209/20693228_3.jpgborder=0>bgColor=#000000>color=#99cc00>1.另类闪动表格边框代码:宽高可根据模块大小来修定2....
animation css3动画与CSS3 @keyframes担配使用创建往复平缓动画
weixin_30726161的博客
04-18 183
通过 @keyframes 规则，您能够创建动画。 创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。 在动画过程中，您能够多次改变这套 CSS 样式。 以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。 0% 是动画的开始时间，100% 动画的结束时间。 为了获得最佳的浏览器支持，您应该始终定义 0% 和 100%...
html边框js特效,JS实现表格的边框闪烁效果代码
weixin_28692153的博客
06-04 747
JS实现表格的边框闪烁效果JavaScript实现表格的边框闪烁效果，你可以看到表格的边框在不停的闪烁，颜色也是不停的变化，这里的颜色定义在JavaScript的数组中，修改方便，拷贝代码到你的网页中，就可以显示本效果。HTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"...
Javascript边框闪烁提示
cg20的专栏
09-08 3417
当我们提交表单的时候，有些字段是必填的。 但是如果用户提交的时候偏偏不填写就提交，这时我们一般都会弹出一个框来提醒用户。
js实现元素边框闪烁功能
weixin_30521649的博客
03-04 1213
<body> <input type="text" value="test" onclick="flash(this)"> </body> <script> function flash(elem){ var elem = typeof elem === 'string' ? document.getElementBy...
css实现图标闪烁（Element-UI el-badge标记组件为例）
Ctrl-a-c-v44220970的博客
02-26 3641
本文以Element-UI el-badge标记组件为例，实现el-badge图标的闪烁，其他html元素也可以使用此方法实现闪烁功能。实现闪烁功能，。
css 亮光一闪而过 的代码实现
最新发布
05-26
可以通过 CSS3 的 animation 属性来实现亮光一闪而过的效果。具体代码如下： ```css /* 定义一个 keyframe */ @keyframes flash { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } /* ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值