css动画效果实现

发布于 09-07 22:21 字数 215 浏览 13 评论 0

像这个http://www.social-touch.com/s... 网站里面点击图上部分的动画是怎么实现的,有大神有思路吗?
图片描述

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

二智少女2022-09-14 22:21:14

<div class="main">
<div class="main-back"></div>
<div class="mian-content">5555</div>
</div>
.main{
width:200px;
height:200px;
position:relative;

}

.main-back,
.mian-content{
width:100%;
height:100%;
position:absalute;
}
.main-back{
display:none;
z-index:1;
background:red;
}
.mian-content{

z-index:2;

}
.main:hover .main-back{
display:block
}

红ご颜醉2022-09-14 22:21:14

这个效果包含两个部分:
first:
点击的div向左移动,也就是点击的时候设置left = 0;
second:
显示选项的div,看的出来是scale从0到1,位置从最左边到点击div的width

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文