|
[tr][td]这是一款集合20组不同CSS3按钮样式和按钮鼠标滑过特效的插件。这20组css3按钮每一组都有3种示例，每一个示例都使用CSS3制作炫酷的鼠标滑过动画。这些按钮适用于各种场合，相信总有一款适合你。
图片：140038qfifoizfmmi6fmqi.jpg  查看演示 20种炫酷CSS3按钮样式和鼠标滑过特效.zip 该按钮插件中使用鼠标HOVER来作为按钮动画的触发事件，有一些按钮动画效果更适合于鼠标点击事件，这些都可以十分容易修改和实现。 请注意这些按钮动画效果只在最新版本的现代浏览器上工作，(Mobile)Safari浏览器只支持其中很少的效果。 该按钮动画特效中大多数使用的是CSS transitions，但有一些动画效果也使用CSS animations来完成。 使用方法 HTML结构 [*]Vote 复制代码 通用按钮样式 下面是所有按钮的通用样式： [*]/* Common button styles */ [*].button { [*] float: left; [*] min-width: 150px; [*] max-width: 250px; [*] display: block; [*] margin: 1em; [*] padding: 1em 2em; [*] border: none; [*] background: none; [*] color: inherit; [*] vertical-align: middle; [*] position: relative; [*] z-index: 1; [*]} [*] [*].button:focus { [*] outline: none; [*]} [*] [*].button > span { [*] vertical-align: middle; [*]} 复制代码 在某些按钮效果中，在按钮中添加了一些额外的标签例如一个span或几个span。还有一些效果使用了超链接，在这些效果中需要将HTML元素替换为元素，并调整它的样式。 下面是按钮的一些控制样式，如：border、border-radius和尺寸大小。 [*]/* Sizes */ [*].button--size-s { [*] font-size: 14px; [*]} [*] [*].button--size-m { [*] font-size: 16px; [*]} [*] [*].button--size-l { [*] font-size: 18px; [*]} [*] [*]/* Typography and Roundedness */ [*].button--text-upper { [*] letter-spacing: 2px; [*] text-transform: uppercase; [*]} [*] [*].button--text-thin { [*] font-weight: 300; [*]} [*] [*].button--text-medium { [*] font-weight: 500; [*]} [*] [*].button--text-thick { [*] font-weight: 600; [*]} [*] [*].button--round-s { [*] border-radius: 5px; [*]} [*] [*].button--round-m { [*] border-radius: 15px; [*]} [*] [*].button--round-l { [*] border-radius: 40px; [*]} [*] [*]/* Borders */ [*].button--border-thin { [*] border: 1px solid; [*]} [*] [*].button--border-medium { [*] border: 2px solid; [*]} [*] [*].button--border-thick { [*] border: 3px solid; [*]} 复制代码 注意这些class不是对所有的按钮效果都有意义。有些效果依赖于使用元素的伪元素，例如使用伪元素来制作边框动画。 应用举例 下面来看一个"Itzel"效果的例子： 图片：140038qfifoizfmmi6fmqi.jpg 这个效果在按钮的伪元素上使用clip-path来剪切掉一部分边框，这个效果只能工作在支持clip-path属性的浏览器上，IE浏览器上看不到效果。要在Firefox浏览器中看到效果，需要在HTML中使用SVG来制作clipPath。 在这个效果中，在按钮中有一个裁剪区域，使用伪元素来将之隐藏起来，隐藏的方法是使用transform来将它往下推到按钮的下面，然后在鼠标滑过时使用另外一个transform将它推会原来的位置。因为使用了overflow:hidden，因此在按钮区域外是看不见它的。按钮上的小图标也使用相同的方法来制作。在鼠标滑过的时候，设置文字的透明度为0，以使文字销售，显示出小图标。 [*]/* Itzel */ [*].button--itzel { [*] border: none; [*] padding: 0px; [*] overflow: hidden; [*] width: 255px; [*]} [*] [*].button--itzel::before { [*] content: ''; [*] position: absolute; [*] top: 0; [*] left: 0; [*] width: 100%; [*] height: 100%; [*] border: 2px solid; [*] border-radius: inherit; [*] -webkit-clip-path: polygon(0% 0%, 0% 100%, 35% 100%, 35% 60%, 65% 60%, 65% 100%, 100% 100%, 100% 0%); [*] clip-path: url(../index.html#clipBox); [*] transform: translate3d(0, 100%, 0) translate3d(0, -2px, 0); [*] transform-origin: 50% 100%; [*]} [*] [*].button--itzel.button--border-thin::before { [*] border: 1px solid; [*] transform: translate3d(0, 100%, 0) translate3d(0, -1px, 0); [*]} [*] [*].button--itzel.button--border-thick::before { [*] border: 3px solid; [*] transform: translate3d(0, 100%, 0) translate3d(0, -3px, 0); [*]} [*] [*].button--itzel::before, [*].button--itzel .button__icon { [*] transition: transform 0.3s; [*] transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); [*]} [*] [*].button--itzel .button__icon { [*] position: absolute; [*] top: 100%; [*] left: 50%; [*] padding: 20px; [*] font-size: 20px; [*] transform: translate3d(-50%, 0, 0); [*]} [*] [*].button--itzel > span { [*] display: block; [*] padding: 20px; [*] transition: transform 0.3s, opacity 0.3s; [*] transition-delay: 0.3s; [*]} [*] [*].button--itzel:hover::before { [*] transform: translate3d(0, 0, 0); [*]} [*] [*].button--itzel:hover .button__icon { [*] transition-delay: 0.1s; [*] transform: translate3d(-50%, -100%, 0); [*]} [*] [*].button--itzel:hover > span { [*] opacity: 0; [*] transform: translate3d(0, -50%, 0); [*] transition-delay: 0s; [*]} 复制代码 以上就是这个按钮效果的全部代码。 在(Mobile) Safari浏览器中，这些按钮动画效果会有许多问题，特别是border-radius和 overflow hidden的问题。在这个浏览器中，伪元素视乎不能解析overflow：hidden（特别是在transition的时候）。还有一个gap问题，解决方案是使用 -webkit-backface-visibility: hidden。 via:http://www.htmleaf.com/css3/css3donghua/201502271429.html [/td][/tr] |
|
