<!DOCTYPE html>

<html>

<head>

<title>Crayon Animate</title>

<style type="text/css">

body {

    background-color: #747474;

}

.yam-don-button {

    width: 300px;

    margin-top: 100px!important;

}

.yam-don-button {

    position: relative;

    display: block;

    background: #fff;

    border: none;

    border-radius: 100px;

    box-shadow: 0 24px 50px -20px rgba(0,0,0,.5);

    margin: 15px auto 0;

    min-width: 250px;

    line-height: 60px;

    font-size: 24px;

    text-decoration: none;

    text-align: center;

    vertical-align: middle;

    color: #fff;

    white-space: wrap;

    z-index: 2;

    cursor: pointer;

}

.yam-don-heart {

    position: relative;

    vertical-align: top;

    z-index: 1;

    display: inline-block;

    margin-right: 15px;

    color: #fff;

    font-size: 33px;

    text-shadow: none;

}

.btn-sponsor-red .yam-don-heart:before {

    background: linear-gradient(90deg,#f36,#61c2f0,#f441a5,#ffeb3b,#f36);

    background-size: 500%;

    content: "";

    position: absolute;

    top: 15px;

    left: -3px;

    right: 0;

    bottom: 15px;

    z-index: -1;

    filter: blur(10px);

    animation: crayonAnimate 28s linear infinite;

}

.yam-don-button:before {

    display: block;

    background: linear-gradient(90deg,#f36,#61c2f0,#f441a5,#ffeb3b,#f36);

    background-size: 500%;

    border-radius: 100px;

    content: "";

    position: absolute;

    top: -2px;

    left: -2px;

    right: -2px;

    bottom: -2px;

    z-index: -1;

    opacity: .8;

    filter: blur(10px);

    animation: crayonAnimate 28s linear infinite;

    transition: all .35s;

}

.btn-sponsor-blue:before {

    background: linear-gradient(90deg,#00a2e4,#a7cd6b,#00a2e4,#a7cd6b,#00a2e4);

    background-size: 500%;

}

.yam-don-button:hover:before {

    top: -8px;

    left: -8px;

    right: -8px;

    bottom: -8px;

    opacity: 1;

    animation: crayonAnimate 8s linear infinite;

}

@keyframes crayonAnimate {

    from {background-position:0}

    to {background-position:500%}

}

</style>

</head>

<body>

<a href="#" class="yam-don-button btn-sponsor-blue" target="_blank">

    <span class="yam-don-heart">♥</span>立即点赞

</a>

<a href="#" class="yam-don-button btn-sponsor-red" target="_blank">

    <span class="yam-don-heart">♥</span>立即点赞

</a>

</body>

</html>

CSS3 彩色渐变动效按钮的更多相关文章

  1. 纯CSS3彩色边线3D立体按钮制作教程

    原文:纯CSS3彩色边线3D立体按钮制作教程 今天我们来分享一款利用纯CSS3实现的3D按钮,这款按钮的一个特点是有彩色的边线,这让整个按钮显得比较多姿多彩,没那么枯燥无趣.本文不仅可以让大家看到演示 ...

  2. 前端必须收藏的CSS3动效库！！！

    现在的网站和App的设计中越来越重视用户体验,而优秀的动效则能使你的应用更具交互性,从而吸引更多用户的使用. 如果你对CSS3中定义动效还不熟练,或希望采用更加简单直接的方式在你的应用中引入动效的话, ...

  3. 【总结】前端必须收藏的CSS3动效库！！！

    现在的网站和App的设计中越来越重视用户体验,而优秀的动效则能使你的应用更具交互性,从而吸引更多用户的使用. 如果你对CSS3中定义动效还不熟练,或希望采用更加简单直接的方式在你的应用中引入动效的话, ...

  4. css3常用动效以及总结

    (迁移自旧博客2017 08 06) CSS3 文本效果: box-shadow:盒子阴影,可以给卡片添加提高美化效果.可广泛应用于内容展示页面. <div class="card&q ...

  5. 超多的CSS3圆角渐变网页按钮

    <!DOCTYPE html><head><title>超多的CSS3圆角渐变按钮</title><style type="text/c ...

  6. 从浏览器渲染层面解析css3动效优化原理

    引言 在h5开发中,我们经常会需要实现一些动效来让页面视觉效果更好,谈及动效便不可避免地会想到动效性能优化这个话题: 减少页面DOM操作,可以使用CSS实现的动效不多出一行js代码 使用绝对定位脱离让 ...

  7. 玩转HTML5移动页面(动效篇)

    原文:http://www.grycheng.com/?p=458 作为一名前端,在拿到设计稿时你有两种选择: 1.快速输出静态页面 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有 ...

  8. 玩转HTML5移动页面（动效篇）

    为一名前端,在拿到设计稿时你有两种选择: 快速输出静态页面 加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有志向的前端,当然是选2啦!可是需求时间又很短很短,怎么办呢? 这次就来谈谈一些 ...

  9. 转：玩转HTML5移动页面(动效篇)

    作为一名前端,在拿到设计稿时你有两种选择: 1.快速输出静态页面 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有志向的前端,当然是选2啦!可是需求时间又很短很短,怎么办呢? 这次就 ...

随机推荐

  1. python 字符串匹配算法设计

  2. (四)IO流之InputStream和OutputStream

    InputStream:定义了字节输入流的抽象类 OutputStream:定义了字节输出流的抽象类;该类所有方法返回void值 FileInputStream:继承InputStream FileO ...

  3. gpu命令cuda命令

    # device = torch.device("cuda:0" if torch.cuda.is_available() else "cpu")os.envi ...

  4. day4_python-之装饰器、迭代器、生成器

    一.装饰器 1.为何要用装饰器 #开放封闭原则:对修改封闭,对扩展开放 2. 什么是装饰器 装饰器他人的器具,本身可以是任意可调用对象,被装饰者也可以是任意可调用对象. 强调装饰器的原则:1 不修改被 ...

  5. springboot对shiro进行mock单元测试

    环境:junit-5.Spring5.0.x.Spring Boot 2.0.x 以下是用来权限测试的接口: @ApiOperation("[可接入]分页查询管理员") @ApiR ...

  6. UITextField 自定义clearButton背景色

    一个鸡贼的解决方案,适用于自定义clearButton的样式,直接修改背景图即可 1. 实现基于UITextField的category并添加如下方法及声明 - (void)setLightStyle ...

  7. 《C程序设计语言》笔记（三）

    六:结构 1:结构体声明中,比如: struct point{ int x; int y; }; struct后面的名字是可选的,称为结构标记.结构成员.结构标记和普通变量可以采用相同的名字,它们之间 ...

  8. MapReduce数据流-Mapper

  9. oracle函数 NLS_INITCAP(x[,y])

    [功能]返回字符串并将字符串的第一个字母变为大写,其它字母小写; [参数]x字符型表达式 [参数]Nls_param可选, 查询数据级的NLS设置:select * from nls_database ...

  10. iptables 通讯端口转接(Port Forwarding)

    是一种特殊的DNAT操作,其作用是让一部电脑(通常是防火牆)担任其它电脑的代理伺服器(proxy).防火牆接收外界网络接传给它自己的包,然后改写包的目的地位址或目的端口,使其像是要送到內部网路其它电脑 ...