使用CSS3设计漂亮的动画效果3D大按钮
本文将介绍如何使用最简单的CSS3代码来生成一个拥有点击效果的3D按钮
HTML代码
首先定义一个3D按钮的HTML,如下:
CSS代码
定义按钮相关的CSS,如下:
以上代码定义所有的属性过渡延迟时间0.3秒
定义一个橙色按钮类:
最后定义按钮激活状态CSS,即用户点击a标签时的相关CSS属性定义,使用CSS3位移变形效果translate实现:
点击一下链接看看最终的3D按钮生成效果吧
再添加几个不同颜色的效果,代码如下:
点击下面地址查看按钮效果:
教程视频
via:http://www.gbtags.com/gb/share/5082.htm
HTML代码
首先定义一个3D按钮的HTML,如下:
- <a href="#null">极客标签</a>
CSS代码
定义按钮相关的CSS,如下:
- 定义按钮动画过渡属性
- .animate
- {
- transition: all 0.3s;
- -webkit-transition: all 0.3s;
- }
以上代码定义所有的属性过渡延迟时间0.3秒
- 定义动态按钮CSS属性
- .action-button
- {
- position: relative;
- padding: 10px 40px;
- margin: 0px 10px 10px 0px;
- float: left;
- border-radius: 5px;
- font-family: 'microsoft yahei',Arial,sans-serif;
- font-size: 24px;
- font-weight:normal;
- color: #FFF;
- text-decoration: none;
- }
定义一个橙色按钮类:
- .orange{
- background-color: orange;
- border-bottom: 5px solid #ab7018;
- text-shadow: 0px -2px #D1B358;
- }
最后定义按钮激活状态CSS,即用户点击a标签时的相关CSS属性定义,使用CSS3位移变形效果translate实现:
- .action-button:active
- {
- transform: translate(0px,5px);
- -webkit-transform: translate(0px,5px);
- border-bottom: 1px solid;
- }
点击一下链接看看最终的3D按钮生成效果吧
http://www.gbtags.com/gb/rtreplayerpreview/706.htm
再添加几个不同颜色的效果,代码如下:
- .blue
- {
- background-color: #3498DB;
- border-bottom: 5px solid #2980B9;
- text-shadow: 0px -2px #2980B9;
- }
-
- .red
- {
- background-color: #E74C3C;
- border-bottom: 5px solid #BD3E31;
- text-shadow: 0px -2px #BD3E31;
- }
-
- .green
- {
- background-color: #82BF56;
- border-bottom: 5px solid #669644;
- text-shadow: 0px -2px #669644;
- }
-
- .yellow
- {
- background-color: #F2CF66;
- border-bottom: 5px solid #D1B358;
- text-shadow: 0px -2px #D1B358;
- }
点击下面地址查看按钮效果:
http://www.gbtags.com/gb/rtreplayerpreview/707.htm
教程视频
via:http://www.gbtags.com/gb/share/5082.htm
【使用CSS3设计漂亮的动画效果3D大按钮】相关文章
7. 使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果
9. 利用CSS3制作动画效果
10. 利用CSS3制作动画效果
本文来源:https://www.51html5.com/a1083.html
﹝使用CSS3设计漂亮的动画效果3D大按钮﹞相关内容
- 使用CSS3帧动画打造与众不同的响应式提交按钮
- 采访和书评:精通HTML5和CSS3设计模式
- jQuery Flat Shadow – 轻松实现漂亮的长阴影效果
- jQuery Flat Shadow – 轻松实现漂亮的长阴影效果
- jQuery漂亮的渐变选择器生成CSS
- 使用 CSS3 实现超炫的 Loading(加载)动画效果
- 使用 CSS3 动感的图片标题动画效果
- 使用 CSS3 实现超炫的 Loading(加载)动画效果
- CSS3实现简单的动画图片说明效果
- CSS3动画效果-animate.css