2023年政策修订增补工作正在进行中，欢迎参与！
User:Tamsui/存档/Help:沙盒/电风扇/styles.css
跳转到导航
跳转到搜索
注意：在保存之后，您可能需要清除浏览器缓存才能看到所作出的变更的影响。
- Firefox/Safari：按住“Shift”的同时单击“刷新”，或按“Ctrl-F5”或“Ctrl-R”（Mac为“⌘-R”）
- Google Chrome：按“Ctrl-Shift-R”（Mac为“⌘-Shift-R”）
- Internet Explorer：按住“Ctrl”的同时单击“刷新”，或按“Ctrl-F5”
- Opera：在“工具→首选项”中清除缓存
- 如果您已登录但该页面出现未登录状态，请尝试在地址栏的地址最后添加代码
?_=1来访问最新页面。 - 添加代码后的本页地址如下：
-{R|https://moegirl.icu/User:Tamsui/%E5%AD%98%E6%A1%A3/Help:%E6%B2%99%E7%9B%92/%E7%94%B5%E9%A3%8E%E6%89%87/styles.css?_=1}-
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-1440deg);
}
}
@keyframes rotateY {
0% {
transform: rotateY(0deg)translateZ(50px);
filter: drop-shadow(25px 15px 2px rgba(0, 0, 0, .5));
}
25% {
transform: rotateY(-30deg)translateZ(50px);
filter: drop-shadow(10px 15px 2px rgba(0, 0, 0, .5));
}
50% {
filter: drop-shadow(25px 15px 2px rgba(0, 0, 0, .5));
}
75% {
transform: rotateY(30deg)translateZ(50px);
filter: drop-shadow(10px 15px 2px rgba(0, 0, 0, .5));
}
100% {
transform: rotateY(0deg)translateZ(50px);
filter: drop-shadow(25px 15px 2px rgba(0, 0, 0, .5));
}
}
@keyframes rotateZ {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
@keyframes RGB {
0% {
filter: brightness(1.1)drop-shadow(0 0 40px #FF9999);
}
33.3% {
filter: brightness(1.1)drop-shadow(0 0 40px #FF9999);
}
33.4% {
filter: brightness(1.1)drop-shadow(0 0 40px #99FF99);
}
66.7% {
filter: brightness(1.1)drop-shadow(0 0 40px #99FF99);
}
66.8% {
filter: brightness(1.1)drop-shadow(0 0 40px #9999FF);
}
100% {
filter: brightness(1.1)drop-shadow(0 0 40px #9999FF);
}
}
.textToggleDisplay-on+.fan {
animation: rotate 1s linear infinite;
}
.fan>:first-child>:first-child {
animation: rotateZ 1s linear infinite reverse;
}
.fan:active>:first-child>:first-child {
animation: rotateZ 0.2s linear infinite reverse, RGB 5s linear infinite;
}
.fan3Dbg {
perspective: 100em;
perspective-origin: 50% 20%;
transition: 3s;
}
.fan3Dbg.textToggleDisplay-on {
perspective-origin: 50% 33%;
perspective: 9em;
}
.fan3D, .fan3D div {
transform-style: preserve-3d;
box-sizing: border-box;
}
.fan3D:hover {
animation: rotateFan 10s ease-in-out infinite;
}
.fan3D > div {
position: relative;
}
.fan3D > div div {
position: absolute;
}
.blades, .cover {
transform: translateZ(4em);
}
.blades > div:not(.axis) {
width: 50%;
height: 50%;
background: linear-gradient(to right, #e0e3e5, #8d9398);
border-radius: 25% 75% 50% 50% / 25% 25% 75% 75%;
left: 25%;
top: 0;
transform-origin: bottom;
}
.cover > div {
border-radius: 50%;
border: .2em solid;
box-sizing: border-box;
left: 50%;
top: 50%;
}
@keyframes rotateHead {
from {
transform: rotateY(-40deg);
}
to {
transform: rotateY(40deg);
}
}
@keyframes rotateBlade {
from {
transform: translateZ(4em) rotateZ(0deg);
}
to {
transform: translateZ(4em) rotateZ(360deg);
}
}
@keyframes rotateFan {
from {
transform: rotate3d(1, 1, 1, 360deg);
}
50% {
transform: none;
}
to {
transform: rotate3d(-1, 1, 1, 360deg);
}
}