---
title: CYP DISCO
tags: "OOAD"
---

<!-- <span class='disco'><img src="https://i.imgur.com/rhdv19Q.png"></span>

<span class='disco'><img src="https://i.imgur.com/8PFLZdS.png"></span> -->

<style>
.disco
{
display: inline-block;
position: relative;
animation: sway 4s calc(var(--i) *.39s) linear infinite, rainbow 1s infinite;
}
@keyframes rainbow
{
0% {filter: hue-rotate( 0deg);}
25% {filter: hue-rotate( 90deg);}
50% {filter: hue-rotate(180deg);}
75% {filter: hue-rotate(270deg);}
100% {filter: hue-rotate(360deg);}
}
@keyframes sway
{
0% {left: 0%; transform: scaleX(1);}
25% {transform: scaleX(-1);}
50% {left: 74%; transform: scaleX(1);}
75% {transform: scaleX(-1);}
100% {left: 0%; transform: scaleX(1);}
}
.disco img
{
width: 200px;
}
</style>

<!-- 20230315 -->
<style>

body
{
background-image: url('https://i.imgur.com/9c51gZX.png');
background-size: 50% 50%;
animation: veryimportant 1000s linear infinite;
}
@keyframes veryimportant
{
0% {
background-position: 0% 0%;
}
100% {
background-position: 20000% 20000%;
}
}

#doc
{
/* text-shadow: 0 3px 10px #39c5bb, 0 -3px 10px #39c5bbaa */
animation: txt 2s ease infinite;
}
@keyframes txt
{
0% {text-shadow: 0 3px 10px #39c5bb, 0 -3px 10px #39c5bbaa}
50% {text-shadow: 0 3px 10px #ff0000, 0 -3px 10px #ff0000}
100% {text-shadow: 0 3px 10px #39c5bb, 0 -3px 10px #39c5bbaa}
}
img
{
animation: cypboss 2s ease infinite;
}
@keyframes cypboss
{
0% {box-shadow: 0px 0px 5px red;}
50% {box-shadow: 0px 0px 40px red;}
100% {box-shadow: 0px 0px 5px #ff0000;}
}

</style>