Skip to content

Instantly share code, notes, and snippets.

@brasofilo
Last active March 30, 2023 02:15
Show Gist options
  • Save brasofilo/6ac829864aee9627926af24b63e9305e to your computer and use it in GitHub Desktop.
Save brasofilo/6ac829864aee9627926af24b63e9305e to your computer and use it in GitHub Desktop.
Dolphin's Trigonometry :: WordPress Login Form :: adapted by brasofilo, original code by https://codepen.io/bleepbloop/pen/dyybMq
<div class='container'>
<div class='subcontainer'>
<div class='half'>
<div class='droplet'></div>
<div class='splash'>
<div class='splash-container'>
<div class='circle'></div>
</div>
</div>
</div>
<div class='half'>
<div class='droplet'></div>
<div class='splash'>
<div class='splash-container'>
<div class='circle'></div>
</div>
</div>
</div>
</div>
</div>
<div id='credit'>art by <a href='https://codepen.io/bleepbloop/pen/dyybMq' target='_blank'>Max Gruson</a></div>
#login h1 {
display:none;
}
#loginform {
background: transparent;
}
#credit {
position: fixed;
right: 10px;
bottom: 10px;
}
@keyframes up {
0% {
top: -135px;
}
100% {
top: 135px;
}
}
@keyframes down {
0% {
bottom: 135px;
}
100% {
bottom: -135px;
}
}
@keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
@keyframes jump {
0% {
bottom: -30px;
}
50% {
bottom: -30px;
}
100% {
bottom: 135px;
}
}
@keyframes fade {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
51% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes spin1 {
0% {
transform: rotate(0);
}
75% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
@keyframes spin2 {
0% {
transform: rotate(0);
}
75% {
transform: rotate(0);
}
100% {
transform: rotate(-360deg);
}
}
@keyframes dolphin {
0% {
transform: rotate(45deg);
}
75% {
transform: rotate(45deg);
}
100% {
transform: rotate(-70deg);
}
}
@keyframes splash {
0% {
transform: scale(1, 0);
}
75% {
transform: scale(1, 0);
}
100% {
transform: scale(1, 1);
}
}
@keyframes slide1 {
0% {
transform: translate(0);
}
52% {
transform: translate(0);
}
100% {
transform: translate(-75px);
}
}
@keyframes slide2 {
0% {
transform: translate(0);
}
52% {
transform: translate(0);
}
100% {
transform: translate(75px);
}
}
body, html {
width: 100%;
height: 100%;
}
body {
margin: 0;
}
.container {
overflow: hidden;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -999999;
}
.container .subcontainer {
position: absolute;
width: 100%;
height: 100%;
animation: rotate 4s linear infinite;
}
.container .subcontainer *, .container .subcontainer *:before, .container .subcontainer *:after {
position: absolute;
content: "";
display: block;
}
.container .subcontainer .half {
width: 100%;
height: 100%;
overflow: hidden;
}
.container .subcontainer .half .splash {
height: 60px;
width: 150px;
bottom: 0;
margin-bottom: -3px;
left: 50%;
margin-left: -75px;
overflow: hidden;
}
.container .subcontainer .half .splash .splash-container {
height: 100%;
width: 100%;
transform-origin: bottom center;
}
.container .subcontainer .half .splash .splash-container .circle {
left: 50%;
top: 30%;
width: 27.27273px;
height: 27.27273px;
margin-top: -13.63636px;
margin-left: -13.63636px;
border-radius: 50%;
}
.container .subcontainer .half .splash .splash-container:before, .container .subcontainer .half .splash .splash-container:after {
height: 70%;
width: 50%;
}
.container .subcontainer .half .splash .splash-container:before {
left: 0;
bottom: 0;
border-bottom-right-radius: 100%;
margin-left: -13.63636px;
}
.container .subcontainer .half .splash .splash-container:after {
right: 0;
bottom: 0;
border-bottom-left-radius: 100%;
margin-right: -13.63636px;
}
.container .subcontainer .half .droplet {
width: 30px;
height: 30px;
left: 50%;
margin-left: -15px;
}
.container .subcontainer .half .droplet:before, .container .subcontainer .half .droplet:after {
background-size: 100% 100%;
}
.container .subcontainer .half:nth-child(1) {
box-shadow: 0 -150px 0 150px #141414;
background-color: #141414;
margin-top: -25%;
animation: up 1s infinite alternate ease-in-out;
}
.container .subcontainer .half:nth-child(1) .splash {
animation: slide1 1s infinite linear;
}
.container .subcontainer .half:nth-child(1) .splash .splash-container {
animation: splash 1s infinite -.25s alternate;
}
.container .subcontainer .half:nth-child(1) .splash .splash-container .circle {
background-color: #5db0c9;
}
.container .subcontainer .half:nth-child(1) .splash .splash-container:before, .container .subcontainer .half:nth-child(1) .splash .splash-container:after {
box-shadow: 0 29.27273px 0 27.27273px #5db0c9;
}
.container .subcontainer .half:nth-child(1) .droplet {
animation: jump 1s infinite alternate;
}
.container .subcontainer .half:nth-child(1) .droplet:before, .container .subcontainer .half:nth-child(1) .droplet:after {
height: 100%;
width: 100%;
}
.container .subcontainer .half:nth-child(1) .droplet:before {
border-radius: 50%;
background-color: #5db0c9;
animation: fade 4s infinite;
}
.container .subcontainer .half:nth-child(1) .droplet:after {
background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'><path fill='%235db0c9' d='M0,10L5,0L10,10Z'/></svg>");
animation: fade 4s infinite -2s, spin1 4s infinite -2.5s linear;
}
.container .subcontainer .half:nth-child(2) {
box-shadow: 0 -150px 0 150px #5db0c9;
bottom: 0;
margin-bottom: -25%;
background-color: #5db0c9;
transform: rotate(180deg);
animation: down 1s infinite alternate ease-in-out;
}
.container .subcontainer .half:nth-child(2) .splash {
animation: slide2 1s infinite -1s linear;
}
.container .subcontainer .half:nth-child(2) .splash .splash-container {
animation: splash 1s infinite -1.25s alternate;
}
.container .subcontainer .half:nth-child(2) .splash .splash-container .circle {
background-color: #141414;
}
.container .subcontainer .half:nth-child(2) .splash .splash-container:before, .container .subcontainer .half:nth-child(2) .splash .splash-container:after {
box-shadow: 0 29.27273px 0 27.27273px #141414;
}
.container .subcontainer .half:nth-child(2) .droplet {
animation: jump 1s infinite -1s alternate;
}
.container .subcontainer .half:nth-child(2) .droplet:before {
height: 200%;
width: 200%;
left: -50%;
background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 419 281' xmlns='http://www.w3.org/2000/svg'><path fill='%23141414' d='m212.0052,5.32781c-7.8024,2.96131 -14.9229,6.90809 -22.0992,10.425c-2.4471,1.19639 -5.22542,3.1008 -7.49191,3.68309c-5.77739,1.47781 -14.81609,-1.10729 -22.179,-1.37699c-18.40649,-0.66899 -30.32219,0.7197 -45.45239,3.05969c-7.08029,1.09351 -14.4105,2.1165 -20.62619,3.9858c-5.3085,1.5984 -11.3964,5.1678 -17.33671,8.16899c-9.3879,4.74719 -15.7815,9.21451 -23.1009,14.93549c-12.2334,9.55801 -19.9362,21.58951 -28.88922,34.80841c-3.90819,5.7702 -9.54024,14.36819 -9.81912,21.1968c-5.175,8.04479 -13.03829,12.9561 -15.01056,24.7347c2.75742,6.88829 9.90351,0.76289 14.20899,-1.5303c3.56133,-1.902 7.39218,-4.1754 10.5492,-5.08739c16.40151,-4.74239 39.25791,2.03699 55.22571,-2.3085c5.6613,-1.5399 10.5633,-4.64761 16.1871,-5.96371c5.3403,-1.25369 9.4242,0.96451 13.2318,2.65201c2.02261,0.89999 4.1541,2.1153 5.9907,3.08309c11.898,6.30601 23.7888,12.9927 39.76289,15.51c12.82021,2.019 23.95889,-1.8318 34.38031,-3.9117c2.646,-0.52859 6.06209,-0.33751 8.06848,-2.6532c-8.31808,-1.9278 -15.22049,-5.2149 -23.90639,-8.7222c-11.4093,-4.6044 -20.2722,-7.7193 -24.5847,-16.96291c5.1069,-1.37251 11.02139,-0.35519 16.3383,0.6c5.80531,1.04041 11.5665,2.01541 17.13629,2.95651c23.5218,3.9714 41.23351,10.63949 59.1387,19.29149c8.69879,4.1988 16.71451,10.0452 24.08551,14.9553c15.0972,10.0665 27.98669,22.56691 40.14209,36.183c5.505,6.16621 10.41599,13.8855 16.38599,21.246c2.60703,3.21811 5.22903,6.8064 8.01901,10.77661c2.66098,3.77579 6.72601,8.4012 7.29001,11.7036c0.633,3.64319 -1.25403,7.64159 -2.202,11.62379c-1.64401,6.9234 -2.853,14.34599 -2.30402,21.45111c0.71701,9.19218 2.72104,18.14415 6.92102,25.1086c1.82098,-1.6629 2.56497,-4.58673 3.50098,-7.26801c4.60199,-6.03394 10.72501,-12.05856 10.87802,-22.10036c12.57001,6.66328 36.98401,6.10312 51.64499,5.9332c4.40698,-0.05275 8.89801,0.4254 12.54898,-1.33243c-7.69797,-4.57968 -13.34998,-10.37592 -20.04297,-16.28682c-10.125,-8.9355 -18.49802,-16.4637 -33.42603,-21.24359c-4.83899,-1.54921 -10.37698,-2.38831 -13.02896,-5.25931c-2.03702,-2.19749 -2.65805,-7.06529 -3.69003,-11.75159c-2.78101,-12.675 -6.39899,-26.1201 -9.621,-36.78511c-9.68097,-32.06039 -24.45297,-60.5544 -44.1084,-82.6842c-9.9585,-11.2218 -21.85529,-20.35889 -34.67789,-30.5202c-2.1915,-3.52379 -6.2955,-8.27941 -7.1451,-13.6548c-0.86821,-5.5335 0.69719,-10.39079 4.03139,-14.10809c7.29239,-5.4585 18.74762,-6.06211 23.7045,-14.23471c-6.47791,-4.78261 -14.51581,-6.1842 -22.4025,-6.96691c-17.04269,-1.6899 -33.0072,-0.37859 -46.2258,4.64072'/></svg>");
animation: fade 4s infinite -1s, dolphin 4s infinite -1.5s ease-in-out;
}
.container .subcontainer .half:nth-child(2) .droplet:after {
height: 100%;
width: 100%;
background-color: #141414;
animation: fade 4s infinite -3s, spin2 4s infinite -3.5s linear;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment