scss 一支笔由seth kontny。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了scss 一支笔由seth kontny。相关的知识，希望对你有一定的参考价值。
Wallaby Canvas
--------------
Yo man keep it simple. All you need is your dear friend transform and some percentages for off canvas navigation.
A [Pen](http://codepen.io/sethkontny/pen/fGyoD) by [seth kontny](http://codepen.io/sethkontny) on [CodePen](http://codepen.io/).
[License](http://codepen.io/sethkontny/pen/fGyoD/license).<link href='//fonts.googleapis.com/css?family=Raleway:400,200,600' rel='stylesheet' type='text/css'>
<header>
<a class="off-canvas-trigger" href="#">
<span>S</span><span>E</span><span>T</span><span>H</span><span></span>
<span> K</span><span>O</span><span>N</span><span>T</span><span>N</span><span>Y</span><span></span>
</a>
<nav class="off-canvas">
<ul class="off-canvas__list">
<li><a class="off-canvas__link" href="">About</a></li>
<li><a class="off-canvas__link" href="">Resume</a></li>
<li><a class="off-canvas__link" href="">Projects</a></li>
<li><a class="off-canvas__link" href="">Writings</a></li>
<li><a class="off-canvas__link" href="">Contacts</a></li>
<li><a class="off-canvas__link" href="">Links</a></li>
<li><a class="off-canvas__link" href="">Other Links</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h1>Persona Vox</h1>
</section>
<h1>SleepMedx Inc.</h1>
</section>
<h1>Solo collab</h1>
</main>
<footer>
</footer>$('.off-canvas-trigger').click(function() {
$('body').toggleClass('off-canvas-active');
});
// =================================================
// Modernizr
// =================================================
// Modernizr mixin to create .modernizr selector
// http://codepen.io/sturobson/pen/xcdha
@mixin css($property, $support: true) {
@if $support == true {
.#{$property} & {
@content;
}
}
@else {
.no-#{$property} & {
@content;
}
}
}
/*----------------------------------------------
=Variables
----------------------------------------------*/
$accent: #ff6589;
$background: #013742;
// Would this look better if all the transitions had the same speed?
$shared-transition-speed: .6s;
// wave
// x
$trigger-active-style: wave;
// static - no extra styles applied
// traditional
// scale
// Future additions
// - push + rotate
// - fade
$content-push: scale;
/*----------------------------------------------
=Resets
----------------------------------------------*/
*,
*:before,
*:after {
box-sizing: border-box;
position: relative;
}
*:before,
*:after { pointer-events: none; }
html {
height: 100%;
font-family: 'Raleway', sans-serif;
text-align: left;
background: $background;
}
body {
height: 100%;
min-height: 100%;
margin: 0;
color: #fff;
}
/*----------------------------------------------
=HTML
----------------------------------------------*/
a {
text-decoration: none;
transition: .3s;
}
/*----------------------------------------------
=Headings
----------------------------------------------*/
h1 {
font-size: 7vw;
font-weight: 200;
letter-spacing: 0;
text-align: center;
color: #ff6589;
transform-origin: right top;
&:first-letter {
font-size: 9vw;
}
}
/*----------------------------------------------
=Off Canvas Trigger
----------------------------------------------*/
.off-canvas-trigger {
display: block;
padding: 1.75em 1em 1.75em 5em;
font-size: 1.75em;
background: rgba(#fff, .05);
color: #fff;
transition: .3s;
&:before {
position: absolute;
top: 22%;
left: 1em;
height: .5em;
width: .5em;
content: '';
background: $accent;
box-shadow:
.5em 0 0 0 adjust-hue($accent, 20%),
1em 0 0 0 adjust-hue($accent, 40%),
1.5em 0 0 0 adjust-hue($accent, 60%),
2em 0 0 0 adjust-hue($accent, 80%),
2.5em 0 0 0 adjust-hue($accent, 100%),
0 1em 0 0 adjust-hue($accent, 0),
.5em 1em 0 0 adjust-hue($accent, 20%),
1em 1em 0 0 adjust-hue($accent, 40%),
1.5em 1em 0 0 adjust-hue($accent, 60%),
2em 1em 0 0 adjust-hue($accent, 80%),
2.5em 1em 0 0 adjust-hue($accent, 100%),
0 2em 0 0 adjust-hue($accent, 0),
.5em 2em 0 0 adjust-hue($accent, 20%),
1em 2em 0 0 adjust-hue($accent, 40%),
1.5em 2em 0 0 adjust-hue($accent, 60%),
2em 2em 0 0 adjust-hue($accent, 80%),
2.5em 2em 0 0 adjust-hue($accent, 100%);
transition: .45s;
}
&:hover {
background: rgba(#fff, .1);
&:before {
background: adjust-hue($accent, 100%);
box-shadow:
.5em 0 0 0 adjust-hue($accent, 80%),
1em 0 0 0 adjust-hue($accent, 60%),
1.5em 0 0 0 adjust-hue($accent, 40%),
2em 0 0 0 adjust-hue($accent, 20%),
2.5em 0 0 0 adjust-hue($accent, 0),
0 1em 0 0 adjust-hue($accent, 100%),
.5em 1em 0 0 adjust-hue($accent, 80%),
1em 1em 0 0 adjust-hue($accent, 60%),
1.5em 1em 0 0 adjust-hue($accent, 40%),
2em 1em 0 0 adjust-hue($accent, 20%),
2.5em 1em 0 0 adjust-hue($accent, 0),
0 2em 0 0 adjust-hue($accent, 100%),
.5em 2em 0 0 adjust-hue($accent, 80%),
1em 2em 0 0 adjust-hue($accent, 60%),
1.5em 2em 0 0 adjust-hue($accent, 40%),
2em 2em 0 0 adjust-hue($accent, 20%),
2.5em 2em 0 0 adjust-hue($accent, 0);
}
}
.off-canvas-active & {
background: rgba(#fff, .1);
&:before {
background: $accent;
@if $trigger-active-style == wave {
box-shadow:
.5em .5em 0 0 adjust-hue($accent, 20%),
1em 1em 0 0 adjust-hue($accent, 40%),
1.5em .5em 0 0 adjust-hue($accent, 60%),
2em 0 0 0 adjust-hue($accent, 80%),
2.5em .5em 0 0 adjust-hue($accent, 100%),
0 1em 0 0 adjust-hue($accent, 0),
.5em 1.5em 0 0 adjust-hue($accent, 20%),
1em 2em 0 0 adjust-hue($accent, 40%),
1.5em 1.5em 0 0 adjust-hue($accent, 60%),
2em 1em 0 0 adjust-hue($accent, 80%),
2.5em 1.5em 0 0 adjust-hue($accent, 100%),
0 2em 0 0 transparent,
.5em 2em 0 0 transparent,
1em 2em 0 0 transparent,
1.5em 2em 0 0 transparent,
2em 2em 0 0 transparent,
2.5em 2em 0 0 transparent;
}
@if $trigger-active-style == x {
box-shadow:
.5em .5em 0 0 adjust-hue($accent, 20%),
1em 1em 0 0 adjust-hue($accent, 40%),
1.5em .5em 0 0 adjust-hue($accent, 60%),
2em 0 0 0 adjust-hue($accent, 80%),
2.5em .5em 0 0 transparent,
0 2em 0 0 adjust-hue($accent, 0),
.5em 1.5em 0 0 adjust-hue($accent, 20%),
1em 2em 0 0 transparent,
1.5em 1.5em 0 0 adjust-hue($accent, 60%),
2em 2em 0 0 adjust-hue($accent, 80%),
2.5em 1.5em 0 0 transparent,
0 2em 0 0 transparent,
.5em 2em 0 0 transparent,
1em 2em 0 0 transparent,
1.5em 2em 0 0 transparent,
2em 2em 0 0 transparent,
2.5em 2em 0 0 transparent;
}
}
}
span {
color: $accent;
&:nth-child(2) { color: adjust-hue($accent, 20%); }
&:nth-child(3) { color: adjust-hue($accent, 40%); }
&:nth-child(4) { color: adjust-hue($accent, 60%); }
&:nth-child(5) { color: adjust-hue($accent, 80%); }
&:nth-child(6) { color: adjust-hue($accent, 100%); }
&:nth-child(7) { color: adjust-hue($accent, 120%); }
}
}
/*----------------------------------------------
=Off Canvas
----------------------------------------------*/
.off-canvas {
position: fixed;
top: 8.25em;
z-index: 2;
height: 100%;
min-height: 100%;
// Reinvestigate - Mobile Safari doesn't render the scroll bar here
// If the content is very tall consider condensing via height based media queries
overflow-y: scroll;
overflow-scrolling: touch;
// A little pushin for the cushion
// Does the scroll work as expected without padding-bottom?
padding: .75em 0 20em;
width: 75%;
background: rgba(#fff, .02);
transition: .6s;
@media (min-width: 37.5em) {
width: 50%;
}
@include css(csstransforms3d) {
transform: translate3d(-100%, 0, 0);
}
@include css(csstransforms3d, false) {
transform: translate(-100%);
}
@include css(csstransforms, false) {
left: -100%;
}
.off-canvas-active & {
@include css(csstransforms3d) {
transform: translate3d(0, 0, 0);
}
@include css(csstransforms3d, false) {
transform: translate(0);
}
@include css(csstransforms, false) {
left: 0;
}
}
}
.off-canvas__list {
margin: 0;
padding: 0;
list-style: none;
}
.off-canvas__link {
display: block;
z-index: 2;
padding: 2em;
letter-spacing: 0;
color: $accent;
&:first-letter {
font-size: 2em;
}
&:before {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
content: '';
transition: .3s;
}
&:hover {
letter-spacing: .2em;
color: adjust-hue($accent, 30%);
&:before {
box-shadow:
inset .3em 0 0 0 $accent,
inset .6em 0 0 0 $background,
inset .7em 0 0 0 adjust-hue($accent, 20%);
}
}
}
/*----------------------------------------------
=Main
----------------------------------------------*/
main {
overflow: hidden;
}
section {
transition: .6s;
@if $content-push == traditional {
.off-canvas-active & {
@include css(csstransforms3d) {
transform: translate3d(50%, 0, 0);
}
@include css(csstransforms3d, false) {
transform: translate(50%);
}
@include css(csstransforms, false) {
left: 50%;
}
}
}
@if $content-push == scale {
transform-origin: right center;
.off-canvas-active & {
@include css(csstransforms) {
transform: scale(.9);
}
@include css(csstransforms, false) {
opacity: .8;
}
}
}
}以上是关于scss 一支笔由seth kontny。的主要内容，如果未能解决你的问题，请参考以下文章