transform实现的效果展示——w3cdream|前端学习-开发

'I'm W3cdream,创造',前·所·未·有
transform实现的效果展示

发布作者:萧强   发布时间:2014-01-06   阅读次数:5265

萧强每天会写一些小的效果来帮助那些学习前端的同学们,每日一练w3cdream梦想站

css代码

.demo1{
	width:400px;
	height:500px;
	margin:200px auto;
	
	}
.top {
	background-image:url(bg.jpg);
	background-repeat:no-repeat;
	background-position:0% 0%;
	-moz-transition: all 0.5s ease-in;
    -webkit-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
	height:200px;
	width:200px;
	}
	
.top:hover {
	background-image:url(bg.jpg);
	background-repeat:no-repeat;
	background-position:100% 100%;
	-moz-transition: all 0.5s ease-in;
    -webkit-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
	-webkit-transform: rotate(180deg) scale(1);
   -moz-transform: rotate(180deg) scale(1);
    -o-transform: rotate(180deg) scale(1);
	height:200px;
	width:200px;
	}

html代码

<div class="demo1">
<h3>萧强每天会写一些小的效果来帮助那些学习前端的同学们,每日一练<a target="_blank" href="http://www.w3cdream.com">w3cdream梦想站</a></h3>
<div class="top"></div>
</div>








如需转载请注明出处:w3cdream梦想站

常用昵称:萧强,全端布道者

姓名:“刘晓强”,W3CDream创始人,目前就职于易点付。专注于web前端和移动端方面知识的研究,熟练掌握photoshop和AI,喜爱Flat UI设计和Metro UI风格,熟练掌握CSS3+HTML5技术、LESS CSS和Sass CSS,还有jQuery框架方面及一些前端框架bootstrap响应式设计等。新浪微博
友荐云推荐

团队动态

热点文章

新闻资讯

标签云

友情赞助