今天给大家带来的是五款梦幻般的动画按钮效果。下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果。

  温馨提示:为保证最佳的效果,请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。

源码下载     在线演示

  这些精美的效果用到了 CSS3 border-radius(圆角)、box-shadow(阴影)、transition(变形)、transform(转换)和 animation(动画)等特性,公共部分的代码精简以后如下:

section > div {
display: inline-block;
position: relative;
width: 200px;
height: 200px;
margin: 0px auto;
/*对于正方形元素border-radius设置为50%刚好变成圆形*/
border-radius: 50%;
/*宽度为10px的、不透明度为0.7的黑色边框效果*/
border: 10px solid hsla(0,0%,0%,.7);
/*通过边框阴影实现立体按钮效果,inset是内阴影效果*/
box-shadow: inset 0 15px 15px -5px hsla(0,0%,100%,.7),
inset 0 -5px 10px 3px hsla(0,0%,0%,.6),
0 8px 10px 2px hsla(0,0%,0%,.3);
background-position: center;
/*初始缩放0.66倍*/
transform: scale(.66);
/*在失去焦点时根据自定义的贝塞尔时间曲线做动画变换效果*/
transition: transform .5s cubic-bezier(.32,0,.15,1);
} section > div:hover {
cursor: none;
/*悬停时恢复原始大小*/
transform: scale(1);
/*鼠标悬停时根据自定义的贝塞尔时间曲线做动画变换效果*/
transition: transform .2s cubic-bezier(.32,0,.15,1);
}

  上面的代码中用到了贝塞尔曲线,在数学的数值分析领域中,贝塞尔曲线又称贝赛尔曲线(Bézier曲线)是电脑图形学中相当重要的参数曲线。更高维度的广泛化贝塞尔曲线就称作贝塞尔曲面,其中贝塞尔三角是一种特殊的实例。

  贝塞尔曲线于1962年,由法国工程师皮埃尔·贝塞尔(Pierre Bézier)所广泛发表,他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由Paul de Casteljau于1959年运用de Casteljau算法开发,以稳定数值的方法求出贝塞尔曲线。想更加深入的了解贝塞尔曲线可以到维基百科了解:贝塞尔曲线

  效果一(Praticle)使用了 CSS3 radial-gradient(径向渐变或者放射性渐变,另外一种是线性渐变)、repeating-radial-gradient(重复渐变)以及 CSS3 Animation(动画)。

  为了便于阅读和学习,效果一的代码精简后如下:

.particle {
background-size: 12px 12px;
background-color: #000;
/*前面公共样式部分box-shadow产生的高亮效果太强,这里重新配置*/
box-shadow: inset 0 15px 15px -5px hsla(0,0%,100%,.25),
inset 0 -5px 10px 3px hsla(0,0%,0%,.6),
0 8px 10px 2px hsla(0,0%,0%,.3);
/*使用径向渐变和重复渐变来实现背景图片效果*/
background-image: radial-gradient( #555 0px, hsla(0,0%,0%,0) 2px, hsla(0,0%,0%,0) 24px),
repeating-radial-gradient( white 0px, black 2px, black 48px);
} .particle:hover {
/*鼠标悬停的时候执行particle-size和particle-positon两个动画效果*/
animation: particle-size .24s linear infinite,
particle-positon .48s linear infinite alternate;
} @keyframes particle-size {
/*这个名为particle-size的关键帧用来产生背景尺寸变化动画效果*/
from { background-size: 6px 6px, 12px 12px; }
to { background-size: 12px 12px, 24px 24px; }
} @keyframes particle-positon {
/*这个名为particle-positon的关键帧用来产生背景位置变化动画效果*/
from { background-position: 60px, 60px; }
to { background-position: 140px, 140px; }
}

源码下载    在线演示

您可能感兴趣的相关文章

本文链接:神奇的 CSS3 动画!一组梦幻般的按钮效果

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

美妙的 CSS3 动画!一组梦幻般的按钮效果的更多相关文章

  1. 用CSS3动画特效实现弹窗效果

    提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...

  2. CSS3动画中的animation-timing-function效果演示

    CSS3动画(animation)属性有如下几个: 属性 值 说明 animation-name name 指定元素要使用的keyframes名称 animation-duration time(ms ...

  3. css3动画实现伪弹幕效果

    如图所示: 效果还可以直接用麦唱APP把一首歌分享到微信里面看到,方法类似全民K歌的方法,都是用css3动画实现的, 代码如下:(这是我做真实效果前的一个dome) 直接粘代码就可以看到效果,里面有两 ...

  4. CSS3动画实现高亮光弧效果,文字和图片(一闪而过)

    前言 好久没有写博客啦,高亮文字和图片一闪而过的特效,用CSS3来写 先看文字吧, 就上代码了 .shadow { /* 背景颜色线性渐变 */ /* 老式写法 */ /* linear为线性渐变,也 ...

  5. css3动画(animation)效果3-正方体合成

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. css3动画(animation)效果1-漂浮的白云

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. css3动画(animation)效果2-旋转的星球

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 使用CSS3制作漂亮的按钮

    我给大家介绍一下如何使用CSS3来制作一个圆角阴影.渐变色的漂亮的按钮,它不需要任何图片和javascript脚本,只需要CSS3就可以轻松实现按钮效果,并且可以适用于任意HTML元素,想div,sp ...

  9. wow.js让css3动画变动更有趣(滚动页面动画模拟懒加载特效)

    CSS3的出现给网站页面增加了活力,网站增色不少,有这么小小的一款插件就能做出很多动画效果. 最重要的是它:简单易用.轻量级.无需 jQuery......他就是wow.js 地址:https://d ...

随机推荐

  1. STC12C5A60S2笔记2(存储)

    STC12C5A60S2单片机分为4个物理上独立的存储区域: 1. 程序flash存储器(60KB) 程序Flash存储器用以存储用户程序及数据.单片机复位后默认从0000H单元开始执行指令. 1) ...

  2. Python自动化测试(1)-自动化测试及基本技术手段概述

    生产力概述 在如今以google为首的互联网时代,软件的开发和生产模式都已经发生了变化, 在<参与感>一书提到:某位从微软出来的工程师很困惑,微软在google还有facebook这些公司 ...

  3. flume 1.4的介绍及使用示例

    flume 1.4的介绍及使用示例 本文将介绍关于flume 1.4的使用示例,如果还没有安装flume的话可以参考:http://blog.csdn.net/zhu_xun/article/deta ...

  4. 补充 作业八:团队项目——Alpha阶段项目总结 补充

    游戏界面: 单一.无背景图片 加入了背景 游戏结束: 无变化 无变化 游戏记录 无 加入数据库:有数据记录! 游戏初始化: 无 加入多种模式 此次任务后的总结: 经过上一次的答辩,以及认真观看了其他组 ...

  5. [.net 面向对象编程基础] (22) 事件

    [.net 面向对象编程基础] (22)  事件 事件(Event)是学习.net面向对象编程很重要的一部分,在学习事件之前,我们实际上已经在很多地方使用了事件,比如控件的click事件等,这些都是. ...

  6. 如何开始DDD(完)

    连续写了两篇文章,这一篇我想是序的完结篇了.结合用户注册的例子再将他简单丰富一下.在这里只添加一个简单需求,就是用户注册成功后给用户发一封邮件.补充一下之前的代码 public class Domai ...

  7. InputStream与InputStreamReader的区别

    InputStream是字节流,多用于读取二进制数据 InputStreamReader是字符流,多用于读取文本文件.有不同的编码方式,如utf8等.可以在构造的时候指定编码方式. 例如,两者都有一个 ...

  8. PMO到底什么样?(2)

    接上一篇,继续聊一聊PMO到底什么样. 交付功能,8大典型责任 1监控.评定和报告 项目办理单位从交付的视点必定要有监控评定.每个项目在要害的期间上它的进展是不是跟按期的相同:是不是有要害的专家在要害 ...

  9. EF架构~linq to entity的随机排序问题

    回到目录 对于从linq to sql迁移过来的开发者,对随机排序不会感到陌生,直接为datacontext添加一个方法再配合反射就可以实现随机排序了,代码如下: /// <summary> ...

  10. [Java面试十二]数据库概念相关

    1. 什么是存储过程?它有什么优点? 答:存储过程是一组予编译的SQL语句,它的优点有:     允许模块化程序设计,就是说只需要创建一次过程,以后在程序中就可以调用该过程任意次.     允许更快执 ...