This might be a dumb question but I stumbled upon this awesome CodePen that I wanted to adjust and use. I launched a quick demo on my own server but it didn't work. Then I realized that next to CodePen it said SCSS, which I googled. I sorta get it but I don't know how to make this particular code work.
The html:
<body>
<div id="paper"> </div>
<div class="wrap">
<a class="two" href="http://db.tt/vkXgwK2P">
<img class="round" src="http://db.tt/vkXgwK2P" alt="">
</a>
<a class="three" href="http://db.tt/Lrtnc768">
<img class="round" src="http://db.tt/Lrtnc768" alt="">
</a>
<a class="one" href="http://db.tt/CSVy5HNR">
<img class="round" src="http://db.tt/CSVy5HNR" alt="">
</a>
<figure>
<img src="http://db.tt/FveX1nYo" alt="">
</figure>
</div>
The SCSS:
body {
margin: 0;
}
#paper {
height: 120px;
margin: 0;
background: #303535;
}
.wrap {
margin: 0 auto;
width: 180px;
height: 180px;
border-radius: 50%;
box-shadow: 0 0 0 10px white;
position: relative;
top: -80px;
background: #fff;
a {
margin: 0;
position: absolute;
.round {
border-radius: 50%;
width: 180px;
height: 180px;
box-shadow: 0 0 0 10px white;
}
}
figure img {
margin: 0;
-webkit-transition: top 0.4s ease-out;
-moz-transition: top 0.4s ease-out;
transition: top 0.4s ease-out;
position: absolute;
top: 200px;
left: 77px;
}
.two {
margin: 0;
-webkit-transition: top 0.4s ease-out;
-moz-transition: top 0.4s ease-out;
transition: top 0.4s ease-out;
opacity: 0.8;
top: 0;
}
.three {
margin: 0;
-webkit-transition: top 0.4s ease-out;
-moz-transition: top 0.4s ease-out;
transition: top 0.4s ease-out;
opacity: 0.8;
top: 0;
}
&:hover .one {
opacity: 0.8;
}
& a.one:hover {
opacity: 1;
z-index: 2;
}
:hover .two {
top: 300px;
}
& a.two:hover {
opacity: 1;
z-index: 2;
}
&:hover .three {
top: 150px;
}
& a.three:hover {
opacity: 1;
z-index: 2;
}
&:hover figure img {
top: 500px;
}
}
There is also an example of what I'm trying to achieve at CodePen: http://codepen.io/CoffeeCupDrummer/pen/FqChm
I thought maybe the problem was in my link syntax so I changed it to look like this, but that didn't work either. I tried style.css then switched to style.scss in hopes of fixing it.
<link rel="stylesheet" href="stylesheet/style.scss">
So my question is whats so different about SCSS and why can't I get it to work when it works just fine on CodePen?
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
