CSS3动画条纹边框

分类栏目:用户体验 - 前端开发

17912

发布于 23 条评论

之前分享过一篇关于《 焦点图相框》的文章,深受大家的喜爱。今天也同样为大家分享一篇用css3制作的动画条纹边框,效果还是蛮有趣的,推荐大家用一用、玩一玩。

css3-animation-stripes

查看预览下载附件

先简单的说一下实现原理,大家都可以通过demo看到最终的效果,当鼠标停留在图片上面时,图片的边框就会出现带有斜度的条纹背景(暂且不管动画), 看下源代码就能明白其中的原理,首先用样式制作出条纹背景,设置opacity值为0,在鼠标经过图片所在的层是再将opacity改为1并且中间设置个过渡时间,这样子条纹背景图就能缓慢的出现以及消失,这个原理是比较简单的。下面就为大家介绍下CSS3动画条纹边框的制作以及代码的编写。

HTML结构

首先是HTML结构的编写,仔细分析一下demo的效果,结构应该是比较简单的,只需要两层元素即可。其实我们可以利用《 CSS伪元素before、after妙用:制作时尚焦点图相框》一文中的伪元素::before来处理条纹背景,但考虑浏览器兼容性原因以及这一次想换个方式来输出实现,只要额外添加一个<div>即可。例如:

<div class="product-hover"></div>
<img src="images/1.jpg">

如果结构是这样子编写的话,那条纹背景将是一个层,而图片也是一个层,所以要注意的是,条纹形状不是图片的边框, 而是另外一个层的显示效果,只是叠加到了图片下面,所以看起来像是图片的边框。

在本例中的HTML具体代码如下:

<div class="main">
<ul>
<li class="product">
  <div class="product-hover"></div>
  <img src="images/1.jpg">
</li>
<li class="product">
  <div class="product-hover"></div>
  <img src="images/2.jpg">
</li>
<li class="product">
  <div class="product-hover"></div>
  <img src="images/3.jpg">
</li>
</ul>
</div>

定义CSS样式

接下来我们一起来看看怎么定义样式。在一个盒模型里面,我们需要预留padding: 15px;,用来作为显示条纹形式的区域。

.product {
	width: 376px;
	padding: 15px;
	position: relative;
	float: left;
}

然后是条纹形状的制作以及动画的实现:

.product-hover {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	-webkit-transition: opacity 0.3s ease;
	-moz-transition: opacity 0.3s ease;
	transition: opacity 0.3s ease;
	background-size: 30px 30px;
	background-image: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.2) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.2) 75%, transparent 75%, transparent);
	background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.2) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.2) 75%, transparent 75%, transparent);
	background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.2) 75%, transparent 75%, transparent);
	-webkit-animation: barberpole 0.5s linear infinite;
	-moz-animation: barberpole 0.5s linear infinite;
	animation: barberpole 0.5s linear infinite;
}
 @-webkit-keyframes barberpole {
 from {
 background-position: 0 0;
}
to {
	background-position: 60px 30px;
}
}
@-moz-keyframes barberpole {
 from {
 background-position: 0 0;
}
to {
	background-position: 60px 30px;
}
}
@keyframes barberpole {
 from {
 background-position: 0 0;
}
to {
	background-position: 60px 30px;
}
}

最后是鼠标经过图片是,显示条纹形状:

.product:hover .product-hover, .product:active .product-hover {
	opacity: 1;
}

其主要的代码就是这些了,如果要查看完整的css代码,可下载附件查阅。

查看预览下载附件

看完这个例子,心里是不是多少有点感受呢?如今的CSS3将会使网页效果更加的灿烂!通过这个例子,你是否也要做出一个有趣的东西呢?期待你的作品!

全部评论 / 23

  1. 很不错!

    我也有几篇css3的文章,还望相互交流

    http://www.haorooms.com/tag/css3

    Aaron 2013-02-28
    16
  2. 图片绝对是吸引到我了! ;-)

    15
  3. 背景图片吧。我看没文章内容。

    14
  4. 博主太牛了

    13
  5. 我没有用绝对定位来做哦,直接将 linear-gradient 作为父级,给个padding,在里面插入个img就行了。

    linc 2013-02-28
    12
    1. Javin

      可以实现就行,大家各显神通啦。

      1号 Javin 2013-02-28
  6. 学到东西了~~~

    11
  7. 文章很给力,先收藏再研究研究。

    10
  8. 博主你好,我在博客里加了一个“独立博客大全”的版块,有时间过来看看,如果没有添加你的,通知我一声,无条件收录!

    9
    1. Javin

      不错,支持。

      1号 Javin 2013-02-28
  9. 喜欢,那个浏览器支持他啊!

    8
  10. 感谢博主把代码分享出来

    7
  11. IE浏览器都不兼容吧

    borina 2013-02-28
    6
    1. Javin

      需要浏览器支持linear-gradient等标签属性,才可以正常显示。

      1号 Javin 2013-02-28
  12. 像发廊的那个东西。

    saint 2013-02-28
    5
  13. 嗯,很棒的文章

    4
  14. 效果非常好,不过现在流行简洁至上,这样花哨的效果比较适合个人博客类网站。

    3
    1. Javin

      这个效果不花哨,只是多了一点趣味。

      1号 Javin 2013-02-28
  15. 效果给力~~

    2
  16. 酷!

    1