色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css中秋特效

錢琪琛2年前12瀏覽0評論

在中秋佳節來臨之際,為了給網站增添節日氣氛,我們可以添加一些中秋主題的CSS特效。下面介紹幾種簡單易學的中秋特效。

1. 月餅動畫特效

.mooncake {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #f6a623;
background-image: radial-gradient(circle at 20%, #ede5c0 0%, #f5d56e 15%, #f6a623 99%);
position: relative;
transform: rotate(45deg);
animation: rotate 5s linear infinite;
}
.mooncake:before {
content: "";
width: 40%;
height: 40%;
background-color: #f6a623;
border-radius: 50%;
position: absolute;
top: 30%;
left: 30%;
}
.mooncake:after {
content: "";
width: 60%;
height: 60%;
background-color: #ffffff;
border-radius: 50%;
position: absolute;
top: 20%;
left: 20%;
}
@keyframes rotate {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}

2. 煙花爆炸特效

.firework {
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #f6a623;
animation: explode 2s ease-out;
}
.firework:before, .firework:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
border-radius: inherit;
background-color: inherit;
}
.firework:before {
transform: rotate(45deg);
}
.firework:after {
transform: rotate(-45deg);
}
@keyframes explode {
0% { transform: scale(0); }
50% { transform: scale(1.5); }
100% { transform: scale(5); opacity: 0; }
}

3. 燈籠動畫特效

.lantern {
position: relative;
width: 100px;
height: 200px;
}
.lantern:before, .lantern:after {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-style: solid;
}
.lantern:before {
border-width: 0 10px 80px 10px;
border-color: transparent transparent #f6a623 transparent;
}
.lantern:after {
border-width: 80px 10px 0 10px;
border-color: #f6a623 transparent transparent transparent;
}
.lantern span {
position: absolute;
top: 40%;
left: 50%;
transform: translateX(-50%);
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #f6a623;
animation: lantern-blink 1s infinite alternate;
}
@keyframes lantern-blink {
0% { opacity: 0.6; }
100% { opacity: 1; }
}

以上是三種簡單的中秋主題CSS特效,可以通過修改代碼自定義不同的效果,讓網站增添中秋節日氣氛。