It's a simple example that makes an animated hotspot for a tour inside tutorya.com.
A Pen by David Felipe Camargo Polo on CodePen.
It's a simple example that makes an animated hotspot for a tour inside tutorya.com.
A Pen by David Felipe Camargo Polo on CodePen.
<div id="hotspot"></div> |
@import "compass/css3" | |
#hotspot | |
width: 60px | |
height: 60px | |
margin: 10px auto | |
animation: growing 2000ms ease-in infinite | |
background: image-url('https://lh3.googleusercontent.com/4BsJrQBcRf8UnBc2zvJh4-QUGZw5JvydHUiK98ngfWRmFELHzftWQvstcFqtvKFGvEevlzt_cX8jpmwVHr7AFIsNtvweYY_D=w1342-h539') | |
@keyframes growing | |
0% | |
background: image-url('https://lh3.googleusercontent.com/4BsJrQBcRf8UnBc2zvJh4-QUGZw5JvydHUiK98ngfWRmFELHzftWQvstcFqtvKFGvEevlzt_cX8jpmwVHr7AFIsNtvweYY_D=w1342-h539') | |
25% | |
background: image-url('https://lh3.googleusercontent.com/NUdySdQ5x5Hu2a1S60JYGN_ibZFDdJR04WMDXhHAifeHEcAt0kC30ocmqlcoa1IuYkLw3jJcLhetmJbxwFR1XtsrGjO9j8IQ=w1342-h539') | |
50% | |
background: image-url('https://lh4.googleusercontent.com/0bLYzVZj0t7iXG_gL8jKhG4UgQTlha__YFvclHDE9C_ICSm6ymOPLdbFWYV7uE8GehS8u7VFobTbCYx8pTBG6n2s6FCqwYnK=w1342-h539') | |
75% | |
background-position: image-url('https://lh3.googleusercontent.com/Usr0lMWEFO0v0W3Um7mUUBOU3ilqQpWhHRhDdh5SF-YuuhVzl3nCZ-CyzQC548NB1QvP1dKHs_r2VyjHUHAXhtU_m8H4T7PZ=w1342-h539') |