JQuery 悬停表格设计动画

JQuery hover tabular design animation

本文关键字：动画 表格 悬停 JQuery      更新时间：2023-09-26

我正在浏览这个网站，我在Compatibility部分发现了这个非常好的动画。

http://html5css3templates.com/themes/taketheplunge/templates/index.html#about

我正在尝试实施它。将鼠标悬停在部分，更改设计是我知道的。但我仍然无法设计出这样的东西。有人可以帮助我吗？

转到样式表： http://html5css3templates.com/themes/taketheplunge/templates/css/layout.css并查看有关覆盖的部分：

.brideOverlay {
    border: 5px solid rgba(242, 168, 181, 0.9);
    border-radius: 50%;
    box-shadow: 0 0 0 10px rgba(242, 168, 181, 0.3) inset;
    width: 420px;
    height: 420px;
    transition: all 0.5s ease-in-out 0s;
    margin-bottom: 30px;
    position: absolute;
}
.brideOverlay h2{
    text-align: center;
    padding-top: 190px;
    opacity: 0;
    transform: scale(0);
    transition: all 0.8s ease-in-out 0s;
}
etc...
这是一些 CSS3

代码，所以看看 CSS3 介绍。

显示的效果是使用 css3 过渡。 transition bar class的属性决定了效果的速度。悬停 css 完成其余的工作

.bar{
    transition: all 0.6s ease-in-out 0s;
}
.compatibility:hover .percent80 {
    width: 80%;
}

结帐小提琴

相关文章：