美妙的 CSS3 动画!一组梦幻般的按钮效果

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

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

本文来自【梦想天空(http://www.cnblogs.com/lhb25/)】

美妙的 CSS3 动画!一组梦幻般的按钮效果

时间: 2024-11-05 17:21:30

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

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

提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了. CSS3特殊效果 CSS3为用户添加了三个特殊效果的处理方式:过渡.动画.变化.当用户和界面元素交互时,使用这些特殊样式可大大改善用户的体验效果.这些效果直接由浏览器引擎处理,可以节省开销.尽管如此,它们也会耗费大量的处理能力,尤其是一些复杂的WEB页面上.即使是最基本的效果,也是如此.本篇的目的只是熟悉下这三种CSS处理效果,不推荐在实际系统中大篇幅使用. 温馨提示:请谨慎大篇幅使用这些

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

CSS3动画(animation)属性有如下几个: 属性 值 说明 animation-name name 指定元素要使用的keyframes名称 animation-duration time(ms.s) 指定动画时长 animation-timing-function linear.ease(默认).ease-in.ease-out.ease-in-out.cubic-bezier(n,n,n,n) 设置动画将如何完成一个周期 animation-delay time(ms.s) 设置动画启

CSS3动画常用贝塞尔曲线-效果演示

CSS与贝塞尔曲线 CSS3动画常用贝塞尔曲线实现更加自然,物理感的动画. 列举了一些常见的贝塞尔曲线数值,用于做动画的存档. .a1{ animation: stretch 1s cubic-bezier(0.39, 0.575, 0.565, 1) infinite; } .a2{ animation: stretch 1s cubic-bezier(0.55, 0.055, 0.675, 0.19) infinite; } .a3{ animation: stretch 1s cubic-

HTML5 - 用CSS3动画制作场景切换效果(移动,旋转,淡入淡出等)

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>HTML5-页面切换动画</title> 6 <link href="animations.css" rel="stylesheet"> 7 <script src="modernizr.custom.js&q

使用CSS3制作漂亮的按钮

我给大家介绍一下如何使用CSS3来制作一个圆角阴影.渐变色的漂亮的按钮,它不需要任何图片和javascript脚本,只需要CSS3就可以轻松实现按钮效果,并且可以适用于任意HTML元素,想div,span,p,a,button,input等等. 这些纯CSS代码制作的按钮大小可以根据字体大小自动调整,渐变色背景可以兼容各浏览器,并且有正常.鼠标滑向.点击三种状态样式,当然,如果您的浏览器不支持CSS3,那么按钮将没有圆角和阴影效果. 教程地址:http://www.helloweba.com/v

使用 CSS3 制作一组超时尚的动画按钮效果

通过 CSS3 的新特性,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一些 CSS3 动画按钮效果.我们的想法是创建一个具有不同风格的一些动画链接元素,鼠标悬停时有动画效果和活动状态. 效果演示     插件下载 HTML 示例代码: <a href="#" class="a-btn"> <span class="a-btn-slide-text">$29</span> <img

纯CSS3动画按钮效果 5种漂亮样式DEMO演示

Come in ! click to begin You'll get a lot ! My box with glow HomeSee Us AboutMeet Us ContactEmail Us Home About Services Portfolio Contact us Login ? Register ? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w

使用 CSS3 打造一组质感细腻丝滑的按钮

CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果.下面这些发出闪亮光泽的按钮,很漂亮吧?把鼠标悬停在按钮上,还有动感的光泽移动效果. 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 源码下载     在线演示 这些精美的效果用到了 CSS3 RGBA.box-shadow(阴影).border-radius(边框圆角)和 linear-gradient(线性渐变),为了便于阅读,精简后的

CSS3和SVG炫酷鼠标点击按钮效果

这是一组效果非常炫酷的HTML5 SVG和CSS3鼠标点击按钮特效.这组鼠标点击按钮特效共有22种效果,大多数是在伪元素上使用CSS3 animations来制作动画效果.非常适合于移动手机APP上的按钮触摸特效. 在线演示:http://www.htmleaf.com/Demo/201502121370.html 下载地址:http://www.htmleaf.com/html5/SVG/201502121369.html