纯css实现边框动画特效 css

纯css实现边框动画特效 css_第1张图片
下面是完整代码,实现图示效果,效果为出现四个白框,和去除黑色背景。


DOCTYPE html>
<html>
	<head>
		<style type="text/css">
		body{
			background-color: #D0D0D0;
		}
.knowmorbutton
{
	width: 100px;
	height: 40px;
	position: relative;
	
	background-color: #000000;
	box-shadow:0px 0px  60px 0.5px #d0d0d0;
}
.knowmorbutton:hover
{
	cursor:pointer;
	background:transparent;
}
.know-top
{
	position: absolute;
	right: 0px;
	top: 0px;
	width: 0px;
	height: 5px;
	background-color: #FFFFFF;
	transition: all 0.2s;
}
.know-left
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 5px;
	height: 0px;
	background-color: #FFFFFF;
}
.knowmorbutton:hover .know-left
{
	height: 35px;
	transition: all 0.2s;
	cursor:pointer;
}
.know-right
{
	position: absolute;
	bottom: 0px;
	right: 0px;
	width: 5px;
	height: 0px;
	background-color: #FFFFFF;
}
.knowmorbutton:hover .know-right
{
	cursor:pointer;
	height: 35px;
	transition: all 0.2s;
}
.knowmorbutton:hover .know-left
{
	height: 35px;
	transition: all 0.2s;
}
.knowmorbutton:hover .know-top
{
	cursor:pointer;
	width: 100px;
}

.know-bottom
{	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 0px;
	height: 5px;
	background-color: #FFFFFF;
	transition: all 0.2s;
}
.knowmorbutton:hover .know-bottom
{
	width: 100px;
}
.knowmore
{
	color: #FFFFFF;
	position: relative;
	text-align: center;
	top: 7px;
	
	
}
		style>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
					
				div>
				
				<div class="knowmorbutton">
					<div class="know-top">
						
					div>
					<div class="know-left">
						
					div>
					<div class="know-right">
						
					div>
					<div class="know-bottom">
						
					div>
		
				div>
				
				
				div>
				
			div>
	body>
html>

					

        虽然代码看着很长其实原理很简单,使用子类选择器,在.knowmorbutton盒子悬停的同时,让四个盒子出来就行;
四个盒子分别使用绝对定位,定位到四个角,两个不给宽度,两个不给长度。
        然后在悬停父类knowbuttton,清除阴影我用的是backgroune:transparent;
        核心思想是悬停父类,触发子类效果。定位父相子绝,不影响布局。

你可能感兴趣的:(web的学习历程,css,动画,css3)