CSS

语言：

CSSSCSS

确定

html,

body {

overflow: hidden;

margin: 0;

height: 100%;

}

.cases {

display: flex;

background: black;

position: absolute;

left: calc(50vw - 150vh);

height: 100vh;

width: 300vh;

}

.case {

flex: 1;

width: 100vh;

height: 100vh;

box-shadow: inset 0 0 0.125em white;

}

.rotor {

animation: rot 3.71s linear infinite;

}

.morpher {

margin: calc(-40% + 50%) auto;

width: 80%;

height: 80%;

transform: rotate(52deg);

background: linear-gradient(#dc143c, #fff, #1e90ff);

animation: morph 3s ease-in-out infinite;

}

.morpher.rotor {

animation: morph 3s ease-in-out infinite, rot 3s linear infinite;

}

@keyframes morph {

0%, 5%, 95%, 100% {

-webkit-clip-path: polygon(calc(50% + -20.01461%) calc(50% + -34.63258%), calc(50% + -17.02464%) calc(50% + -32.89623%), calc(50% + -14.01025%) calc(50% + -31.17231%), calc(50% + -11.02199%) calc(50% + -29.43664%), calc(50% + -8.01783%) calc(50% + -27.70766%), calc(50% + -4.97425%) calc(50% + -25.9857%), calc(50% + -1.97284%) calc(50% + -24.25094%), calc(50% + 1.00522%) calc(50% + -22.51643%), calc(50% + 4.00626%) calc(50% + -20.7834%), calc(50% + 7.01599%) calc(50% + -19.04668%), calc(50% + 10.0%) calc(50% + -17.32051%), calc(50% + 12.98691%) calc(50% + -15.59937%), calc(50% + 15.99583%) calc(50% + -13.86123%), calc(50% + 18.99719%) calc(50% + -12.12876%), calc(50% + 21.98835%) calc(50% + -10.41694%), calc(50% + 24.99141%) calc(50% + -8.68502%), calc(50% + 28.00445%) calc(50% + -6.91019%), calc(50% + 31.00387%) calc(50% + -5.173%), calc(50% + 34.00114%) calc(50% + -3.45292%), calc(50% + 37.00129%) calc(50% + -1.70434%), calc(50% + 40.0%) calc(50% + -0.01687%), calc(50% + 37.00129%) calc(50% + 1.70434%), calc(50% + 34.00114%) calc(50% + 3.45292%), calc(50% + 31.00387%) calc(50% + 5.173%), calc(50% + 28.00445%) calc(50% + 6.91019%), calc(50% + 24.99141%) calc(50% + 8.68502%), calc(50% + 21.98835%) calc(50% + 10.41694%), calc(50% + 18.99719%) calc(50% + 12.12876%), calc(50% + 15.99583%) calc(50% + 13.86123%), calc(50% + 12.98691%) calc(50% + 15.59937%), calc(50% + 10.0%) calc(50% + 17.32051%), calc(50% + 7.01599%) calc(50% + 19.04668%), calc(50% + 4.00626%) calc(50% + 20.7834%), calc(50% + 1.00522%) calc(50% + 22.51643%), calc(50% + -1.97284%) calc(50% + 24.25094%), calc(50% + -4.97425%) calc(50% + 25.9857%), calc(50% + -8.01783%) calc(50% + 27.70766%), calc(50% + -11.02199%) calc(50% + 29.43664%), calc(50% + -14.01025%) calc(50% + 31.17231%), calc(50% + -17.02464%) calc(50% + 32.89623%), calc(50% + -19.98539%) calc(50% + 34.64945%), calc(50% + -19.97665%) calc(50% + 31.19188%), calc(50% + -19.99088%) calc(50% + 27.71939%), calc(50% + -19.98189%) calc(50% + 24.26364%), calc(50% + -19.98663%) calc(50% + 20.79747%), calc(50% + -20.01715%) calc(50% + 17.30068%), calc(50% + -20.01551%) calc(50% + 13.834%), calc(50% + -20.00241%) calc(50% + 10.38767%), calc(50% + -20.00209%) calc(50% + 6.92218%), calc(50% + -20.0029%) calc(50% + 3.44731%), calc(50% + -20.0%) calc(50% + 0.0%), calc(50% + -20.0029%) calc(50% + -3.44731%), calc(50% + -20.00209%) calc(50% + -6.92218%), calc(50% + -20.00241%) calc(50% + -10.38767%), calc(50% + -20.01551%) calc(50% + -13.834%), calc(50% + -20.01715%) calc(50% + -17.30068%), calc(50% + -19.98663%) calc(50% + -20.79747%), calc(50% + -19.98189%) calc(50% + -24.26364%), calc(50% + -19.99088%) calc(50% + -27.71939%), calc(50% + -19.97665%) calc(50% + -31.19188%));

clip-path: polygon(calc(50% + -20.01461%) calc(50% + -34.63258%), calc(50% + -17.02464%) calc(50% + -32.89623%), calc(50% + -14.01025%) calc(50% + -31.17231%), calc(50% + -11.02199%) calc(50% + -29.43664%), calc(50% + -8.01783%) calc(50% + -27.70766%), calc(50% + -4.97425%) calc(50% + -25.9857%), calc(50% + -1.97284%) calc(50% + -24.25094%), calc(50% + 1.00522%) calc(50% + -22.51643%), calc(50% + 4.00626%) calc(50% + -20.7834%), calc(50% + 7.01599%) calc(50% + -19.04668%), calc(50% + 10.0%) calc(50% + -17.32051%), calc(50% + 12.98691%) calc(50% + -15.59937%), calc(50% + 15.99583%) calc(50% + -13.86123%), calc(50% + 18.99719%) calc(50% + -12.12876%), calc(50% + 21.98835%) calc(50% + -10.41694%), calc(50% + 24.99141%) calc(50% + -8.68502%), calc(50% + 28.00445%) calc(50% + -6.91019%), calc(50% + 31.00387%) calc(50% + -5.173%), calc(50% + 34.00114%) calc(50% + -3.45292%), calc(50% + 37.00129%) calc(50% + -1.70434%), calc(50% + 40.0%) calc(50% + -0.01687%), calc(50% + 37.00129%) calc(50% + 1.70434%), calc(50% + 34.00114%) calc(50% + 3.45292%), calc(50% + 31.00387%) calc(50% + 5.173%), calc(50% + 28.00445%) calc(50% + 6.91019%), calc(50% + 24.99141%) calc(50% + 8.68502%), calc(50% + 21.98835%) calc(50% + 10.41694%), calc(50% + 18.99719%) calc(50% + 12.12876%), calc(50% + 15.99583%) calc(50% + 13.86123%), calc(50% + 12.98691%) calc(50% + 15.59937%), calc(50% + 10.0%) calc(50% + 17.32051%), calc(50% + 7.01599%) calc(50% + 19.04668%), calc(50% + 4.00626%) calc(50% + 20.7834%), calc(50% + 1.00522%) calc(50% + 22.51643%), calc(50% + -1.97284%) calc(50% + 24.25094%), calc(50% + -4.97425%) calc(50% + 25.9857%), calc(50% + -8.01783%) calc(50% + 27.70766%), calc(50% + -11.02199%) calc(50% + 29.43664%), calc(50% + -14.01025%) calc(50% + 31.17231%), calc(50% + -17.02464%) calc(50% + 32.89623%), calc(50% + -19.98539%) calc(50% + 34.64945%), calc(50% + -19.97665%) calc(50% + 31.19188%), calc(50% + -19.99088%) calc(50% + 27.71939%), calc(50% + -19.98189%) calc(50% + 24.26364%), calc(50% + -19.98663%) calc(50% + 20.79747%), calc(50% + -20.01715%) calc(50% + 17.30068%), calc(50% + -20.01551%) calc(50% + 13.834%), calc(50% + -20.00241%) calc(50% + 10.38767%), calc(50% + -20.00209%) calc(50% + 6.92218%), calc(50% + -20.0029%) calc(50% + 3.44731%), calc(50% + -20.0%) calc(50% + 0.0%), calc(50% + -20.0029%) calc(50% + -3.44731%), calc(50% + -20.00209%) calc(50% + -6.92218%), calc(50% + -20.00241%) calc(50% + -10.38767%), calc(50% + -20.01551%) calc(50% + -13.834%), calc(50% + -20.01715%) calc(50% + -17.30068%), calc(50% + -19.98663%) calc(50% + -20.79747%), calc(50% + -19.98189%) calc(50% + -24.26364%), calc(50% + -19.99088%) calc(50% + -27.71939%), calc(50% + -19.97665%) calc(50% + -31.19188%));

}

28.333%,

38.333% {

-webkit-clip-path: polygon(calc(50% + 0.03276%) calc(50% + -39.99999%), calc(50% + 2.70382%) calc(50% + -37.33066%), calc(50% + 5.34596%) calc(50% + -34.66472%), calc(50% + 8.01669%) calc(50% + -31.99582%), calc(50% + 10.67028%) calc(50% + -29.33202%), calc(50% + 13.34006%) calc(50% + -26.6633%), calc(50% + 16.00053%) calc(50% + -23.99964%), calc(50% + 18.66772%) calc(50% + -21.33242%), calc(50% + 21.33242%) calc(50% + -18.66772%), calc(50% + 23.99964%) calc(50% + -16.00053%), calc(50% + 26.6633%) calc(50% + -13.34006%), calc(50% + 29.33202%) calc(50% + -10.67028%), calc(50% + 31.99582%) calc(50% + -8.01669%), calc(50% + 34.66472%) calc(50% + -5.34596%), calc(50% + 37.33066%) calc(50% + -2.70382%), calc(50% + 39.99999%) calc(50% + 0.03276%), calc(50% + 37.33066%) calc(50% + 2.70382%), calc(50% + 34.66472%) calc(50% + 5.34596%), calc(50% + 31.99582%) calc(50% + 8.01669%), calc(50% + 29.33202%) calc(50% + 10.67028%), calc(50% + 26.6633%) calc(50% + 13.34006%), calc(50% + 23.99964%) calc(50% + 16.00053%), calc(50% + 21.33242%) calc(50% + 18.66772%), calc(50% + 18.66772%) calc(50% + 21.33242%), calc(50% + 16.00053%) calc(50% + 23.99964%), calc(50% + 13.34006%) calc(50% + 26.6633%), calc(50% + 10.67028%) calc(50% + 29.33202%), calc(50% + 8.01669%) calc(50% + 31.99582%), calc(50% + 5.34596%) calc(50% + 34.66472%), calc(50% + 2.70382%) calc(50% + 37.33066%), calc(50% + -0.03276%) calc(50% + 39.99999%), calc(50% + -2.70382%) calc(50% + 37.33066%), calc(50% + -5.34596%) calc(50% + 34.66472%), calc(50% + -8.01669%) calc(50% + 31.99582%), calc(50% + -10.67028%) calc(50% + 29.33202%), calc(50% + -13.34006%) calc(50% + 26.6633%), calc(50% + -16.00053%) calc(50% + 23.99964%), calc(50% + -18.66772%) calc(50% + 21.33242%), calc(50% + -21.33242%) calc(50% + 18.66772%), calc(50% + -23.99964%) calc(50% + 16.00053%), calc(50% + -26.6633%) calc(50% + 13.34006%), calc(50% + -29.33202%) calc(50% + 10.67028%), calc(50% + -31.99582%) calc(50% + 8.01669%), calc(50% + -34.66472%) calc(50% + 5.34596%), calc(50% + -37.33066%) calc(50% + 2.70382%), calc(50% + -39.99999%) calc(50% + -0.03276%), calc(50% + -37.33066%) calc(50% + -2.70382%), calc(50% + -34.66472%) calc(50% + -5.34596%), calc(50% + -31.99582%) calc(50% + -8.01669%), calc(50% + -29.33202%) calc(50% + -10.67028%), calc(50% + -26.6633%) calc(50% + -13.34006%), calc(50% + -23.99964%) calc(50% + -16.00053%), calc(50% + -21.33242%) calc(50% + -18.66772%), calc(50% + -18.66772%) calc(50% + -21.33242%), calc(50% + -16.00053%) calc(50% + -23.99964%), calc(50% + -13.34006%) calc(50% + -26.6633%), calc(50% + -10.67028%) calc(50% + -29.33202%), calc(50% + -8.01669%) calc(50% + -31.99582%), calc(50% + -5.34596%) calc(50% + -34.66472%), calc(50% + -2.70382%) calc(50% + -37.33066%));

clip-path: polygon(calc(50% + 0.03276%) calc(50% + -39.99999%), calc(50% + 2.70382%) calc(50% + -37.33066%), calc(50% + 5.34596%) calc(50% + -34.66472%), calc(50% + 8.01669%) calc(50% + -31.99582%), calc(50% + 10.67028%) calc(50% + -29.33202%), calc(50% + 13.34006%) calc(50% + -26.6633%), calc(50% + 16.00053%) calc(50% + -23.99964%), calc(50% + 18.66772%) calc(50% + -21.33242%), calc(50% + 21.33242%) calc(50% + -18.66772%), calc(50% + 23.99964%) calc(50% + -16.00053%), calc(50% + 26.6633%) calc(50% + -13.34006%), calc(50% + 29.33202%) calc(50% + -10.67028%), calc(50% + 31.99582%) calc(50% + -8.01669%), calc(50% + 34.66472%) calc(50% + -5.34596%), calc(50% + 37.33066%) calc(50% + -2.70382%), calc(50% + 39.99999%) calc(50% + 0.03276%), calc(50% + 37.33066%) calc(50% + 2.70382%), calc(50% + 34.66472%) calc(50% + 5.34596%), calc(50% + 31.99582%) calc(50% + 8.01669%), calc(50% + 29.33202%) calc(50% + 10.67028%), calc(50% + 26.6633%) calc(50% + 13.34006%), calc(50% + 23.99964%) calc(50% + 16.00053%), calc(50% + 21.33242%) calc(50% + 18.66772%), calc(50% + 18.66772%) calc(50% + 21.33242%), calc(50% + 16.00053%) calc(50% + 23.99964%), calc(50% + 13.34006%) calc(50% + 26.6633%), calc(50% + 10.67028%) calc(50% + 29.33202%), calc(50% + 8.01669%) calc(50% + 31.99582%), calc(50% + 5.34596%) calc(50% + 34.66472%), calc(50% + 2.70382%) calc(50% + 37.33066%), calc(50% + -0.03276%) calc(50% + 39.99999%), calc(50% + -2.70382%) calc(50% + 37.33066%), calc(50% + -5.34596%) calc(50% + 34.66472%), calc(50% + -8.01669%) calc(50% + 31.99582%), calc(50% + -10.67028%) calc(50% + 29.33202%), calc(50% + -13.34006%) calc(50% + 26.6633%), calc(50% + -16.00053%) calc(50% + 23.99964%), calc(50% + -18.66772%) calc(50% + 21.33242%), calc(50% + -21.33242%) calc(50% + 18.66772%), calc(50% + -23.99964%) calc(50% + 16.00053%), calc(50% + -26.6633%) calc(50% + 13.34006%), calc(50% + -29.33202%) calc(50% + 10.67028%), calc(50% + -31.99582%) calc(50% + 8.01669%), calc(50% + -34.66472%) calc(50% + 5.34596%), calc(50% + -37.33066%) calc(50% + 2.70382%), calc(50% + -39.99999%) calc(50% + -0.03276%), calc(50% + -37.33066%) calc(50% + -2.70382%), calc(50% + -34.66472%) calc(50% + -5.34596%), calc(50% + -31.99582%) calc(50% + -8.01669%), calc(50% + -29.33202%) calc(50% + -10.67028%), calc(50% + -26.6633%) calc(50% + -13.34006%), calc(50% + -23.99964%) calc(50% + -16.00053%), calc(50% + -21.33242%) calc(50% + -18.66772%), calc(50% + -18.66772%) calc(50% + -21.33242%), calc(50% + -16.00053%) calc(50% + -23.99964%), calc(50% + -13.34006%) calc(50% + -26.6633%), calc(50% + -10.67028%) calc(50% + -29.33202%), calc(50% + -8.01669%) calc(50% + -31.99582%), calc(50% + -5.34596%) calc(50% + -34.66472%), calc(50% + -2.70382%) calc(50% + -37.33066%));

}

61.666%,

71.666% {

-webkit-clip-path: polygon(calc(50% + 39.78098%) calc(50% + -4.18019%), calc(50% + 40.0%) calc(50% + 0.00096%), calc(50% + 39.78078%) calc(50% + 4.18209%), calc(50% + 39.12571%) calc(50% + 8.3174%), calc(50% + 38.04196%) calc(50% + 12.36159%), calc(50% + 36.54143%) calc(50% + 16.27034%), calc(50% + 34.64054%) calc(50% + 20.00083%), calc(50% + 32.36012%) calc(50% + 23.51218%), calc(50% + 29.72515%) calc(50% + 26.76594%), calc(50% + 26.76451%) calc(50% + 29.72643%), calc(50% + 23.51064%) calc(50% + 32.36124%), calc(50% + 19.99917%) calc(50% + 34.64149%), calc(50% + 16.26859%) calc(50% + 36.54221%), calc(50% + 12.35977%) calc(50% + 38.04256%), calc(50% + 8.31553%) calc(50% + 39.1261%), calc(50% + 4.18019%) calc(50% + 39.78098%), calc(50% + -0.00096%) calc(50% + 40.0%), calc(50% + -4.18209%) calc(50% + 39.78078%), calc(50% + -8.3174%) calc(50% + 39.12571%), calc(50% + -12.36159%) calc(50% + 38.04196%), calc(50% + -16.27034%) calc(50% + 36.54143%), calc(50% + -20.00083%) calc(50% + 34.64054%), calc(50% + -23.51218%) calc(50% + 32.36012%), calc(50% + -26.76594%) calc(50% + 29.72515%), calc(50% + -29.72643%) calc(50% + 26.76451%), calc(50% + -32.36124%) calc(50% + 23.51064%), calc(50% + -34.64149%) calc(50% + 19.99917%), calc(50% + -36.54221%) calc(50% + 16.26859%), calc(50% + -38.04256%) calc(50% + 12.35977%), calc(50% + -39.1261%) calc(50% + 8.31553%), calc(50% + -39.78098%) calc(50% + 4.18019%), calc(50% + -40.0%) calc(50% + -0.00096%), calc(50% + -39.78078%) calc(50% + -4.18209%), calc(50% + -39.12571%) calc(50% + -8.3174%), calc(50% + -38.04196%) calc(50% + -12.36159%), calc(50% + -36.54143%) calc(50% + -16.27034%), calc(50% + -34.64054%) calc(50% + -20.00083%), calc(50% + -32.36012%) calc(50% + -23.51218%), calc(50% + -29.72515%) calc(50% + -26.76594%), calc(50% + -26.76451%) calc(50% + -29.72643%), calc(50% + -23.51064%) calc(50% + -32.36124%), calc(50% + -19.99917%) calc(50% + -34.64149%), calc(50% + -16.26859%) calc(50% + -36.54221%), calc(50% + -12.35977%) calc(50% + -38.04256%), calc(50% + -8.31553%) calc(50% + -39.1261%), calc(50% + -4.18019%) calc(50% + -39.78098%), calc(50% + 0.00096%) calc(50% + -40.0%), calc(50% + 4.18209%) calc(50% + -39.78078%), calc(50% + 8.3174%) calc(50% + -39.12571%), calc(50% + 12.36159%) calc(50% + -38.04196%), calc(50% + 16.27034%) calc(50% + -36.54143%), calc(50% + 20.00083%) calc(50% + -34.64054%), calc(50% + 23.51218%) calc(50% + -32.36012%), calc(50% + 26.76594%) calc(50% + -29.72515%), calc(50% + 29.72643%) calc(50% + -26.76451%), calc(50% + 32.36124%) calc(50% + -23.51064%), calc(50% + 34.64149%) calc(50% + -19.99917%), calc(50% + 36.54221%) calc(50% + -16.26859%), calc(50% + 38.04256%) calc(50% + -12.35977%), calc(50% + 39.1261%) calc(50% + -8.31553%));

clip-path: polygon(calc(50% + 39.78098%) calc(50% + -4.18019%), calc(50% + 40.0%) calc(50% + 0.00096%), calc(50% + 39.78078%) calc(50% + 4.18209%), calc(50% + 39.12571%) calc(50% + 8.3174%), calc(50% + 38.04196%) calc(50% + 12.36159%), calc(50% + 36.54143%) calc(50% + 16.27034%), calc(50% + 34.64054%) calc(50% + 20.00083%), calc(50% + 32.36012%) calc(50% + 23.51218%), calc(50% + 29.72515%) calc(50% + 26.76594%), calc(50% + 26.76451%) calc(50% + 29.72643%), calc(50% + 23.51064%) calc(50% + 32.36124%), calc(50% + 19.99917%) calc(50% + 34.64149%), calc(50% + 16.26859%) calc(50% + 36.54221%), calc(50% + 12.35977%) calc(50% + 38.04256%), calc(50% + 8.31553%) calc(50% + 39.1261%), calc(50% + 4.18019%) calc(50% + 39.78098%), calc(50% + -0.00096%) calc(50% + 40.0%), calc(50% + -4.18209%) calc(50% + 39.78078%), calc(50% + -8.3174%) calc(50% + 39.12571%), calc(50% + -12.36159%) calc(50% + 38.04196%), calc(50% + -16.27034%) calc(50% + 36.54143%), calc(50% + -20.00083%) calc(50% + 34.64054%), calc(50% + -23.51218%) calc(50% + 32.36012%), calc(50% + -26.76594%) calc(50% + 29.72515%), calc(50% + -29.72643%) calc(50% + 26.76451%), calc(50% + -32.36124%) calc(50% + 23.51064%), calc(50% + -34.64149%) calc(50% + 19.99917%), calc(50% + -36.54221%) calc(50% + 16.26859%), calc(50% + -38.04256%) calc(50% + 12.35977%), calc(50% + -39.1261%) calc(50% + 8.31553%), calc(50% + -39.78098%) calc(50% + 4.18019%), calc(50% + -40.0%) calc(50% + -0.00096%), calc(50% + -39.78078%) calc(50% + -4.18209%), calc(50% + -39.12571%) calc(50% + -8.3174%), calc(50% + -38.04196%) calc(50% + -12.36159%), calc(50% + -36.54143%) calc(50% + -16.27034%), calc(50% + -34.64054%) calc(50% + -20.00083%), calc(50% + -32.36012%) calc(50% + -23.51218%), calc(50% + -29.72515%) calc(50% + -26.76594%), calc(50% + -26.76451%) calc(50% + -29.72643%), calc(50% + -23.51064%) calc(50% + -32.36124%), calc(50% + -19.99917%) calc(50% + -34.64149%), calc(50% + -16.26859%) calc(50% + -36.54221%), calc(50% + -12.35977%) calc(50% + -38.04256%), calc(50% + -8.31553%) calc(50% + -39.1261%), calc(50% + -4.18019%) calc(50% + -39.78098%), calc(50% + 0.00096%) calc(50% + -40.0%), calc(50% + 4.18209%) calc(50% + -39.78078%), calc(50% + 8.3174%) calc(50% + -39.12571%), calc(50% + 12.36159%) calc(50% + -38.04196%), calc(50% + 16.27034%) calc(50% + -36.54143%), calc(50% + 20.00083%) calc(50% + -34.64054%), calc(50% + 23.51218%) calc(50% + -32.36012%), calc(50% + 26.76594%) calc(50% + -29.72515%), calc(50% + 29.72643%) calc(50% + -26.76451%), calc(50% + 32.36124%) calc(50% + -23.51064%), calc(50% + 34.64149%) calc(50% + -19.99917%), calc(50% + 36.54221%) calc(50% + -16.26859%), calc(50% + 38.04256%) calc(50% + -12.35977%), calc(50% + 39.1261%) calc(50% + -8.31553%));

}

}

@keyframes rot {

to {

transform: rotate(360deg);

}

}

@media (max-aspect-ratio: 3 / 1) {

.cases {

top: calc(50vh - 16.66667vw);

left: auto;

width: 100vw;

height: 33.33333vw;

}

.case {

width: 33.33333vw;

height: 33.33333vw;

}

}

@media (orientation: portrait) {

.cases {

flex-flow: column;

top: 0;

left: calc(50vw - 16.66667vh);

height: 100vh;

width: 33.33333vh;

}

.case {

width: 33.33333vh;

height: 33.33333vh;

}

}

@media (orientation: portrait) and (max-aspect-ratio: 1 / 3) {

.cases {

top: calc(50vh - 150vw);

left: auto;

width: 100vw;

height: 300vw;

}

.case {

width: 100vw;

height: 100vw;

}

}