Mouse shaped scroll down icon indicating scroll down for more.
HTML
<div class='icon-scroll'><div/>
CSS
.icon-scroll, .icon-scroll:before { position: absolute; left: 50%; } .icon-scroll { width: 40px; height: 70px; margin-left: -20px; top: 50%; margin-top: -35px; box-shadow: inset 0 0 0 1px #000; border-radius: 25px; } .icon-scroll:before { content: ''; width: 8px; height: 8px; background: #000; margin-left: -4px; top: 8px; border-radius: 4px; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: scroll; animation-name: scroll; } @-webkit-keyframes scroll { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateY(46px); transform: translateY(46px); } } @keyframes scroll { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateY(46px); transform: translateY(46px); } }demo
Please please help me how to change color, this is my first meeting with code))
ReplyDelete.icon-scroll {
Deletebox-shadow: inset 0 0 0 1px COLOR-CODE;
}
.icon-scroll:before {
background: COLOR-CODE;
}
Replace COLOR-CODE with the color you need (ex. #000 or black)
help how to change color)))
ReplyDeleteThanks Very useful
ReplyDelete