8种CSS3按钮动画特效 - 小风博客-

小风科技

专业的
资源分享站
首页>> 前端教程 >>8种CSS3按钮动画特效 - 小风博客
2019-12-29
分类: 前端教程

8种CSS3按钮动画特效

文章作者:小风
手机扫码查看

这是一款 CSS3 按钮动画特效。在该特效中,提供了 8 种按钮动画特效。每种特效在鼠标悬停到按钮上面的时候,都会触发按钮动画。HTML 结构最简单的按钮 HTML 结构如下。<div clas......


这是一款 CSS3 按钮动画特效。在该特效中,提供了 8 种按钮动画特效。每种特效在鼠标悬停到按钮上面的时候,都会触发按钮动画。

HTML 结构

最简单的按钮 HTML 结构如下。

  1. <div class="item button-jittery" style="--bg-color: #f1c40f;">
  2.   <button>Click Me!</button>
  3.   <div class="name">Subtlety</div>
  4. </div>

CSS 样式

  1. * {
  2.   box-sizing: border-box;
  3. }
  4. *:before, *:after {
  5.   content: "";
  6.   position: absolute;
  7. }
  8.  
  9. .main-content {
  10.   display: grid;
  11.   width: 100%;
  12.   grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  13. }
  14. .main-content .item {
  15.   display: grid;
  16.   grid-template-rows: 1fr min-content;
  17.   align-items: center;
  18.   justify-content: center;
  19.   height: 50vh;
  20.   flex-wrap: wrap;
  21.   background: var(--bg-color);
  22. }
  23. .main-content .item:not(.footer) {
  24.   padding-top: 1rem;
  25. }
  26.  
  27. button {
  28.   background: transparent;
  29.   color: #fff;
  30.   border: 3px solid #fff;
  31.   border-radius: 50px;
  32.   padding: 0.8rem 2rem;
  33.   font: 24px "Margarine", sans-serif;
  34.   outline: none;
  35.   cursor: pointer;
  36.   position: relative;
  37.   transition: 0.2s ease-in-out;
  38.   letter-spacing: 2px;
  39. }
  40.  
  41. .name {
  42.   width: 100%;
  43.   text-align: center;
  44.   padding: 0 0 3rem;
  45.   font: 500 14px 'Rubik', sans-serif;
  46.   letter-spacing: .5px;
  47.   text-transform: uppercase;
  48.   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
  49. }
  50.  
  51. .button__wrapper {
  52.   display: inline-block;
  53.   position: relative;
  54.   width: 200px;
  55.   height: 65px;
  56.   display: flex;
  57.   justify-content: center;
  58.   align-items: center;
  59. }
  60.  
  61. .button-pulse button {
  62.   background: var(--bg-color);
  63.   width: 100%;
  64.   height: 100%;
  65.   position: absolute;
  66.   top: 0;
  67.   left: 0;
  68.   z-index: 2;
  69. }
  70. .button-pulse .button__wrapper:hover .pulsing:before {
  71.   animation: pulsing 0.2s linear infinite;
  72. }
  73. .button-pulse .button__wrapper:hover .pulsing:after {
  74.   animation: pulsing1 0.2s linear infinite;
  75. }
  76.  
  77. .pulsing {
  78.   width: 99%;
  79.   height: 99%;
  80.   border-radius: 50px;
  81.   z-index: 1;
  82.   position: relative;
  83. }
  84. .pulsing:before, .pulsing:after {
  85.   width: 100%;
  86.   height: 100%;
  87.   border: inherit;
  88.   top: 0;
  89.   left: 0;
  90.   z-index: 0;
  91.   background: #fff;
  92.   border-radius: inherit;
  93.   animation: pulsing 2.5s linear infinite;
  94. }
  95. .pulsing:after {
  96.   animation: pulsing1 2.5s linear infinite;
  97. } 
  98. .button-jittery button {
  99.   animation: jittery 4s infinite;
  100. }
  101. .button-jittery button:hover {
  102.   animation: heartbeat 0.2s infinite;
  103. }
  104.  
  105. @keyframes jittery {
  106.   5%,
  107.   50% {
  108.     transform: scale(1);
  109.   }
  110.   10% {
  111.     transform: scale(0.9);
  112.   }
  113.   15% {
  114.     transform: scale(1.15);
  115.   }
  116.   20% {
  117.     transform: scale(1.15) rotate(-5deg);
  118.   }
  119.   25% {
  120.     transform: scale(1.15) rotate(5deg);
  121.   }
  122.   30% {
  123.     transform: scale(1.15) rotate(-3deg);
  124.   }
  125.   35% {
  126.     transform: scale(1.15) rotate(2deg);
  127.   }
  128.   40% {
  129.     transform: scale(1.15) rotate(0);
  130.   }
  131. }
  132. @keyframes heartbeat {
  133.   50% {
  134.     transform: scale(1.1);
  135.   }
  136. }

×

感谢您的支持,我们会一直保持!

扫码支持
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

打赏作者
版权所有,转载注意明处:小风博客 » 8种CSS3按钮动画特效

网友评论(0)

做一个有价值的人