visual production for new EP release by Digital Selves (https://lwlsn.github.io/digitalselves-web/) commissioned by Cherche Encore (http://cherche-encore.info/).
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 lines
3.0 KiB
114 lines
3.0 KiB
@font-face {
|
|
font-family: 'Combine';
|
|
src: url('Combine.otf') format('opentype');
|
|
font-weight: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Sinistre';
|
|
src: url('Sinistre-S†Caroline.otf') format('opentype');
|
|
font-weight: normal;
|
|
}
|
|
|
|
:root {
|
|
--color-blue: #0000FF;
|
|
--color-gray: #edecec;
|
|
--color-pink: #f8a8ff;
|
|
--color-yel: #FDFFF0;
|
|
--color-aqua: #7FFFD4;
|
|
--special-font: 'Sinistre';
|
|
}
|
|
|
|
html {
|
|
box-sizing: border-box;
|
|
height: 100%
|
|
}
|
|
*, *:before, *:after {
|
|
-webkit-box-sizing: inherit;
|
|
-moz-box-sizing: inherit;
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
body{
|
|
margin:0px;
|
|
/*animation: bodymove 60s infinite;
|
|
-webkit-animation: bodymove 60s infinite; */
|
|
}
|
|
|
|
@keyframes bodymove {
|
|
0% { background: radial-gradient(ellipse at center, var(--color-pink), var(--color-blue));
|
|
background-size: 100% 100%;}
|
|
20% { background: radial-gradient(ellipse at top, var(--color-yel), var(--color-blue) 100%);
|
|
background-size: 10% 10%; }
|
|
30% { background: radial-gradient(ellipse at top, var(--color-yel), var(--color-blue) 40%);
|
|
background-size: 10% 100%;}
|
|
35% { background: radial-gradient(ellipse at top, var(--color-yel), var(--color-blue) 40%, var(--color-pink));
|
|
background-size: 10% 100%;}
|
|
45% { background: radial-gradient(ellipse at center, var(--color-yel), var(--color-blue) 10%, var(--color-yel) 100%);}
|
|
65% { background: radial-gradient(ellipse at center, var(--color-blue), var(--color-yel) 10%, var(--color-blue) 100%);
|
|
background-size: 10% 999%;
|
|
background-position: left;}
|
|
70% { background: radial-gradient(ellipse at center, var(--color-pink), var(--color-yel) 10%, #f8a8ff 100%);
|
|
background-size: 10% 999%;}
|
|
85% { background: linear-gradient(var(--color-pink), var(--color-blue) 10%, var(--color-pink) 100%);
|
|
background-size: 10% 10%;}
|
|
90% { background: linear-gradient(var(--color-blue) 50%, var(--color-pink) 10% 10%);
|
|
background-size: 100% 1%;}
|
|
100% { background: linear-gradient(var(--color-pink) 10%, var(--color-blue) 100%);}
|
|
}
|
|
|
|
marquee{
|
|
color: var(--color-pink);
|
|
font-family: var(--special-font);
|
|
}
|
|
|
|
#stage01{
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
#stage02{
|
|
color: var(--color-blue);
|
|
font-size: 14vmax;
|
|
line-height: 18vmax;
|
|
position: absolute;
|
|
z-index: 2;
|
|
top: 0;
|
|
font-family: var(--special-font);
|
|
font-weight: bold;
|
|
word-spacing: 1vw;
|
|
filter: opacity(0.9);
|
|
text-shadow: 2px 2px 2px var(--color-pink);
|
|
}
|
|
|
|
#stage03{
|
|
filter: opacity(0.8);
|
|
position: absolute;
|
|
z-index: 3;
|
|
top: 0;
|
|
right: 0;
|
|
margin: 2vmax;
|
|
width: 130vmin;
|
|
height: 90vmin;
|
|
border: 0px;
|
|
box-shadow: 1px 1px 8px 2px var(--color-pink);
|
|
border-radius: 0 50% 50% 50%;
|
|
filter: grayscale(1);
|
|
}
|
|
|
|
span {
|
|
box-shadow: 1px 1px 8px 2px var(--color-pink);
|
|
position: absolute;
|
|
z-index: 1;
|
|
}
|
|
|
|
span#oval {
|
|
width: 50%;
|
|
height: 80%;
|
|
border-radius: 100% / 50%;
|
|
}
|
|
|
|
span#dia {
|
|
width: 90%;
|
|
height: 90%;
|
|
transform: rotate(45deg);
|
|
}
|
|
|