隐藏和动画时，鼠标在

hide and animate when mouse over

本文关键字：鼠标 动画 隐藏      更新时间：2023-09-26

我想要我的div隐藏当鼠标悬停和翻转动画的时候，当鼠标离开div返回。所以我做了这样的事情。

<div class="tec">
    <span class="html5"><img ng-src="../images/Technologies/HTML5.png" alt="html5"  /></span>
</div>


<script>
$(document).ready(function(){
    $(".html5").mouseover(function(){
        $(".html5").hide(500);
        $(".html5").addclass(".htmlanimate");
        });
    });
    $(".html5").mouseout(function(){
        $(".html5").addclass(".html5");
    });
</script>

到目前为止，我只能隐藏-其他一切都不工作=/

CSS 

.htmlanimate {
    -webkit-animation-name: html5animate;
    /* Chrome, Safari, Opera / -webkit-animation-duration: 4s; / Chrome, Safari, Opera / -webkit-animation-iteration-count: 3; / Chrome, Safari, Opera */
    animation-name: html5animate;
    animation-duration: 4s;
    animation-iteration-count: 3;
}
@-webkit-keyframes html5animate {
    0% {
        border-left:10px solid red;
    }
    25% {
        border-top:10px solid red;
    }
    50% {
        border-right:10px solid red;
    }
    100% {
        border-bottom:10px solid red;
    }
}

我想这可能对你有帮助，如果我能更好地理解你:

演示

var img = document.getElementById('imageid'); 
var width = img.clientWidth;
var height = img.clientHeight;
$(".html5").hover(function(){
	$(".html5").css("height", height + "px");
	$(".html5").css("width", width + "px");
    $(".html5").addClass("htmlanimate");
    $("#imageid").fadeOut(500);
    
}, function(){
    $("#imageid").fadeIn(500);
	$(".html5").removeClass("htmlanimate");
});
.html5
{
   display:inline-block;
   border:10px solid transparent;
}
.htmlanimate {
    -webkit-animation-name: html5animate;
    /* Chrome, Safari, Opera / -webkit-animation-duration: 4s; / Chrome, Safari, Opera / -webkit-animation-iteration-count: 3; / Chrome, Safari, Opera */
    animation: html5animate 5s infinite;  
    animation-iteration-count: 3;
}
@-webkit-keyframes html5animate {
    0%, 25% {
        border-left:10px solid red;
    }
    25%,50%,74%  {        
        border-left:10px solid red;
        border-top:10px solid red;
    }
    75% {        
        border-left:10px solid red;
        border-top:10px solid red;
        border-right:10px solid red;
    }
    100% {        
        border-left:10px solid red;
        border-top:10px solid red;
        border-right:10px solid red;
        border-bottom:10px solid red;
    }   
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tec">
    <span class="html5">
        <img id="imageid" src="https://www.google.co.in/logos/doodles/2015/googles-17th-birthday-6231962352091136-hp.png" alt="html5"  />
    </span>
</div>

相关文章：