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

最新推荐文章于 2025-01-06 09:30:41 发布

转载最新推荐文章于 2025-01-06 09:30:41 发布 · 3.8k 阅读

html+css 专栏收录该内容

113 篇文章

订阅专栏

本文详细介绍了如何使用CSS实现zoomin和zoomout两种动画效果，并提供了完整的代码示例。这两种效果广泛应用于网页元素的过渡动画中，能够增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.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);}
}