CSS3盾牌2D效果

将原本的图片打乱然后鼠标触摸恢复原状，实现这种效果主要用到过渡（transition）和移动（translate）；

过渡可以实现元素不同状态之间的平滑过渡（补间动画），补间动画意思是自动完成从起始状态到终止状态的过渡，经常用来制作动画效果

只要当前有属性发生变化时，可以平滑的进行过渡，不仅仅局限在hover上。

移动translate(x,y)可以改变元素的位置，课为负值，移动位置相当于自身原来的位置，y轴的正方向向下。

ratate可以对元素进行旋转，正值为顺时针，负值为逆时针，元素旋转坐标轴也会跟着变化，调整顺序可以解决，把旋转放到最后
代码如下：

<style>
    html,body{height: 100%;}body{margin: 0;padding: 0;overflow: hidden;}section{height:100%;background: #2AB561;}.shield{width: 440px;margin:0 auto;}.shield img {transition: all 1s linear;}img:nth-child(1){transform: translate(100px,120px) rotate(30deg);}img:nth-child(2){transform: translate(50px,120px) rotate(30deg);}img:nth-child(3){transform: translate(10px,220px) rotate(40deg);}img:nth-child(4){transform: translate(-150px,10px) rotate(130deg);}img:nth-child(5){transform: translate(150px,100px) rotate(20deg);}img:nth-child(6){transform: translate(100px,10px) rotate(10deg);}img:nth-child(7){transform: translate(-90px,10px) rotate(130deg);}img:nth-child(8){transform: translate(10px,100px) rotate(20deg);}img:nth-child(9){transform: translate(-50px,10px) rotate(10deg);}.shield:hover img{transform: translate(0,0) rotate(0);}
</style>
<body>
<section>
    <div class="shield">
        <img src="data:images/shield_1_01.png" alt="">
        <img src="data:images/shield_1_02.png" alt="">
        <img src="data:images/shield_1_03.png" alt="">
        <img src="data:images/shield_1_04.png" alt="">
        <img src="data:images/shield_1_05.png" alt="">
        <img src="data:images/shield_1_06.png" alt="">
        <img src="data:images/shield_1_07.png" alt="">
        <img src="data:images/shield_1_08.png" alt="">
        <img src="data:images/shield_1_09.png" alt="">
    </div>
</section>
</body>

我这里对于补间动画只是稍微做了写介绍，如果你对补间动画感兴趣可看看http://mux.alimama.com/posts/1009

CSS3盾牌2D效果相关推荐

html中2d变形兼容性,CSS3(3)---2D变形(transform)
CSS3(3)---2D变形(transform) 2D变形是CSS3中具有颠覆性的特征之一,它常用的属性有:移动(translate).缩放(scale).旋转(rotate).倾斜 (skew). ...
CSS3的2D转换和3D转换，你了解了嘛？
css3的2D转换和3D转换 CSS3大纲: 本次讲解css3带来了两种转换:2D转换和3D转换 1. 2D转换转换( transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移(tr ...
怎么在html中加入特效文字,如何使用HTML5+css3实现粒子效果文字动画特效（附完整代码）...
我们在浏览web网页的时候会发现现在的网页做的越来越美观,很多动画特效做的越来越炫酷,这离不开HTML5和css3的深入开发.今天我们要来分享一款基于HTML5和css3的文字特效--粒子效果文字动画 ...
html怎么把字做成动画效果,如何使用HTML5 css3实现粒子效果文字动画特效（附完整代码）...
摘要腾兴网为您分享:如何使用HTML5 css3实现粒子效果文字动画特效(附完整代码),学宝,小米社区,手机管家,神州专车等软件知识,以及小学英语点读机,便利宝,startos,工资宝,玩,大将军手 ...
CSS3 2 2D 3D转换
CSS3 2 2D 3D转换通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 转换是使元素改变形状.尺寸和位置的一种效果,使用 2D或 3D 转换来转换元素. 1浏览器支持 I ...
前端 css3动画2D|3D
css3动画&2D|3D 一.css3的transform属性 2d坐标轴(图示) x轴:水平,向右为正,向左为负 y轴:垂直,向下为正,向上为负 2d转换的方法 1.2D变形:平移.旋转.缩 ...
ae制h5文字动画_如何使用HTML5+css3实现粒子效果文字动画特效（附完整代码）
我们在浏览web网页的时候会发现现在的网页做的越来越美观,很多动画特效做的越来越炫酷,这离不开HTML5和css3的深入开发.今天我们要来分享一款基于HTML5和css3的文字特效--粒子效果文字动画 ...
css3 3d翻转效果
css3 3d翻转效果 3d变换 perspective (透视,视角): 属性定义 3D 元素距视图的距离,以像素计.该属性允许您改变 3D 元素查看 3D 元素的视图.决定了你所看到的是2D tr ...
boostrap 鼠标滚轮滑动图片_16种基于Bootstrap的css3图片hover效果
bootstrap-image-hover是一款基于Bootstrap的css3图片hover效果.这组图片hover效果共16种特效.同时该特效也支持非Bootstrap版本. 使用方法在页面中引 ...

CSS3盾牌2D效果

CSS3盾牌2D效果相关推荐

最新文章

热门文章