注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

CSS3 图片边框运动效果  

2015-04-17 11:54:23|  分类: CSS3属性 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 注意:请在谷歌浏览器下预览
梦幻雪冰、独行冰海

效果需求:当鼠标移入到内容区域时,顶部边向左运动,右侧边向上运动,底部边向右运动,左侧边向下运动。运动的时候,边的粗细也会发生变化。另外,在快运动到最后的时候,四个方向上分别会有一个边从区域外侧运动到区域内部。整体的布局以及动画的设置是一个比较麻烦的地方,但是并不会很难。不要被表象迷惑,寻找一种合理的结构会让JS以及CSS3好写很多。

实现原理:
实现基本的布局:在实现JavaScript效果的时候,需要考虑如何搭建结构,一个好的HTML结构有利于JavaScript代码的实现,但是这个效果我是没有用到JavaScript,纯CSS进行实现(不考虑兼容问题),也是必须考虑好结构的搭建。
       在这个效果总共用到了8个边(红色的边和绿色的边),需要用到8个标签来当做边,而我利用到了伪元素来进行辅助实现,所以只要用4个div来当做边就够了。
       有各种各样的布局,对于这个效果,采用定位布局方便实现。
CSS3 图片边框运动效果 - 梦幻雪冰 - 梦幻雪冰
说明:隐藏的实现是在父级设置了overflow:hidden。

<div class="main">
<div class="con">
梦幻雪冰、独行冰海
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>

如何实现运动:
 CSS3 图片边框运动效果 - 梦幻雪冰 - 梦幻雪冰
说明:左上角红色边框宽度变小,并且与之对应左上角绿色边框进行移动(与红色边框形成一个直角)
          右上角红色边框高度变小,并且与之对应右上角绿色边框进行运动进来(与红色边框形成一个直角)
依此类推……

最终运动结果:
CSS3 图片边框运动效果 - 梦幻雪冰 - 梦幻雪冰
 
具体代码:

<!doctype html>
<head>
<meta charset="UTF-8">
<title>http://www.h5course.cn/ - 梦幻雪冰</title>
<link rel="stylesheet" href="reset.css">
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<style>
.main {
width: 400px;
height: 400px;
margin: 100px auto 0;
padding: 50px 0;
border: 1px solid #333;
background-color: #444;
}
.con {
/*设置超出隐藏*/
overflow: hidden;
width: 300px;
height: 400px;
margin: 0 auto;
background-color: #787878;
line-height: 400px;
color: #fff;
font-size: 30px;
text-align: center;
}
.con {
position: relative;
}
.con div {
position: absolute;
z-index: 20;
background-color: #fff;
/*设置所有属性都进行过渡*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
/*伪元素也是需要过渡*/
.con div:after {
position: absolute;
background-color: #fff;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

/********左上角********/
.con div:nth-child(1) {
/*左上角水平方向*/
left: 0;
top: 0;
height: 3px;
width: 300px;
}
.con div:nth-child(1):after {
/*左上角垂直方向*/
left: 0;
top: -400px;
height: 400px;
width: 3px;
content: "\200B";
}

/*******右上角*******/
.con div:nth-child(2) {
/*右上角水平方向*/
right: 0;
top: 0;
width: 3px;
height: 400px;
}
.con div:nth-child(2):after {
/*右上角垂直方向*/
right: -300px;
top: 0;
height: 3px;
width: 300px;
content: "\200B";
}

/*******左下角*******/
.con div:nth-child(3) {
/*左下角水平方向*/
left: 0;
bottom: 0;
height: 400px;
width: 3px;
}
.con div:nth-child(3):after {
/*左下角垂直方向*/
left: -300px;
bottom: 0;
height: 3px;
width: 300px;
content: "\200B";
}

/*******右下角*******/
.con div:nth-child(4) {
/*右下角水平方向*/
right: 0;
bottom: 0;
height: 3px;
width: 300px;
}
.con div:nth-child(4):after {
/*右下角垂直方向*/
right: 0;
bottom: -400px;
height: 400px;
width: 3px;
content: "\200B";
}

/********鼠标移入********/
.con:hover div:nth-child(1) {
width: 30px;
height: 5px;
}
.con:hover div:nth-child(1):after {
top: -370px;
width: 5px;
}

.con:hover div:nth-child(2) {
width: 5px;
height: 30px;
}
.con:hover div:nth-child(2):after {
right: -270px;
height: 5px;
}

.con:hover div:nth-child(3) {
width: 5px;
height: 30px;
}
.con:hover div:nth-child(3):after {
left: -270px;
height: 5px;
}

.con:hover div:nth-child(4) {
width: 30px;
height: 5px;
}
.con:hover div:nth-child(4):after {
bottom: -370px;
width: 5px;
}
</style>
</head>
<body>
<div class="main">
<div class="con">
梦幻雪冰、独行冰海
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>


欢迎学习交流——梦幻雪冰独行冰海@font-face中iefix的详解 - 梦幻雪冰 - 梦幻雪冰
HTML5学堂贴吧——HTML5学堂
HTML5学堂微博——HTML5学堂
HTML5学堂官网——HTML5学堂
HTML5学堂微信
setInterval和setTimeout参数剖析 - 梦幻雪冰 - 梦幻雪冰

  评论这张
 
阅读(175)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017