我想知道是否有办法让图标“打开”然后“关闭”。 是否有任何方法将鼠标悬停在动画上以使其开始，然后，当您停止在其上方悬停时，播放与原始动画相同但反向的不同动画，并从第一个动画所在的点开始。 例如： 您将鼠标悬停在图像上3秒，它将播放5秒动画，直到您停止悬停在它上面时才会停止。一旦你停止悬停在动画上，它就不会完成播放，但它将播放从2s开始到5s结束的反向动画。
谢谢。
答案 0 :(得分：0)
您是否尝试过使用transition属性。例如。运行以下代码段并将鼠标悬停在方块上，然后将鼠标悬停在外，检查这是否是您要查找的内容。
.square {
margin: 50px auto 0;
width: 100px;
height: 100px;
border: 10px solid blue;
background: lightblue;
cursor: pointer;
transform: rotate(0deg);
transition: transform 2s;
}
.square:hover{
transform: rotate(45deg);
}<div class="square"></div>
希望这有帮助。
[根据第一条评论更新]
我已经开发了一个像这样的jquery和纯css解决方案。它包括一个打开以显示其文本内容的信封。下面是纯css片段。希望这可以帮助你和正在寻找这个的任何人。
body{
margin: 0px;
padding:0px;
}
#envelope-bg {
position: relative;
overflow:hidden;
}
.envelope-container {
position: relative;
height: 405px;
width: 405px;
background: rgba(0, 0, 0, 0.1);
border-radius: 2px;
-ms-border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
-webkit-border-radius: 2px;
}
.envelope-container .envelope {
position: absolute;
height: 200px;
width: 200px;
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -100px;
background: #F9F9F9;
transform: rotate(-180deg);
transition: 2s ease all;
-ms-transition: 2s ease all;
-moz-transition: 2s ease all;
-o-transition: 2s ease all;
-webkit-transition: 2s ease all;
-webkit-backface-visibility: hidden;
}
.envelope-container:hover .envelope {
transition-delay: 150ms;
-ms-transition-delay: 150ms;
-moz-transition-delay: 150ms;
-o-transition-delay: 150ms;
transform: rotate(0deg);
}
.envelope-container .envelope .top {
position: absolute;
z-index: 20;
top: 0px;
left: 0px;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 100px solid #333;
transform-origin: top;
-ms-transform-origin: top;
-moz-transform-origin: top;
-o-transform-origin: top;
-webkit-transform-origin: top;
transition: transform 2s 150ms, z-index 0ms 150ms, height 2s 0ms, top 2s 0ms;
-ms-transition: -ms-transform 2s 150ms, z-index 0ms 150ms, height 2s 0ms, top 2s 0ms;
-moz-transition: -moz-transform 2s 150ms, z-index 0ms 150ms, height 2s 0ms, top 2s 0ms;
-o-transition: -o-transform 2s 150ms, z-index 0ms 150ms, height 2s 0ms, top 2s 0ms;
-webkit-transition: -webkit-transform 2s 150ms, z-index 0ms 150ms, height 2s 0ms, top 2s 0ms;
}
.envelope-container:hover .envelope .top {
transition: transform 2s 0ms, height 2s 150ms, top 2s 150ms;
-ms-transition: -ms-transform 2s 0ms, height 2s 150ms, top 2s 150ms;
-moz-transition: -moz-transform 2s 0ms, height 2s 150ms, top 2s 150ms;
-o-transition: -o-transform 2s 0ms, height 2s 150ms, top 2s 150ms;
-webkit-transition: -webkit-transform 2s 0ms, height 2s 150ms, top 2s 150ms;
height: 100px;
top: 0px;
transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
}
.envelope-container .envelope .right {
position: absolute;
z-index: 20;
top: 0px;
right: 0px;
border-right: 100px solid #333;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
transform-origin: right;
-ms-transform-origin: right;
-moz-transform-origin: right;
-o-transform-origin: right;
-webkit-transform-origin: right;
transition: transform 2s 150ms, z-index 0ms 150ms, width 2s 0ms, right 2s 0ms;
-ms-transition: -ms-transform 2s 150ms, z-index 0ms 150ms, width 2s 0ms, right 2s 0ms;
-moz-transition: -moz-transform 2s 150ms, z-index 0ms 150ms, width 2s 0ms, right 2s 0ms;
-o-transition: -o-transform 2s 150ms, z-index 0ms 150ms, width 2s 0ms, right 2s 0ms;
-webkit-transition: -webkit-transform 2s 150ms, z-index 0ms 150ms, width 2s 0ms, right 2s 0ms;
}
.envelope-container:hover .envelope .right {
transition: transform 2s 0ms, width 2s 150ms, right 2s 150ms;
-ms-transition: -ms-transform 2s 0ms, width 2s 150ms, right 2s 150ms;
-moz-transition: -moz-transform 2s 0ms, width 2s 150ms, right 2s 150ms;
-o-transition: -o-transform 2s 0ms, width 2s 150ms, right 2s 150ms;
-webkit-transition: -webkit-transform 2s 0ms, width 2s 150ms, right 2s 150ms;
width: 100px;
right: 0px;
transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
.envelope-container .envelope .left {
position: absolute;
z-index: 20;
top: 0px;
left: 0px;
border-left: 100px solid #333;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
transform-origin: left;
-ms-transform-origin: left;
-moz-transform-origin: left;
-o-transform-origin: left;
-webkit-transform-origin: left;
transition: transform 2s 150ms, z-index 0ms 150ms, width 2s 0ms, left 2s 0ms;
-ms-transition: -ms-transform 2s 150ms, z-index 0ms 150ms, width 2s 0ms, left 2s 0ms;
-moz-transition: -moz-transform 2s 150ms, z-index 0ms 150ms, width 2s 0ms, left 2s 0ms;
-o-transition: -o-transform 2s 150ms, z-index 0ms 150ms, width 2s 0ms, left 2s 0ms;
-webkit-transition: -webkit-transform 2s 150ms, z-index 0ms 150ms, width 2s 0ms, left 2s 0ms;
}
.envelope-container:hover .envelope .left {
transition: transform 2s 0ms, width 2s 150ms, left 2s 150ms;
-ms-transition: -ms-transform 2s 0ms, width 2s 150ms, left 2s 150ms;
-moz-transition: -moz-transform 2s 0ms, width 2s 150ms, left 2s 150ms;
-o-transition: -o-transform 2s 0ms, width 2s 150ms, left 2s 150ms;
-webkit-transition: -webkit-transform 2s 0ms, width 2s 150ms, left 2s 150ms;
width: 100px;
left: 0px;
transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
.envelope-container .envelope .bottom {
position: absolute;
z-index: 20;
bottom: 0px;
left: 0px;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid #333;
transform-origin: bottom;
-ms-transform-origin: bottom;
-moz-transform-origin: bottom;
-o-transform-origin: bottom;
-webkit-transform-origin: bottom;
transition: transform 2s 150ms, z-index 0ms 150ms, height 2s 0ms, bottom 2s 0ms;
-ms-transition: -ms-transform 2s 150ms, z-index 0ms 150ms, height 2s 0ms, bottom 2s 0ms;
-moz-transition: -moz-transform 2s 150ms, z-index 0ms 150ms, height 2s 0ms, bottom 2s 0ms;
-o-transition: -o-transform 2s 150ms, z-index 0ms 150ms, height 2s 0ms, bottom 2s 0ms;
-webkit-transition: -webkit-transform 2s 150ms, z-index 0ms 150ms, height 2s 0ms, bottom 2s 0ms;
}
.envelope-container:hover .envelope .bottom {
transition: transform 2s 0ms, height 2s 150ms, left 2s 150ms;
-ms-transition: -ms-transform 2s 0ms, height 2s 150ms, left 2s 150ms;
-moz-transition: -moz-transform 2s 0ms, height 2s 150ms, left 2s 150ms;
-o-transition: -o-transform 2s 0ms, height 2s 150ms, left 2s 150ms;
-webkit-transition: -webkit-transform 2s 0ms, height 2s 150ms, left 2s 150ms;
height: 100px;
bottom: 0px;
transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
}
.envelope-container:hover .envelope .envelope-inner {
background: #333;
}
.envelope-container .envelope .envelope-inner {
position: absolute;
height: 176px;
padding: 10px;
width: 176px;
top: 0px;
left: 0px;
background: #fff;
z-index: 10;
border:2px solid black;
transition: all 2s 0ms;
-ms-transition: all 2s 0ms;
-moz-transition: all 2s 0ms;
-o-transition: all 2s 0ms;
-webkit-transition: all 2s 0ms;
}
.envelope-container .envelope .envelope-inner p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
color:#fff;
padding:10px;
}<div id="envelope-bg">
<div class="envelope-container">
<div class="envelope">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="envelope-inner">
<p>This is a test message. This is a test message. This is a test message</p>
</div>
</div>
</div>
</div>