Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
The first commented line is your dabblet’s title
/**
* The first commented line is your dabblet’s title
*/
#fundo {
background: url(http://i.imgur.com/UZKEjzG.png) -800px center;
height: 300px;
width: 1000px;
position: relative;
animation: rolling-position 10s infinite linear;
}
.points:before {
content: "";
display: block;
height: 10px;
width: 10px;
position: absolute;
top: 200px;
left: 300px;
box-shadow: 10px 10px,
0px 10px blue;
}
.num1, .num2 {
position: absolute;
top: 200px;
width: 50px;
height: 50px;
background: brown;
}
.num1 {
left: 100px;
}
.num2 {
right: 400px;
}
.num1:hover ~ .points:before{
box-shadow: 20px 20px,
10px 20px blue;
}
.num2:hover ~ .points:before {
box-shadow: 0px -10px,
-10px -10px blue;
}
@keyframes rolling-position {
to {
background-position: -1800px center;
}
}
<!-- content to be placed inside <body>…</body> -->
<section id="fundo">
<div class="num1">btn 1</div>
<div class="num2">btn 2</div>
<div class="points"></div>
</section>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.