CSS 六边形边框hover闭合动画效果

Posted 2023-04-02

参考技术A 1、html标签部分，因为要做hover效果，div所以要做成嵌套

2、利用伪类创建六边形，这里只取了每个伪类的top边框，是为了后面用clip做动画效果

3、添加hover边框闭合动画，这里要注意的是伪类的hover效果格式.item-boder1:hover:after，hover要写中间

4、看一下效果

CSS3 动画脱离 :hover

【中文标题】CSS3 动画脱离 :hover

【英文标题】：CSS3 Animate Out of :hover

【发布时间】：2012-01-05 00:28:27

【问题描述】：

我正在设置一个简单的动画，当您将鼠标悬停在图像上时会显示一些附加信息。 jQuery 备份部分已编写并且工作正常，但我遇到的问题是当用户悬停时让 CSS3 动画反转。

因此，当您将鼠标悬停在其中时效果很好，但是一旦您将鼠标悬停，元素就会消失。我想知道的是，当鼠标悬停在其他地方时，是否有办法让它们向后动画。非常感谢！

#recent-work div  position: relative; width: 300px; height: 168px; overflow: hidden; 
                
                #recent-work div:hover .recent-project-type   
                    animation-name: showType;
                    animation-duration: .5s;
                    animation-timing-function: ease;
                    animation-delay: 0;
                    animation-iteration-count: 1;
                    animation-direction: normal;
                    animation-play-state: running;
                    -moz-animation-name: showType;
                    -moz-animation-duration: .5s;
                    -moz-animation-timing-function: ease;
                    -moz-animation-delay: 0;
                    -moz-animation-iteration-count: 1;
                    -moz-animation-direction: normal;
                    -moz-animation-play-state: running;
                    -webkit-animation-name: showType;
                    -webkit-animation-duration: .5s;
                    -webkit-animation-timing-function: ease;
                    -webkit-animation-delay: 0;
                    -webkit-animation-iteration-count: 1;
                    -webkit-animation-direction: normal;
                    -webkit-animation-play-state: running;
                    top: 0;
                
                
                #recent-work div:hover .recent-project-title   
                    animation-name: showTitle;
                    animation-duration: .5s;
                    animation-timing-function: ease;
                    animation-delay: 0;
                    animation-iteration-count: 1;
                    animation-direction: normal;
                    animation-play-state: running;
                    -moz-animation-name: showTitle;
                    -moz-animation-duration: .5s;
                    -moz-animation-timing-function: ease;
                    -moz-animation-delay: 0;
                    -moz-animation-iteration-count: 1;
                    -moz-animation-direction: normal;
                    -moz-animation-play-state: running;
                    -webkit-animation-name: showTitle;
                    -webkit-animation-duration: .5s;
                    -webkit-animation-timing-function: ease;
                    -webkit-animation-delay: 0;
                    -webkit-animation-iteration-count: 1;
                    -webkit-animation-direction: normal;
                    -webkit-animation-play-state: running;
                    bottom: 0;
                
            
            .recent-project-title  position: absolute; left: 0; right: 0; bottom: -34px; padding: 8px 10px; background: rgba(0,0,0,.75); text-decoration: none; border: 0; font-size: 20px; font-weight: 400; color: #fff; 
                .recent-project-title:hover  color: #ff9900; text-decoration: none; 
                
            .recent-project-type  position: absolute; left: 0; top: -26px; padding: 4px 8px; font-size: 12px; font-weight: 600; background: #ff9900; text-transform: uppercase; color: #111; 
                .recent-project-type:hover  color: #fff; text-decoration: none; 

@keyframes showType 
    from  top: -26px; 
    to  top: 0; 


@-moz-keyframes showType 
    from  top: -26px; 
    to  top: 0; 


@-webkit-keyframes showType 
    from  top: -26px; 
    to  top: 0; 


@keyframes showTitle 
    from  bottom: -34px; 
    to  bottom: 0; 


@-moz-keyframes showTitle 
    from  bottom: -34px; 
    to  bottom: 0; 


@-webkit-keyframes showTitle 
    from  bottom: -34px; 
    to  bottom: 0; 

<div class="row" id="recent-work">
            <div class="span-one-third">
                <a href="#" class="recent-project-image"><img src="http://dl.dropbox.com/u/1762184/recent-work01.png"  ></a>
                <a href="#" class="recent-project-title">Philly</a>
                <a href="#" class="recent-project-type">Video</a>
            </div>
</div>

【问题讨论】：

目前很棒的动画。 +1 我看看能不能反过来。

谢谢，约翰。查看 bookcasey 的答案以获得比我所拥有的更简单的解决方案。

【参考方案1】：

对于这么简单的事情，您不需要关键帧。

我给你做了一个demo（为了简单起见，只有-webkit供应商前缀）。

【讨论】：

哇，这比我做的方式更有意义。感谢您的帮助！

FYI2，这不适用于 IE8，因为这只是 CSS3+ 功能。 IE8 使用 2.1 (Windows XP)

【参考方案2】：

这也可以通过 CSS 过渡来完成，它的功能不那么强大但更简单。 这个想法是有一个包含顶部和底部链接的 div，但它比包装器 div 大，以便隐藏部分。当您将鼠标悬停在它上面时，它会降低高度，因此链接可见。为了让它来回动画，你将“transition : height 1s”添加到 div 的 css 中。以后有时间我会努力写的。

【参考方案3】：

我相信如果您将动画添加到非悬停状态，您可以让它们过渡回来。请参阅我的超级简单示例 here。

【讨论】：

是的，即使您从悬停状态中删除 transition 属性，它也只能工作:)

在你的例子中使用过渡的缺点是它只影响它所在的​​元素，所以不可能有更复杂的动画（比如因为悬停一个元素而影响其他元素） .