Day17-transform动画效果

Day17-transform动画效果

---

就是动画效果咯。关于div(或图片)的旋转，偏移等等效果。

---

transform:rotate();

旋转效果

<div class="main"> 这是一个奇怪的盒子</div>

.main{
	width:100px;
	height:100px;
	border:1px solid #000;
}

原本它只是个普普通通的盒子。

之后邪恶的巫师嫉妒他的美貌。给它强行加上了.rotate 样式

.rotate{
	transform:rotate(45deg);
}

然后它就变成了这样了：

总得来说。transform:rotate();样式旋转的角度和rotate中的值有关，特别要记住的是单位是deg(加粗了)。

---

transform:translate();

偏移效果

---

还是刚刚那个盒子。

很不幸邪恶的巫婆又要霸占它舒适的窝。又强行给他添加了.translate样式的魔法

.translate{
	transform:translate(10px,10px);
}

它就变成了：

偏得有点近。咳咳，问题不大。

---

transform: scale();

使盒子长和宽以倍数增大。

---

还是刚刚那个盒子

它再也忍受不了巫婆的折磨了，于是开始祈祷。上帝被它的虔诚而感动，赐予了.scale样式给它。

scale{
	transform: scale(2,4);
}

只见div身宽扩大了两倍，身长增加了四倍。

这…这难道就是传说中的变大魔法。流批流批…

---

transform: skew();

将x轴和y轴的角度改变。

---

还是刚刚那个盒子。

他获得变大魔法之后，一度猖獗，开始找巫婆复仇。巫婆见状不妙，不急不忙地给它施加了变小魔咒，同时该参杂着.skew样式的魔咒。

skew{
	transform: skew(30deg,20deg);
}

于是它变成了奇怪的样子。

稍微讲下。大概是这个样子。

阔以自己实验一哈。

---

transition:width 2s, height 2s, transform 2s;

动画的过度效果

---

还是刚刚那个盒子。

上帝再也看不下去他们无休止的争吵，于是把所有transform的样式变成了伪类，当巫婆再欺负它时，就会触发。并且为了让一切看起来自然，上帝还赋予了盒子transition样式。

.main{
	width:100px;
	height:100px;
	margin:0 auto;
	font-size:10px;
	transition: width 2s, height 2s, transform 2s;	/*过度效果*/
	border:1px solid #000;
	text-align:center;
	line-height:100px;
	text-shadow: 5px 5px 5px #000;		 /*设置文字阴影*/
	border-radius: 5px;  					 /*设置圆角*/
}
.main:hover{
	transform:rotate(45deg);  				/*设置旋转*/
	transform:translate(50px,100px);		/*设置偏移*/
	transform: skew(30deg,20deg);			/*设置div的四个角的角度。*/
	transform: scale(2,4);					/*设置div宽度和高度的变化，2表示2倍，前者为width，后者为height*/
	box-shadow:0px 0px 100px #000;			/*设置div阴影*/
}

长时间的斗争使它多了text-shadow（心理阴影）和box-shadow（心外阴影）样式。使得它看起如此的饱经沧桑。

text-shadow：文字的阴影效果。
box-shadow：盒子的阴影效果。

shadow的四个参数。

width和height【也就是前两个参数】:表示偏移距离。
第三个参数:表示模糊距离，也就是阴影所产生的距离。
第四个参数:表示阴影颜色。

大概这个鬼样子

---

但是万万没想到的是。上帝完了施展的魔法只有最后一个有效【优先级的意思】，所以巫婆一触碰盒子，它只会变大，且所添加了阴影也会相应变大。
嗷呜~对了忘了说transition: width 2s, height 2s, transform 2s;了。
就是触发hover时。盒子不会立马变大，会在2秒钟之内缓慢变大。

---

已更完~~撒花★,°:.☆(￣▽￣)/$:.°★ 。【可以去当编剧了，脑补了一出大戏。】