主页 / 问题 / 970908
Accepted
I_CaR
Asked:2020-04-18 00:34:44 +0000 UTC2020-04-18 00:34:44 +0000 UTC

决定学习css动画。但我不明白如何制作正确的鼠标

  • 772

看起来这是想要的结果，但是第二个对象的动画在页面加载后立即开始，这不是必需的。效果必须与第一个对象相同。指向 - 动画，将鼠标从对象上移开 - 以相反的顺序动画。一句话，创意插播。这里有一个例子：

#area {
          width: 162px;
          height: 162px;
}

.rotate {
          transition: all 0.5s linear;
          border: solid 5px #ff0000;
          width: 150px;
          height: 150px;
          display: block;
          opacity: 0.2;
}
 
.rotate:hover {


          transform: rotate(180deg);
          width: 100px;
          height: 100px;
          opacity: 1;
          
}


#rotate_01
{
	width:340px; height:262px;
  border: solid 5px #FF0000;
	opacity:0.2;
	/*transition: linear 1s;*/
  /*transition: all 1s linear;*/
  animation: morph_mouse_out 1s linear;
  

}


#rotate_01:hover {
	opacity:1.0;
	animation: morph 1s linear;
	/*width: 240px; height: 200px;*/ /*прописал в саму анимацию, иначе если оттуда убрать, то прыгать начинает*/
  animation-fill-mode: forwards; /* без этого кода div переворачиваться! */
          
}

@keyframes morph {
    0%   {transform: rotate(0deg); opacity:0.2; width:340px; height:262px; }
    25%  {}
    50%  {transform: rotate(90deg); opacity:0.5;}
    75%  {}
    100% {transform: rotate(180deg); opacity:1.0; width: 240px; height: 200px;}
}

@keyframes morph_mouse_out {
    0%   {transform: rotate(180deg); opacity:1.0; width: 240px; height: 200px;}
    25%  {}
    50%  {transform: rotate(90deg); opacity:0.5;}
    75%  {}
    100% {transform: rotate(0deg); opacity:0.2; width:340px; height:262px;}
}
<div id="area">
  <div class="rotate">
  Здесь просто и понятно.
  </div>
</div>

<div id="rotate_01">
А вот здесь, как сделать, чтобы при запуске\обновлении страницы этот div не анимировал?
</div>

css3

1 个回答

  1. Best Answer

    #area {
          width: 162px;
          height: 162px;
}

.rotate {
          transition: all 0.5s linear;
          border: solid 5px #ff0000;
          width: 150px;
          height: 150px;
          display: block;
          opacity: 0.2;
}
 
.rotate:hover {


          transform: rotate(180deg);
          width: 100px;
          height: 100px;
          opacity: 1;
          
}


#rotate_01
{
 transition: all 0.5s linear;
	width:340px; height:262px;
  border: solid 5px #FF0000;
	opacity:0.2;
	/*transition: linear 1s;*/
  /*transition: all 1s linear;*/
 
  

}


#rotate_01:hover {
	opacity:1.0;
	animation: morph 1s linear;
	/*width: 240px; height: 200px;*/ /*прописал в саму анимацию, иначе если оттуда убрать, то прыгать начинает*/
transform: rotate(180deg);
}

@keyframes morph {
    0%   {transform: rotate(0deg); opacity:0.2; width:340px; height:262px; }
    25%  {}
    50%  {transform: rotate(90deg); opacity:0.5;}
    75%  {}
    100% {transform: rotate(180deg); opacity:1.0; width: 240px; height: 200px;}
}

@keyframes morph_mouse_out {
    0%   {transform: rotate(180deg); opacity:1.0; width: 240px; height: 200px;}
    25%  {}
    50%  {transform: rotate(90deg); opacity:0.5;}
    75%  {}
    100% {transform: rotate(0deg); opacity:0.2; width:340px; height:262px;}
}
    <div id="area">
  <div class="rotate">
  Здесь просто и понятно.
  </div>
</div>

<div id="rotate_01">
А вот здесь, как сделать, чтобы при запуске\обновлении страницы этот div не анимировал?
</div>

    animation: morph_mouse_out 1s linear; 从这里删除这一行 

    #rotate_01
{
    width:340px; height:262px;
  border: solid 5px #FF0000;
    opacity:0.2;
    /*transition: linear 1s;*/
  /*transition: all 1s linear;*/
}
    • 2

相关问题