`
اثر مایع پیچ و تاب دوگانه
* {
حاشیه: 0 ؛
بالشتک: 0 ؛
اندازه جعبه: جعبه مرزی ؛
سرریز: پنهان ؛
}
بدن {
زمینه: سیاه ؛
ارتفاع: 100VH ؛
نمایش: فلکس ؛
توجیه-محتوای: فضا بین ؛
Align-adems: Center ؛
}
.warp-container {
display: flex;
width: 100%;
height: 100%;
}
.warp-section {
position: relative;
width: 50%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.warp-effect {
position: absolute;
width: 90%;
height: 90%;
filter: url(#warpFilter);
}
.left .warp-effect {
background: linear-gradient(45deg, cyan, blue, purple);
}
.right .warp-effect {
background: linear-gradient(45deg, red, orange, yellow);
}
.center-orb {
position: absolute;
width: 120px;
height: 120px;
background: radial-gradient(circle, rgba(255, 0, 255, 0.8), rgba(0, 255, 255, 0.6));
border-radius: 50%;
filter: blur(20px) drop-shadow(0 0 30px rgba(255, 0, 255, 0.8));
animation: morph 5s infinite alternate ease-in-out, pulse 3s infinite;
}
@keyframes morph {
0% { border-radius: 50%; transform: scale(1) rotate(0deg); }
50% { border-radius: 40% 60% 50% 50%; transform: scale(1.1) rotate(30deg); }
100% { border-radius: 60% 40% 50% 50%; transform: scale(1) rotate(-30deg); }
}
@keyframes pulse {
0% { filter: blur(10px) drop-shadow(0 0 20px rgba(255, 0, 255, 0.9)); }
50% { filter: blur(25px) drop-shadow(0 0 40px rgba(0, 255, 255, 0.9)); }
100% { filter: blur(10px) drop-shadow(0 0 20px rgba(255, 0, 255, 0.9)); }
}
svg {
position: absolute;
width: 0;
height: 0;
}
& lt ؛/سبک & gt ؛
& lt ؛ svg & gt ؛
& lt ؛ فیلتر شناسه = "warpfilter" & gt ؛
& lt ؛ feturbession type = "fractalnoise" basefrequency = "0.02" numoctaves = "6" seed = "3" & gt ؛
& lt ؛ animate attributeName = "Seed" مقادیر = "3 ؛ 6 ؛ 9 ؛ 3" DUR = "5S" Repercount = "نامحدود"/& gt ؛
& lt ؛/feturbence & gt ؛
& lt ؛ fedisplactionmap in = "sourcegraphic" scale = "50" & gt ؛
& lt ؛ animate attributeName = "Scale" مقادیر = "20 ؛ 50 ؛ 30 ؛ 40 ؛ 40 ؛ 20" dur = "6s" RepearCount = "نامحدود"/& gt ؛
& lt ؛/fedisplactionmap & gt ؛
& lt ؛/فیلتر & gt ؛
& lt ؛/svg & gt ؛
`
