美妙的 CSS3 动画!一组梦幻般的按钮效果
今天给大家带来的是五款梦幻般的动画按钮效果。下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果。
温馨提示:为保证最佳的效果,请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。
这些精美的效果用到了 CSS3 border-radius(圆角)、box-shadow(阴影)、transition(变形)、transform(转换)和 animation(动画)等特性,公共部分的代码精简以后如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | 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 . 5 s cubic-bezier(. 32 , 0 ,. 15 , 1 ); } section > div:hover { cursor : none ; /*悬停时恢复原始大小*/ transform: scale( 1 ); /*鼠标悬停时根据自定义的贝塞尔时间曲线做动画变换效果*/ transition: transform . 2 s 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(动画)。
为了便于阅读和学习,效果一的代码精简后如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | .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 . 24 s linear infinite, particle-positon . 48 s 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 ; } } |
作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
2013-08-12 小伙伴们惊呆了!10行 JavaScript 实现文本编辑器
2013-08-12 Glyphish – 精心打造的 iPhone & iPad 应用程序图标
2012-08-12 经典网页设计:应用四边形的16个超酷的国外网站
2011-08-12 分享30个优秀的iPad界面设计案例
2011-08-12 最新50个不错的免费PSD素材下载(上篇)
2010-08-12 你可能不知道的10个JavaScript小技巧