CSS3教程

当前位置: HTML5技术网 > CSS3教程 > 使用CSS3设计漂亮的动画效果3D大按钮

使用CSS3设计漂亮的动画效果3D大按钮

本文将介绍如何使用最简单的CSS3代码来生成一个拥有点击效果的3D按钮


HTML代码

首先定义一个3D按钮的HTML,如下:

  1. <a href="#null">极客标签</a>
复制代码
CSS代码

定义按钮相关的CSS,如下:

  • 定义按钮动画过渡属性

  1. .animate
  2. {
  3.   transition: all 0.3s;
  4.   -webkit-transition: all 0.3s;
  5. }
复制代码
以上代码定义所有的属性过渡延迟时间0.3秒

  • 定义动态按钮CSS属性

  1. .action-button
  2. {
  3.   position: relative;
  4.   padding: 10px 40px;
  5.   margin: 0px 10px 10px 0px;
  6.   float: left;
  7.   border-radius: 5px;
  8.   font-family: 'microsoft yahei',Arial,sans-serif;
  9.   font-size: 24px;
  10.   font-weight:normal;
  11.   color: #FFF;
  12.   text-decoration: none;        
  13. }
复制代码
定义一个橙色按钮类:

  1. .orange{
  2.         background-color: orange;
  3.         border-bottom: 5px solid #ab7018;
  4.         text-shadow: 0px -2px #D1B358;
  5. }
复制代码
最后定义按钮激活状态CSS,即用户点击a标签时的相关CSS属性定义,使用CSS3位移变形效果translate实现:

  1. .action-button:active
  2. {
  3.         transform: translate(0px,5px);
  4.        -webkit-transform: translate(0px,5px);
  5.         border-bottom: 1px solid;
  6. }
复制代码
点击一下链接看看最终的3D按钮生成效果吧

http://www.gbtags.com/gb/rtreplayerpreview/706.htm

再添加几个不同颜色的效果,代码如下:

  1. .blue
  2. {
  3.         background-color: #3498DB;
  4.         border-bottom: 5px solid #2980B9;
  5.         text-shadow: 0px -2px #2980B9;
  6. }

  7. .red
  8. {
  9.         background-color: #E74C3C;
  10.         border-bottom: 5px solid #BD3E31;
  11.         text-shadow: 0px -2px #BD3E31;
  12. }

  13. .green
  14. {
  15.         background-color: #82BF56;
  16.         border-bottom: 5px solid #669644;
  17.         text-shadow: 0px -2px #669644;
  18. }

  19. .yellow
  20. {
  21.         background-color: #F2CF66;
  22.         border-bottom: 5px solid #D1B358;
  23.         text-shadow: 0px -2px #D1B358;
  24. }
复制代码
点击下面地址查看按钮效果:

http://www.gbtags.com/gb/rtreplayerpreview/707.htm

教程视频

via:http://www.gbtags.com/gb/share/5082.htm

【使用CSS3设计漂亮的动画效果3D大按钮】相关文章

1. 使用CSS3设计漂亮的动画效果3D大按钮

2. 使用CSS3的step()生成的动画效果

3. 推荐12个漂亮的CSS3按钮实现方案

4. 用CSS3打造一组闪亮的半透明按钮效果

5. 用CSS3设计响应式导航菜单

6. 使用CSS3的褪色和动画效果构建消息提醒框

7. 使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果

8. 使用CSS制作APPLE WATCH刻度盘动画效果

9. 利用CSS3制作动画效果

10. 利用CSS3制作动画效果

本文来源:https://www.51html5.com/a1083.html

点击展开全部

﹝使用CSS3设计漂亮的动画效果3D大按钮﹞相关内容

「使用CSS3设计漂亮的动画效果3D大按钮」相关专题

其它栏目

也许您还喜欢