Question

基本上，我有一组元素形状的形状，我希望动画从不可见到不透明，同时围绕屏幕中心排列。

我已经读过CSS3动画/转换/翻译已经走了很长的路，并且足以做到这一点，但我在制作一切都有点麻烦。现在，右边和下面的钻石不会移动，左边和上面的钻石不会褪色，如果我修改浏览器的宽度，一切都会互相折叠。

使用CSS3我甚至可以做什么？我听说在这一点上最好尝试摆脱jQuery，但说实话，我甚至不是100％在jQuery中如何做到这一点。

这是我到目前为止所做的：

HTML：

/* Diamonds Animations */
@keyframes fade-in {
  from {opacity: 0;}
  to {opacity: 100;}
}

@keyframes center-from-left {
  0% {
     left: 0%;   
    }
  100% {
     left: 45%;    
   }
 }

@keyframes center-from-top {
  0% {
     top: 0%;
  }
  100% {
     top: 35%;
  }
}

@keyframes center-from-right {
  0% {
    right: 15%;    
  }
  100% {
   right: 38.6%;    
  }
}

@keyframes center-from-bottom {
  0% {
    bottom: 0%;
  }
  100% {
    bottom: 24%;
  }
}

CSS：

/* Diamonds */
#blue-diamond {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 70px solid blue;
position: absolute;
top: 46.5%;
left: 45%;
animation-name: fade-in;
animation-name: center-from-left;
animation-duration: 5s;
}
#blue-diamond:after {
content: '';
position: absolute;
left: -50px; top: 70px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid blue;
}


#purple-diamond {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 70px solid purple;
position: absolute;
top: 35%;
left: 49.25%;
margin: auto;
animation-name: fade-in;
animation: center-from-top;
animation-duration: 5s;
}
#purple-diamond:after {
content: '';
position: absolute;
left: -50px; 
top: 70px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid purple;  
}

#yellow-diamond {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 70px solid yellow;
position: absolute;
top: 46.5%;
right: 38.6%;
animation-name: center-from-right;
animation-name: fade-in;
animation-duration: 5s;
}
#yellow-diamond:after {
content: '';
position: absolute;
left: -50px; top: 70px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid yellow;
}

 #red-diamond {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 70px solid red;
position: absolute;
bottom: 24%;
left: 49.25%;
animation-name: center-from-bottom;
animation-name: fade-in;
animation-duration: 5s;
}
#red-diamond:after {
content: '';
position: absolute;
left: -50px; top: 70px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid red;

}

钻石的CSS：

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class SynchroSagemApplication {

    public static void main(String[] args) {
        SpringApplication.run(SynchroSagemApplication.class, args);
    }
}

JSFiddle Here.

非常感谢您的时间！

Answer 1

您正在尝试为每个元素设置两个动画名称属性，最后覆盖第一个元素。您可以在每个@keyframe内处理多个属性。此外，opacity范围是0 - 1，您可以使用小数值 - 例如0.7。试试这个例子：

@keyframes center-from-bottom {
    0% {opacity: 0; bottom: 0%;}
    100% {opacity: 1; bottom: 24%; }
}

为你的红钻，然后修复其余的。不要忘记从#red-diamond样式中移除animation-name: fade-in;希望它有所帮助。

浏览器窗口中心周围元素的动画？

1 个答案: