css3放大显示div（由远及近显示）

来源：互联网发布：网络语雪崩是什么意思编辑：程序博客网时间：2024/06/07 12:07

.ktms-container .itemrow .wecando .wecando-cartoon2{ animation-name:zoomin; animation-duration:1s; -webkit-animation-name:zoomin; -webkit-animation-duration:1s;}
@keyframes zoomin
{
from { transform:scale(0.5,0.5); opacity: 0; filter:alpha(opacity=0);}
to { transform:scale(1,1); opacity: 1; filter:alpha(opacity=100);}
}
@-webkit-keyframes zoomin /* Safari and Chrome */
{
from { -webkit-transform:scale(0.5,0.5); opacity: 0; filter:alpha(opacity=0);}
to { -webkit-transform:scale(1,1); opacity: 1; filter:alpha(opacity=100);}
}
.ktms-container .itemrow .wecando .wecando-cartoon2{ animation-name:zoomout; animation-duration:1s; -webkit-animation-name:zoomout; -webkit-animation-duration:1s;}
@keyframes zoomout
{
from { transform:scale(1.2,1.2); opacity: 0.5; filter:alpha(opacity=50);}
to { transform:scale(1,1); opacity: 1; filter:alpha(opacity=100);}
}
@-webkit-keyframes zoomout /* Safari and Chrome */
{
from { -webkit-transform:scale(1.2,1.2); opacity: 0.5; filter:alpha(opacity=50);}
to { -webkit-transform:scale(1,1);; opacity: 1; filter:alpha(opacity=100);}
}

阅读全文

0 0