今天给大家带来的是五款梦幻般的动画按钮效果。下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!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. UIView动画

    UIView动画 一.commitAnimations方式使用UIView动画 1.commitAnimations方式使用UIView动画 [UIView beginAnimations:@&quo ...

  2. bat运行时不弹出那个黑框框的完美解决方案

    批处理文件运行时经常出现讨厌的黑框,以下的方法,即可以解决 保存为run.vbs运行即可:   set ws = createobject("wscript.shell") ws. ...

  3. 使用Inno Setup函数修改文件内容

    0.inno打开文件操作&字符串操作所需函数原型及解释 function LoadStringsFromFile(const FileName: String; var S: TArrayOf ...

  4. testMarkDown

    title: git常用命令 date: 2015-10-27 10:28:25 categories: git tags: git 添加 SSH 公钥 Windows 平台中,可以使用 Git Ba ...

  5. java多线程(精华版)

    在 Java 程序中使用多线程要比在 C 或 C++ 中容易得多,这是因为 Java 编程语言提供了语言级的支持.本文通过简单的编程示例来说明 Java 程序中的多线程是多么直观.读完本文以后,用户应 ...

  6. SQLSERVER2008新增的审核/审计功能

    SQLSERVER2008新增的审核/审计功能 很多时候我们都需要对数据库或者数据库服务器实例进行审核/审计 例如对失败的登录次数进行审计,某个数据库上的DDL语句进行审计,某个数据库表里面的dele ...

  7. 集合的扩展方法ForEach的使用

    List<, , , , }; list.ForEach(p => Console.WriteLine(p)); 或者 List<, , , , }; list.ForEach(p ...

  8. Windows Server 2008更改远程桌面端口号

    windows 2008远程桌面端口默认是用的是3389端口,但是由于安全考虑,经常我们安装好系统后一般都会考虑把原来的3389端口更改为另外的端口. 更改过程: 打开注册表: 运行regedit 找 ...

  9. CentOs笔记

    系统 CentOs7,最小安装,使用 Ext4,/ ,/boot,/swap 使用标准分区,另一个分区做为数据分区,使用 LVM. 更新: http://mirrors.163.com/.help/c ...

  10. Homework 1 -- The beginning

    我是在北京在读的一位大学生.如果问我学的什么专业,我会用一个冷笑话回答你:我精通多种语言,在老家我说家乡话:跟北京我讲普通话:跟老外就玩English:我跟机器得敲代码.现在你知道我学的就是计算机了. ...