• 技术文章 >web前端 >css教程

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

    青灯夜游青灯夜游2021-09-09 11:30:15原创215
    在之前的文章《纯CSS3怎么创建瀑布流布局?columns方法浅析》中,我们介绍了使用CSS3 column系列属性创建瀑布流布局的方法,感兴趣的朋友可以去了解一下~

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

    我们先来看看效果图

    2.gif

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

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

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

    1.png

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

    #shiny-shadow {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      background: #1c2541;
    }
    
    button {
      border: 2px solid white;
      background: transparent;
      text-transform: uppercase;
      color: white;
      padding: 15px 50px;
      outline: none;
    }
    
    span {
      z-index: 20;  
    }

    2.png

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

    button {
      position: relative;
    }
    button:after {
    	content: '';
    	display: block;
    	position: absolute;
    	background: white;
    	width: 50px;
    	height: 125px;
    	opacity: 20%;
    }

    3.png

    button:after {
    	transform: rotate(-45deg);
    }

    4.png

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

    5.png

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

    button:hover:after {
      left: 120%;
    }

    6.gif

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

    7.gif

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

    button {
      overflow: hidden;
    }

    8.png

    9.gif

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

    button:after {
    	top: -36px;
    	left: -100px;
    }

    10.gif

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

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<style type="text/css">
    			#shiny-shadow {
    				display: flex;
    				align-items: center;
    				justify-content: center;
    				height: 100vh;
    				background: #1c2541;
    			}
    
    			button {
    				border: 2px solid white;
    				background: transparent;
    				text-transform: uppercase;
    				color: white;
    				padding: 15px 50px;
    				outline: none;
    				position: relative;
    				overflow: hidden;
    			}
    
    			span {
    				z-index: 20;
    			}
    
    			button:after {
    				content: '';
    				display: block;
    				position: absolute;
    				background: white;
    				width: 50px;
    				height: 125px;
    				opacity: 20%;
    				transform: rotate(-45deg);
    				top: -36px;
    				left: -100px;
    			}
    
    			button:hover:after {
    				left: 120%;
    				transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
    				-webkit-transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
    			}
    		</style>
    	</head>
    	<body>
    		<div id="shiny-shadow">
    			<button><span>鼠标悬停</span></button>
    		</div>
    	</body>
    </html>

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

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

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    上一篇:手把手教你使用css制作一个简单的心跳效果(代码详解) 下一篇:纯CSS3怎么给文本添加背景图
    线上培训班

    相关文章推荐

    • 利用CSS3创建炫酷的三角背景图像• 如何使用纯CSS3创建炫酷的图像放大效果?• 手把手教你怎么使用css3给文字添加动画效果(附代码)• CSS3怎么给背景图片添加动态变色效果

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网