-3
有人可以帮助我将这个sass代码转换为清晰的css,当然还需要动画才能继续工作,我想在这里需要多一些js代码,之前感谢。 https://codepen.io/anon/pen/ENqppw从Sass到Css
<div class="search">
<span class="search_icon"></span>
</div>
.search {
width:100px;
height:100px;
background: #3a3a3a;
transition: all 0.4s ease;
margin:50px;
position:absolute;
&.open {
width: 90%;
}
}
.search_icon {
width: 34px;
height: 34px;
border-radius: 40px;
border: 3px solid red;
display: block;
position: relative;
margin:22px;
transition: all .3s ease;
&:before {
content: '';
width: 3px;
height: 15px;
position: absolute;
right: -2px;
top: 30px;
display: block;
background-color: red;
transform: rotate(-45deg);
transition: all .3s ease;
}
&:after {
content: '';
width: 3px;
height: 15px;
position: absolute;
right: -12px;
top: 40px;
display: block;
background-color: red;
transform: rotate(-45deg);
transition: all .3s ease;
}
.open & {
width: 50px;
height: 50px;
border-radius: 60px;
margin-left:95%;
&:before {
transform: rotate(45deg);
right: 23px;
top: 12px;
height: 29px;
}
&:after {
transform: rotate(-45deg);
right: 23px;
top: 12px;
height: 29px;
}
}
}
$(function() {
$('.search_icon').on('click', function() {
$('.search').toggleClass('open clicked');
});
});
解决的问题 – art