分享一个超炫酷的css开场动画
以下是一个使用CSS创建的炫酷开场动画示例，它使用了多个旋转和缩放效果来创建一种视觉冲击力。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>炫酷开场动画</title>
<style>
@keyframes spin-fade {
0% {
opacity: 0;
transform: scale(0) rotate(-360deg);
}
100% {
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
.spinner {
width: 50px;
height: 50px;
background-color: #673ab7;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: spin-fade 2s ease-in-out infinite;
}
.spinner:nth-child(2) {
background-color: #ff5722;
animation-delay: -1s;
}
.spinner:nth-child(3) {
background-color: #4caf50;
animation-delay: -0.5s;
}
.spinner:nth-child(4) {
background-color: #03a9f4;
animation-delay: 0s;
}
.spinner:nth-child(5) {
background-color: #e91e63;
animation-delay: 0.5s;
}
.spinner:nth-child(6) {
background-color: #9c27b0;
animation-delay: 1s;
}
</style>
</head>
<body>
<div class="spinner"></div>
<div class="spinner"></div>
<div class="spinner"></div>
<div class="spinner"></div>
<div class="spinner"></div>
<div class="spinner"></div>
</body>
</html>这段代码使用了CSS3的@keyframes规则来定义一个名为spin-fade的动画，它会旋转和渐变不透明度。.spinner类被设计为一个圆形的固有属性，并且通过nth-child选择器应用了不同的颜色和动画延迟，以创建一个连续旋转的效果。
评论已关闭