一款如何利用纯css3如何实现的360度翻转按钮的实例好代码教程

别总是抱怨生活不够幸运,是你欠生活一份努力。未来美不美,取决于你现在拼不拼!

  今天要给大家分享的是由css3实现的翻转360动画按钮。之前已为大家分享了好几款css3按钮,大家可以点击链接进去找一找适合自己的。哈哈。下面先为大家上效果图:

  下面是实现的代码。

  html代码:

XML/HTML Code复制内容到剪贴板
  1. <ulclass="flatflipbuttons">
  2. <li><arel="nofollow noopener noreferrer" href="https://www.haodaima.com"title="Search"><spanclass="icon-search"></span>
  3. </a><b>Search</b></li>
  4. <li><arel="nofollow noopener noreferrer" href="https://www.haodaima.com"><spanclass="icon-gears"></span></a><b>Gears</b></li>
  5. <li><arel="nofollow noopener noreferrer" href="https://www.haodaima.com"><spanclass="icon-rss"></span></a><b>RSS</b></li>
  6. <li><arel="nofollow noopener noreferrer" href="https://www.haodaima.com"><spanclass="icon-twitter"></span></a><b>Twitter</b></li>
  7. <li><arel="nofollow noopener noreferrer" href="https://www.haodaima.com"><spanclass="icon-rocket"></span></a><b>Rocket</b></li>
  8. </ul>
  9. <br/>
  10. <br/>
  11. <ulclass="flatflipbuttonssecond">
  12. <li><arel="nofollow noopener noreferrer" href="https://www.haodaima.com"><span>
  13. <imgsrc="imgs/rss-heart.png"/></span></a></li>
  14. <li><arel="nofollow noopener noreferrer" href="https://www.haodaima.com"><span>
  15. <imgsrc="imgs/twitter-heart.png"/></span></a></li>
  16. <li><arel="nofollow noopener noreferrer" href="https://www.haodaima.com"><span>
  17. <imgsrc="imgs/facebook-heart.png"/></span></a></li>
  18. <li><arel="nofollow noopener noreferrer" href="https://www.haodaima.com"><span>
  19. <imgsrc="imgs/google-heart.png"/></span></a></li>
  20. <li><arel="nofollow noopener noreferrer" href="https://www.haodaima.com"><span>
  21. <imgsrc="imgs/stumble-heart.png"/></span></a></li>
  22. </ul>

  css代码:

CSS Code复制内容到剪贴板
  1. ul.flatflipbuttons
  2. {
  3. margin:0;
  4. padding:0;
  5. list-style:none;
  6. -webkit-perspective:10000px;/*largerthevalue,thelesspronouncedthe3Deffect*/
  7. -moz-perspective:10000px;
  8. perspective:10000px;
  9. }
  10. ul.flatflipbuttonsli
  11. {
  12. margin:0;
  13. display:inline-block;
  14. width:100px;/*dimensionsofbuttons.*/
  15. height:100px;
  16. margin-right:15px;/*spacingbetweenbuttons*/
  17. background:white;
  18. text-transform:uppercase;
  19. text-align:center;
  20. }
  21. ul.flatflipbuttonslia
  22. {
  23. display:table;
  24. font:bold36pxArial;/*fontsize,pertainstoiconfontsspecifically*/
  25. width:100%;
  26. height:100%;
  27. margin-bottom:4px;
  28. color:black;
  29. background:#3B9DD5;
  30. text-decoration:none;
  31. outline:none;
  32. -webkit-transition:all300msease-out;/*CSS3transition.Lastvalueispausebeforetransitionplay*/
  33. -moz-transition:all300msease-out;
  34. transition:all300msease-out;
  35. }
  36. ul.flatflipbuttonsli:nth-of-type(1)a
  37. {
  38. color:white;
  39. background:#3B9DD5;
  40. }
  41. ul.flatflipbuttonsli:nth-of-type(2)a
  42. {
  43. background:#A1CD3A;
  44. }
  45. ul.flatflipbuttonsli:nth-of-type(3)a
  46. {
  47. background:#80C5EC;
  48. }
  49. ul.flatflipbuttonsli:nth-of-type(4)a
  50. {
  51. color:white;
  52. background:#635746;
  53. }
  54. ul.flatflipbuttonsli:nth-of-type(5)a
  55. {
  56. background:#F2C96D;
  57. }
  58. ul.flatflipbuttonsliaspan
  59. {
  60. -moz-box-sizing:border-box;
  61. -webkit-box-sizing:border-box;
  62. box-sizing:border-box;
  63. display:table-cell;
  64. vertical-align:middle;
  65. width:100%;
  66. height:100%;
  67. -webkit-transition:all300msease-out;/*CSS3transition.*/
  68. -moz-transition:all300msease-out;
  69. transition:all300msease-out;
  70. }
  71. ul.flatflipbuttonslib
  72. {
  73. /*CSSfortextbeneathbutton*/
  74. display:block;
  75. position:relative;
  76. width:100%;
  77. opacity:0;
  78. -webkit-transition:all300msease-out0.2s;/*CSS3transition.0.2sdelay*/
  79. -moz-transition:all300msease-out0.2s;
  80. transition:all300msease-out0.2s;
  81. }
  82. ul.flatflipbuttonsliaimg
  83. {
  84. /*CSSforimageifdefinedinsidebutton*/
  85. border-width:0;
  86. vertical-align:middle;
  87. }
  88. ul.flatflipbuttonsli:hovera
  89. {
  90. -webkit-transform:rotateY(180deg);/*fliphorizontally180deg*/
  91. -moz-transform:rotateY(180deg);
  92. transform:rotateY(180deg);
  93. background:#c1e4ec;/*bgcolorofbuttononMouseover*/
  94. -webkit-transition-delay:0.2s;
  95. -moz-transition-delay:0.2s;
  96. transition-delay:0.2s;
  97. }
  98. ul.flatflipbuttonsli:hoveraspan
  99. {
  100. color:black;/*coloroficonfontonMouseover*/
  101. -webkit-transform:rotateY(180deg);
  102. -moz-transform:rotateY(180deg);/*fliphorizontally180deg*/
  103. transform:rotateY(180deg);
  104. -webkit-transition-delay:0.2s;
  105. -moz-transition-delay:0.2s;
  106. transition-delay:0.2s;
  107. }
  108. ul.flatflipbuttonsli:hoverb
  109. {
  110. opacity:1;
  111. }
  112. /*CSSfor2ndmenubelowspecifically*/
  113. ul.secondlia
  114. {
  115. background:#eee!important;
  116. }
  117. ul.secondlia:hover
  118. {
  119. background:#ddd!important;
  120. }

以上就是利用css3实现的翻转360动画按钮的代码好代码教程,谢谢阅读,希望能帮到大家,请继续关注,我们会努力分享更多优秀的文章。

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案

CSS如何使用Flex和Grid布局如何实现3D骰子

Flex布局史上最简单使用语法教程

新的CSS 伪类函数 :is() 和 :where()示例详解

纯CSS打字动画的如何实现示例