Toggle navigation
Sign Up
Log In
Explore
Works
Folders
Tools
Collections
Artists
Groups
Groups
Topics
Tasks
Tasks
Jobs
Teams
Jobs
Recommendation
More Effects...
JS
CSS
@import url("https://fonts.googleapis.com/css?family=Unica+One"); .peddle-center { stop-color: #ffe6f7; } .peddle-outside { stop-color: #ffb3e6; } svg { width: 100vw; height: 100vh; } circle { -webkit-transform: scale(0.5); transform: scale(0.5); } .peddle { -webkit-transform: rotateY(0deg) rotateZ(0deg) scale(1); transform: rotateY(0deg) rotateZ(0deg) scale(1); -webkit-animation: bloom 5s ease-in-out infinite; animation: bloom 5s ease-in-out infinite; } .blossom { -webkit-animation: blossom 5s ease-in-out infinite; animation: blossom 5s ease-in-out infinite; } .blossom:nth-child(1) { -webkit-animation-delay: -234s; animation-delay: -234s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(1) .peddle { -webkit-animation-delay: -234s; animation-delay: -234s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(2) { -webkit-animation-delay: -123.6s; animation-delay: -123.6s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(2) .peddle { -webkit-animation-delay: -123.6s; animation-delay: -123.6s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(3) { -webkit-animation-delay: -15s; animation-delay: -15s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(3) .peddle { -webkit-animation-delay: -15s; animation-delay: -15s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(4) { -webkit-animation-delay: -202.2s; animation-delay: -202.2s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(4) .peddle { -webkit-animation-delay: -202.2s; animation-delay: -202.2s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(5) { -webkit-animation-delay: -88.8s; animation-delay: -88.8s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(5) .peddle { -webkit-animation-delay: -88.8s; animation-delay: -88.8s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(6) { -webkit-animation-delay: -49.2s; animation-delay: -49.2s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(6) .peddle { -webkit-animation-delay: -49.2s; animation-delay: -49.2s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(7) { -webkit-animation-delay: -237.6s; animation-delay: -237.6s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(7) .peddle { -webkit-animation-delay: -237.6s; animation-delay: -237.6s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(8) { -webkit-animation-delay: -162s; animation-delay: -162s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(8) .peddle { -webkit-animation-delay: -162s; animation-delay: -162s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(9) { -webkit-animation-delay: -299.4s; animation-delay: -299.4s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(9) .peddle { -webkit-animation-delay: -299.4s; animation-delay: -299.4s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(10) { -webkit-animation-delay: -157.8s; animation-delay: -157.8s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(10) .peddle { -webkit-animation-delay: -157.8s; animation-delay: -157.8s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(11) { -webkit-animation-delay: -172.2s; animation-delay: -172.2s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(11) .peddle { -webkit-animation-delay: -172.2s; animation-delay: -172.2s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(12) { -webkit-animation-delay: -36s; animation-delay: -36s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(12) .peddle { -webkit-animation-delay: -36s; animation-delay: -36s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(13) { -webkit-animation-delay: -22.2s; animation-delay: -22.2s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(13) .peddle { -webkit-animation-delay: -22.2s; animation-delay: -22.2s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(14) { -webkit-animation-delay: -232.2s; animation-delay: -232.2s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(14) .peddle { -webkit-animation-delay: -232.2s; animation-delay: -232.2s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(15) { -webkit-animation-delay: -135s; animation-delay: -135s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(15) .peddle { -webkit-animation-delay: -135s; animation-delay: -135s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(16) { -webkit-animation-delay: -205.2s; animation-delay: -205.2s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(16) .peddle { -webkit-animation-delay: -205.2s; animation-delay: -205.2s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(17) { -webkit-animation-delay: -188.4s; animation-delay: -188.4s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(17) .peddle { -webkit-animation-delay: -188.4s; animation-delay: -188.4s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(18) { -webkit-animation-delay: -208.2s; animation-delay: -208.2s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(18) .peddle { -webkit-animation-delay: -208.2s; animation-delay: -208.2s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(19) { -webkit-animation-delay: -42s; animation-delay: -42s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(19) .peddle { -webkit-animation-delay: -42s; animation-delay: -42s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(20) { -webkit-animation-delay: -10.2s; animation-delay: -10.2s; -webkit-animation-duration: 8s; animation-duration: 8s; } .blossom:nth-child(20) .peddle { -webkit-animation-delay: -10.2s; animation-delay: -10.2s; -webkit-animation-duration: 8s; animation-duration: 8s; } @-webkit-keyframes blossom { 0% { -webkit-transform: translate(-100px, -100px); transform: translate(-100px, -100px); } 100% { -webkit-transform: translate(100px, 100px) rotate(20deg); transform: translate(100px, 100px) rotate(20deg); } } @keyframes blossom { 0% { -webkit-transform: translate(-100px, -100px); transform: translate(-100px, -100px); } 100% { -webkit-transform: translate(100px, 100px) rotate(20deg); transform: translate(100px, 100px) rotate(20deg); } } @-webkit-keyframes bloom { 0% { -webkit-transform: rotateY(90deg) rotateZ(72deg) scale(0); transform: rotateY(90deg) rotateZ(72deg) scale(0); } 50% { -webkit-transform: rotateY(0deg) rotateZ(0deg) scale(1); transform: rotateY(0deg) rotateZ(0deg) scale(1); opacity: 1; } 100% { opacity: 0; -webkit-transform: translate(40px, 40px) rotate3d(1, 0.5, 1, 90deg); transform: translate(40px, 40px) rotate3d(1, 0.5, 1, 90deg); } } @keyframes bloom { 0% { -webkit-transform: rotateY(90deg) rotateZ(72deg) scale(0); transform: rotateY(90deg) rotateZ(72deg) scale(0); } 50% { -webkit-transform: rotateY(0deg) rotateZ(0deg) scale(1); transform: rotateY(0deg) rotateZ(0deg) scale(1); opacity: 1; } 100% { opacity: 0; -webkit-transform: translate(40px, 40px) rotate3d(1, 0.5, 1, 90deg); transform: translate(40px, 40px) rotate3d(1, 0.5, 1, 90deg); } } /*Page Setup*/ svg { width: 100vw; height: 80vh; } body { background: #143d52; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
HTML
Join Effecthub.com
Working with Global Gaming Artists and Developers!
Login
Sign Up
Or Login with Your Email Address:
Email
Password
Remember
Or Sign Up with Your Email Address:
Your Email
This field must contain a valid email
Set Password
Password should be at least 1 character
Stay informed via email