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
body { background: #222222; background-size: 100%; background-repeat: no-repeat; background-image: -webkit-radial-gradient(50% 50%, circle closest-side, #426163 0%, #222222 100%); background-image: -moz-radial-gradient(50% 50%, circle closest-side, #426163 0%, #222222 100%); background-image: -o-radial-gradient(50% 50%, circle closest-side, #426163 0%, #222222 100%); background-image: -ms-radial-gradient(50% 50%, circle closest-side, #426163 0%, #222222 100%); background-image: radial-gradient(50% 50%, circle closest-side, #426163 0%, #222222 100%); padding: 50px; } .pvz-loader { margin: 6em auto; width: 4em; height: 4em; background: #ffd74a; border: 1px solid #6b5c27; border-radius: 50%; box-shadow: inset -0.3em -0.3em 0.2em rgba(0,0,0,0.2), inset 0.1em 0.3em 0.3em rgba(255,255,255,0.5); position:relative; } .pvz-loader::before{ content: ''; display: block; position: absolute; width: 10%; height: 22%; background: #333; top: 30%; left: 65%; border-radius: 50%; box-shadow: inset 0px 1px 1px white; } .pvz-loader::after{ content: ''; display: block; position: absolute; width: 10%; height: 22%; background: #333; top: 30%; left: 25%; border-radius: 50%; box-shadow: inset 0px 1px 1px white; } .pvz-loader em { display: block; background: red; position: absolute; top: 70%; left: 38%; width: 20%; height: 10%; background: #cd3439; border: 1px solid #843531; border-radius: 0 0 50% 50%; box-sizing: border-box; } .pvz-loader span { display: block; position: absolute; background-image: #e9efef; background-image: -webkit-linear-gradient(top left, #ffffff 0%, #ffffff 40%, #bdcfce 100%); background-image: -moz-linear-gradient(top left, #ffffff 0%, #ffffff 13%, #bdcfce 100%); background-image: -o-linear-gradient(top left, #ffffff 0%, #ffffff 13%, #bdcfce 100%); background-image: -ms-linear-gradient(top left, #ffffff 0%, #ffffff 13%, #bdcfce 100%); background-image: linear-gradient(top left, #ffffff 0%, #ffffff 13%, #bdcfce 100%); border: 1px solid #a5b2b5; box-sizing: -webkit-border-box; box-sizing: border-box; height: 60%; width: 84%; left: -35%; top: -10%; z-index: -1; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: rotate(90deg) skew(45deg); border-radius: 82% 8% 0 8%; } .pvz-loader span:nth-child(2){ -webkit-transform: rotate(135deg) skew(45deg); } .pvz-loader span:nth-child(3){ -webkit-transform: rotate(180deg) skew(45deg); } .pvz-loader span:nth-child(4){ -webkit-transform: rotate(225deg) skew(45deg); } .pvz-loader span:nth-child(5){ -webkit-transform: rotate(270deg) skew(45deg); } .pvz-loader span:nth-child(6){ -webkit-transform: rotate(315deg) skew(45deg); } .pvz-loader span:nth-child(7){ -webkit-transform: rotate(0deg) skew(45deg); } .pvz-loader span:nth-child(8){ -webkit-transform: rotate(45deg) skew(45deg); } /* .pvz-loader span::after { display: block; content: ''; position: absolute; bottom: 0; right: 0; width: 80%; height: 80%; background: red; } */ .pvz-loader span { animation: myfirst 5s; -webkit-animation: myfirst 5s; /* Safari and Chrome */ } @-webkit-keyframes myfirst { from { width: 0; height: 0; } to { background: yellow;} } @keyframes myfirst{ from { background: red;} to { background: yellow;} }
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