Smooth Pulse (Hover)

HAML
#c -(1..6).each do |i| .s
SCSS
html { background: #333; overflow: hidden; height: 100%; width: 100%; } body { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; } #c { display: flex; } .s { width: 40px; height: 40px; cursor: pointer; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } .s:nth-child(n+2) { margin-left: 80px; } .s:nth-child(1) { background: #33ffbb; -webkit-animation: r0 2s 0s ease-out infinite; -moz-animation: r0 2s 0s ease-out infinite; animation: r0 2s 0s ease-out infinite; } .s:nth-child(1):hover { background: #ff3333; -webkit-animation: r20 0.5s 0.4s ease-out infinite; -moz-animation: r20 0.5s 0.4s ease-out infinite; animation: r20 0.5s 0.4s ease-out infinite; } @-webkit-keyframes r0 { 0% { box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 179, 0); } 10% { box-shadow: 0 0 8px 6px #1affb3, 0 0 12px 10px #333, 0 0 12px 14px #1affb3; } 100% { box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 255, 179, 0); } } @-moz-keyframes r0 { 0% { box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 179, 0); } 10% { box-shadow: 0 0 8px 6px #1affb3, 0 0 12px 10px #333, 0 0 12px 14px #1affb3; } 100% { box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 255, 179, 0); } } @keyframes r0 { 0% { box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 179, 0); } 10% { box-shadow: 0 0 8px 6px #1affb3, 0 0 12px 10px #333, 0 0 12px 14px #1affb3; } 100% { box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 255, 179, 0); } } @-webkit-keyframes r20 { from { box-shadow: 0 0 8px 6px #ff1a1a, 0 0 12px 10px #333, 0 0 12px 14px #ff1a1a; } to { box-shadow: 0 0 8px 6px rgba(255, 26, 26, 0), 0 0 4px 40px #333, 0 0 4px 41px rgba(255, 26, 26, 0); } } @-moz-keyframes r20 { from { box-shadow: 0 0 8px 6px #ff1a1a, 0 0 12px 10px #333, 0 0 12px 14px #ff1a1a; } to { box-shadow: 0 0 8px 6px rgba(255, 26, 26, 0), 0 0 4px 40px #333, 0 0 4px 41px rgba(255, 26, 26, 0); } } @keyframes r20 { from { box-shadow: 0 0 8px 6px #ff1a1a, 0 0 12px 10px #333, 0 0 12px 14px #ff1a1a; } to { box-shadow: 0 0 8px 6px rgba(255, 26, 26, 0), 0 0 4px 40px #333, 0 0 4px 41px rgba(255, 26, 26, 0); } } .s:nth-child(2) { background: #33ffdd; -webkit-animation: r1 2s 0.25s ease-out infinite; -moz-animation: r1 2s 0.25s ease-out infinite; animation: r1 2s 0.25s ease-out infinite; } .s:nth-child(2):hover { background: #ff4733; -webkit-animation: r21 0.5s 0.4s ease-out infinite; -moz-animation: r21 0.5s 0.4s ease-out infinite; animation: r21 0.5s 0.4s ease-out infinite; } @-webkit-keyframes r1 { 0% { box-shadow: 0 0 8px 6px rgba(26, 255, 217, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 217, 0); } 10% { box-shadow: 0 0 8px 6px #1affd9, 0 0 12px 10px #333, 0 0 12px 14px #1affd9; } 100% { box-shadow: 0 0 8px 6px rgba(26, 255, 217, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 255, 217, 0); } } @-moz-keyframes r1 { 0% { box-shadow: 0 0 8px 6px rgba(26, 255, 217, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 217, 0); } 10% { box-shadow: 0 0 8px 6px #1affd9, 0 0 12px 10px #333, 0 0 12px 14px #1affd9; } 100% { box-shadow: 0 0 8px 6px rgba(26, 255, 217, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 255, 217, 0); } } @keyframes r1 { 0% { box-shadow: 0 0 8px 6px rgba(26, 255, 217, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 217, 0); } 10% { box-shadow: 0 0 8px 6px #1affd9, 0 0 12px 10px #333, 0 0 12px 14px #1affd9; } 100% { box-shadow: 0 0 8px 6px rgba(26, 255, 217, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 255, 217, 0); } } @-webkit-keyframes r21 { from { box-shadow: 0 0 8px 6px #ff301a, 0 0 12px 10px #333, 0 0 12px 14px #ff301a; } to { box-shadow: 0 0 8px 6px rgba(255, 48, 26, 0), 0 0 4px 40px #333, 0 0 4px 41px rgba(255, 48, 26, 0); } } @-moz-keyframes r21 { from { box-shadow: 0 0 8px 6px #ff301a, 0 0 12px 10px #333, 0 0 12px 14px #ff301a; } to { box-shadow: 0 0 8px 6px rgba(255, 48, 26, 0), 0 0 4px 40px #333, 0 0 4px 41px rgba(255, 48, 26, 0); } } @keyframes r21 { from { box-shadow: 0 0 8px 6px #ff301a, 0 0 12px 10px #333, 0 0 12px 14px #ff301a; } to { box-shadow: 0 0 8px 6px rgba(255, 48, 26, 0), 0 0 4px 40px #333, 0 0 4px 41px rgba(255, 48, 26, 0); } } .s:nth-child(3) { background: #33ffff; -webkit-animation: r2 2s 0.5s ease-out infinite; -moz-animation: r2 2s 0.5s ease-out infinite; animation: r2 2s 0.5s ease-out infinite; } .s:nth-child(3):hover { background: #ff5c33; -webkit-animation: r22 0.5s 0.4s ease-out infinite; -moz-animation: r22 0.5s 0.4s ease-out infinite; animation: r22 0.5s 0.4s ease-out infinite; } @-webkit-keyframes r2 { 0% { box-shadow: 0 0 8px 6px rgba(26, 255, 255, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 255, 0); } 10% { box-shadow: 0 0 8px 6px #1affff, 0 0 12px 10px #333, 0 0 12px 14px #1affff; } 100% { box-shadow: 0 0 8px 6px rgba(26, 255, 255, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 255, 255, 0); } } @-moz-keyframes r2 { 0% { box-shadow: 0 0 8px 6px rgba(26, 255, 255, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 255, 0); } 10% { box-shadow: 0 0 8px 6px #1affff, 0 0 12px 10px #333, 0 0 12px 14px #1affff; } 100% { box-shadow: 0 0 8px 6px rgba(26, 255, 255, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 255, 255, 0); } } @keyframes r2 { 0% { box-shadow: 0 0 8px 6px rgba(26, 255, 255, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 255, 0); } 10% { box-shadow: 0 0 8px 6px #1affff, 0 0 12px 10px #333, 0 0 12px 14px #1affff; } 100% { box-shadow: 0 0 8px 6px rgba(26, 255, 255, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 255, 255, 0); } } @-webkit-keyframes r22 { from { box-shadow: 0 0 8px 6px #ff471a, 0 0 12px 10px #333, 0 0 12px 14px #ff471a; } to { box-shadow: 0 0 8px 6px rgba(255, 71, 26, 0), 0 0 4px 40px #333, 0 0 4px 41px rgba(255, 71, 26, 0); } } @-moz-keyframes r22 { from { box-shadow: 0 0 8px 6px #ff471a, 0 0 12px 10px #333, 0 0 12px 14px #ff471a; } to { box-shadow: 0 0 8px 6px rgba(255, 71, 26, 0), 0 0 4px 40px #333, 0 0 4px 41px rgba(255, 71, 26, 0); } } @keyframes r22 { from { box-shadow: 0 0 8px 6px #ff471a, 0 0 12px 10px #333, 0 0 12px 14px #ff471a; } to { box-shadow: 0 0 8px 6px rgba(255, 71, 26, 0), 0 0 4px 40px #333, 0 0 4px 41px rgba(255, 71, 26, 0); } } .s:nth-child(4) { background: #33ddff; -webkit-animation: r3 2s 0.75s ease-out infinite; -moz-animation: r3 2s 0.75s ease-out infinite; animation: r3 2s 0.75s ease-out infinite; } .s:nth-child(4):hover { background: #ff7033; -webkit-animation: r23 0.5s 0.4s ease-out infinite; -moz-animation: r23 0.5s 0.4s ease-out infinite; animation: r23 0.5s 0.4s ease-out infinite; } @-webkit-keyframes r3 { 0% { box-shadow: 0 0 8px 6px rgba(26, 217, 255, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 217, 255, 0); } 10% { box-shadow: 0 0 8px 6px #1ad9ff, 0 0 12px 10px #333, 0 0 12px 14px #1ad9ff; } 100% { box-shadow: 0 0 8px 6px rgba(26, 217, 255, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 217, 255, 0); } } @-moz-keyframes r3 { 0% { box-shadow: 0 0 8px 6px rgba(26, 217, 255, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 217, 255, 0); } 10% { box-shadow: 0 0 8px 6px #1ad9ff, 0 0 12px 10px #333, 0 0 12px 14px #1ad9ff; } 100% { box-shadow: 0 0 8px 6px rgba(26, 217, 255, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 217, 255, 0); } } @keyframes r3 { 0% { box-shadow: 0 0 8px 6px rgba(26, 217, 255, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 217, 255, 0); } 10% { box-shadow: 0 0 8px 6px #1ad9ff, 0 0 12px 10px #333, 0 0 12px 14px #1ad9ff; } 100% { box-shadow: 0 0 8px 6px rgba(26, 217, 255, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 217, 255, 0); } } @-webkit-keyframes r23 { from { box-shadow: 0 0 8px 6px #ff5e1a, 0 0 12px 10px #333, 0 0 12px 14px #ff5e1a; } to { box-shadow: 0 0 8px 6px rgba(255, 94, 26, 0), 0 0 4px 40px #333, 0 0 4px 41px rgba(255, 94, 26, 0); } } @-moz-keyframes r23 { from { box-shadow: 0 0 8px 6px #ff5e1a, 0 0 12px 10px #333, 0 0 12px 14px #ff5e1a; } to { box-shadow: 0 0 8px 6px rgba(255, 94, 26, 0), 0 0 4px 40px #333, 0 0 4px 41px rgba(255, 94, 26, 0); } } @keyframes r23 { from { box-shadow: 0 0 8px 6px #ff5e1a, 0 0 12px 10px #333, 0 0 12px 14px #ff5e1a; } to { box-shadow: 0 0 8px 6px rgba(255, 94, 26, 0), 0 0 4px 40px #333, 0 0 4px 41px rgba(255, 94, 26, 0); } } .s:nth-child(5) { background: #33bbff; -webkit-animation: r4 2s 1s ease-out infinite; -moz-animation: r4 2s 1s ease-out infinite; animation: r4 2s 1s ease-out infinite; } .s:nth-child(5):hover { background: #ff8533; -webkit-animation: r24 0.5s 0.4s ease-out infinite; -moz-animation: r24 0.5s 0.4s ease-out infinite; animation: r24 0.5s 0.4s ease-out infinite; } @-webkit-keyframes r4 { 0% { box-shadow: 0 0 8px 6px rgba(26, 179, 255, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 179, 255, 0); } 10% { box-shadow: 0 0 8px 6px #1ab3ff, 0 0 12px 10px #333, 0 0 12px 14px #1ab3ff; } 100% { box-shadow: 0 0 8px 6px rgba(26, 179, 255, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 179, 255, 0); } } @-moz-keyframes r4 { 0% { box-shadow: 0 0 8px 6px rgba(26, 179, 255, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 179, 255, 0); } 10% { box-shadow: 0 0 8px 6px #1ab3ff, 0 0 12px 10px #333, 0 0 12px 14px #1ab3ff; } 100% { box-shadow: 0 0 8px 6px rgba(26, 179, 255, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 179, 255, 0); } } @keyframes r4 { 0% { box-shadow: 0 0 8px 6px rgba(26, 179, 255, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 179, 255, 0); } 10% { box-shadow: 0 0 8px 6px #1ab3ff, 0 0 12px 10px #333, 0 0 12px 14px #1ab3ff; } 100% { box-shadow: 0 0 8px 6px rgba(26, 179, 255, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 179, 255, 0); } } @-webkit-keyframes r24 { from { box-shadow: 0 0 8px 6px #ff751a, 0 0 12px 10px #333, 0 0 12px 14px #ff751a; } to { box-shadow: 0 0 8px 6px rgba(255, 117, 26, 0), 0 0 4px 40px #333, 0 0 4px 41px rgba(255, 117, 26, 0); } } @-moz-keyframes r24 { from { box-shadow: 0 0 8px 6px #ff751a, 0 0 12px 10px #333, 0 0 12px 14px #ff751a; } to { box-shadow: 0 0 8px 6px rgba(255, 117, 26, 0), 0 0 4px 40px #333, 0 0 4px 41px rgba(255, 117, 26, 0); } } @keyframes r24 { from { box-shadow: 0 0 8px 6px #ff751a, 0 0 12px 10px #333, 0 0 12px 14px #ff751a; } to { box-shadow: 0 0 8px 6px rgba(255, 117, 26, 0), 0 0 4px 40px #333, 0 0 4px 41px rgba(255, 117, 26, 0); } } .s:nth-child(6) { background: #3399ff; -webkit-animation: r5 2s 1.25s ease-out infinite; -moz-animation: r5 2s 1.25s ease-out infinite; animation: r5 2s 1.25s ease-out infinite; } .s:nth-child(6):hover { background: #ff9933; -webkit-animation: r25 0.5s 0.4s ease-out infinite; -moz-animation: r25 0.5s 0.4s ease-out infinite; animation: r25 0.5s 0.4s ease-out infinite; } @-webkit-keyframes r5 { 0% { box-shadow: 0 0 8px 6px rgba(26, 140, 255, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 140, 255, 0); } 10% { box-shadow: 0 0 8px 6px #1a8cff, 0 0 12px 10px #333, 0 0 12px 14px #1a8cff; } 100% { box-shadow: 0 0 8px 6px rgba(26, 140, 255, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 140, 255, 0); } } @-moz-keyframes r5 { 0% { box-shadow: 0 0 8px 6px rgba(26, 140, 255, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 140, 255, 0); } 10% { box-shadow: 0 0 8px 6px #1a8cff, 0 0 12px 10px #333, 0 0 12px 14px #1a8cff; } 100% { box-shadow: 0 0 8px 6px rgba(26, 140, 255, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 140, 255, 0); } } @keyframes r5 { 0% { box-shadow: 0 0 8px 6px rgba(26, 140, 255, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 140, 255, 0); } 10% { box-shadow: 0 0 8px 6px #1a8cff, 0 0 12px 10px #333, 0 0 12px 14px #1a8cff; } 100% { box-shadow: 0 0 8px 6px rgba(26, 140, 255, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 140, 255, 0); } } @-webkit-keyframes r25 { from { box-shadow: 0 0 8px 6px #ff8c1a, 0 0 12px 10px #333, 0 0 12px 14px #ff8c1a; } to { box-shadow: 0 0 8px 6px rgba(255, 140, 26, 0), 0 0 4px 40px #333, 0 0 4px 41px rgba(255, 140, 26, 0); } } @-moz-keyframes r25 { from { box-shadow: 0 0 8px 6px #ff8c1a, 0 0 12px 10px #333, 0 0 12px 14px #ff8c1a; } to { box-shadow: 0 0 8px 6px rgba(255, 140, 26, 0), 0 0 4px 40px #333, 0 0 4px 41px rgba(255, 140, 26, 0); } } @keyframes r25 { from { box-shadow: 0 0 8px 6px #ff8c1a, 0 0 12px 10px #333, 0 0 12px 14px #ff8c1a; } to { box-shadow: 0 0 8px 6px rgba(255, 140, 26, 0), 0 0 4px 40px #333, 0 0 4px 41px rgba(255, 140, 26, 0); } }
JAVASCRIPT
Expand for more options Login