您的位置:首页 > 技术中心 > 前端框架 >

手把手教你使用CSS3实现按钮悬停闪烁动态特效

时间:2022-02-11 16:48

在之前的文章《纯CSS3怎么创建瀑布流布局?columns方法浅析》中,我们介绍了使用CSS3 column系列属性创建瀑布流布局的方法,感兴趣的朋友可以去了解一下~

而今天我们来看看使用CSS3怎么给按钮添加动态效果,实现一个按钮悬停闪亮阴影动画效果,让网页互动性更强,更吸引人!

我们先来看看效果图

2.gif

下面我们来研究一下是怎么实现这个效果的:

首先是HTML部分,定义一个div容器包裹button按钮,在按钮中使用<span>标签对来包含按钮文本

  1. <div id="shiny-shadow">
  2. <button><span>鼠标悬停</span></button>
  3. </div>

1.png

然后开始定义css样式来进行修饰:调整布局样式、色彩范围

  1. #shiny-shadow {
  2. display: flex;
  3. align-items: center;
  4. justify-content: center;
  5. height: 100vh;
  6. background: #1c2541;
  7. }
  8. button {
  9. border: 2px solid white;
  10. background: transparent;
  11. text-transform: uppercase;
  12. color: white;
  13. padding: 15px 50px;
  14. outline: none;
  15. }
  16. span {
  17. z-index: 20;
  18. }

2.png

接着制作一闪而过的覆盖层:

  • 使用:after选择器制作一个带透明度的长方形,让它相对于button按钮进行绝对定位

  1. button {
  2. position: relative;
  3. }
  4. button:after {
  5. content: '';
  6. display: block;
  7. position: absolute;
  8. background: white;
  9. width: 50px;
  10. height: 125px;
  11. opacity: 20%;
  12. }

3.png

  • 在最终效果中,一闪而过的是一个倾斜的长方形;因此我们添加一个transform: rotate(-45deg);样式

  1. button:after {
  2. transform: rotate(-45deg);
  3. }

4.png

  • 使用top属性和left属性控制长方形的位置

  1. button:after {
  2. top: -2px;
  3. left: -1px;
  4. }

5.png

最后实现按钮悬停闪烁动画特效

  • 因为是悬停效果,所以要使用到:hover选择器;我们要设置鼠标悬停时长方形的位置

  1. button:hover:after {
  2. left: 120%;
  3. }

6.gif

  • 这样突然变换位置不是我们要的效果,可以使用transition属性添加一个过渡效果,因为该属性是css3的一个新属性,要添加前缀来兼容其他浏览器

  1. button:hover:after {
  2. left: 120%;
  3. transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
  4. -webkit-transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
  5. }

7.gif

  • 大致实现了,再修饰一下。

只想要button按钮范围内显示长方形覆盖层,那么可给button标签添加一个overflow: hidden;样式

  1. button {
  2. overflow: hidden;
  3. }

8.png

9.gif

可以看出覆盖层的位置还有点问题,最终效果中覆盖层一开始是不显示的,我们使用top属性和left属性来调整一下

  1. button:after {
  2. top: -36px;
  3. left: -100px;
  4. }

10.gif

OK,大功告成!下面附上完整代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <style type="text/css">
  6. #shiny-shadow {
  7. display: flex;
  8. align-items: center;
  9. justify-content: center;
  10. height: 100vh;
  11. background: #1c2541;
  12. }
  13. button {
  14. border: 2px solid white;
  15. background: transparent;
  16. text-transform: uppercase;
  17. color: white;
  18. padding: 15px 50px;
  19. outline: none;
  20. position: relative;
  21. overflow: hidden;
  22. }
  23. span {
  24. z-index: 20;
  25. }
  26. button:after {
  27. content: '';
  28. display: block;
  29. position: absolute;
  30. background: white;
  31. width: 50px;
  32. height: 125px;
  33. opacity: 20%;
  34. transform: rotate(-45deg);
  35. top: -36px;
  36. left: -100px;
  37. }
  38. button:hover:after {
  39. left: 120%;
  40. transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
  41. -webkit-transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
  42. }
  43. </style>
  44. </head>
  45. <body>
  46. <div id="shiny-shadow">
  47. <button><span>鼠标悬停</span></button>
  48. </div>
  49. </body>
  50. </html>

PHP中文网平台有非常多的视频教学资源,欢迎大家学习《css视频教程》!

以上就是手把手教你使用CSS3实现按钮悬停闪烁动态特效的详细内容,更多请关注gxlsystem.com其它相关文章!

本类排行

今日推荐

热门手游