Question

html怎么用css3实现图片从无到有

Answer 1

div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: -webkit-transform .5s ease-in, background .5s ease-in;
-moz-transition: -moz-transform .5s ease-in, background .5s ease-in;
-o-transition: -o-transform .5s ease-in, background .5s ease-in;
transition: transform .5s ease-in, background .5s ease-in;
}

div:hover {
-webkit-transform: rotate(180deg) scale(2);
-moz-transform: rotate(180deg) scale(2);
-o-transform: rotate(180deg) scale(2);
-transform: rotate(180deg) scale(2);
background: blue;
}

把这种背景颜色形式换成背景图片就可以了，希望可以帮到你。

Answer 2

<style type="text/css">
/*方法一 动画*/
.changeImg{animation: changeImg 5s;width: 100px;height: 100px;}
@keyframes changeImg{
0%{width: 0px;height: 0px;}
100%{width: 100px;height: 100px;}
}
/*方法二：hover*/
.openImg{width: 100px;height: 100px;background-color: red;}
.openImg img{width: 0px;height: 0px;}
.openImg:hover img{width: 100px;height: 100px;transition: 2s ease;}
</style>
<!-- 方法一 动画 -->
<img src="11111.png" class="changeImg">
<!-- 方法二：hover -->
<div class="openImg">
<img src="11111.png">
</div>
第二种需要把鼠标放上去。

Answer 3

这实现起来就复杂一点了，需要设置很多呢。这里面写不了代码的……