Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <style>
- /* ---------------------------------------------- /*
- * Mouse animate icon
- /* ---------------------------------------------- */
- .mouse-icon {
- border: 2px solid #000;
- border-radius: 16px;
- height: 40px;
- width: 24px;
- display: block;
- z-index: 10;
- opacity: 0.7;
- }
- .mouse-icon .wheel {
- -webkit-animation-name: drop;
- -webkit-animation-duration: 1s;
- -webkit-animation-timing-function: linear;
- -webkit-animation-delay: 0s;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-play-state: running;
- -webkit-animation-name: drop;
- animation-name: drop;
- -webkit-animation-duration: 1s;
- animation-duration: 1s;
- -webkit-animation-timing-function: linear;
- animation-timing-function: linear;
- -webkit-animation-delay: 0s;
- animation-delay: 0s;
- -webkit-animation-iteration-count: infinite;
- animation-iteration-count: infinite;
- -webkit-animation-play-state: running;
- animation-play-state: running;
- }
- .mouse-icon .wheel {
- position: relative;
- border-radius: 10px;
- background: #000;
- width: 2px;
- height: 6px;
- top: 4px;
- margin-left: auto;
- margin-right: auto;
- }
- @-webkit-keyframes drop {
- 0% {
- top: 5px;
- opacity: 0;
- }
- 30% {
- top: 10px;
- opacity: 1;
- }
- 100% {
- top: 25px;
- opacity: 0;
- }
- }
- @keyframes drop {
- 0% {
- top: 5px;
- opacity: 0;
- }
- 30% {
- top: 10px;
- opacity: 1;
- }
- 100% {
- top: 25px;
- opacity: 0;
- }
- }
- </style>
- <div class="mouse-icon"><div class="wheel"></div></div>
Add Comment
Please, Sign In to add comment