@mixin fp($property, $min, $max, $start:500, $end:1366, $clip: true, $sourceUnit:vw, $clipAtStart: true, $clipAtEnd: true) { $multiplier: ($max - $min) / ($end - $start) * 100; $adder: ($min * $end - $max * $start) / ($end - $start); $formula: calc(#{$multiplier + $sourceUnit} + #{$adder + 0px}); @if($clip and $clipAtStart){ @media (max-width: #{$start + 0px}) { #{$property}: $min + 0px; } } @if($clip and $clipAtEnd){ @media (min-width: #{$end + 0px}) { #{$property}: $max + 0px; } } #{$property}: $formula; } body { background-color: #fff; padding: 0; margin: 0; } roadrunner{ display: block; position: absolute; bottom:45%; left:50%; z-index: 4; width:300px; @include fp(margin-left, 200, -200, $end:800); img{ width:100%; } } scene { overflow: hidden; display: block; height: 500px; width: 100%; position: relative; background-color: #000; } sun { position: absolute; display: block; background-color: yellow; background: radial-gradient(ellipse at center, #ffff88 0%, #fcce00 100%); border-radius: 100%; left: 50%; transform: translateY(-50%); @include fp(margin-left, 100, -100); @include fp(width, 10, 300); @include fp(height, 10, 300); top: 80px; z-index: 2; } clip { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); display: block; overflow: hidden; @include fp(border-radius, 500, 0); @include fp(width, 0, 3000); @include fp(height, 0, 3000); } grass { background: linear-gradient(to bottom, #c9de96 0%, #8ab66b 44%, #398235 100%); position: absolute; top: 80px; bottom: 0; left: 0; right: 0; z-index: 3; } clipinner { position: absolute; width: 100%; height: 500px; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); } sky { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 80px; background-color: blue; background: linear-gradient(to bottom, #0a77d5 0%, #539fe1 79%, #87bcea 100%); z-index: 1; } bolder{ height:222px; position: absolute; display: block; border-radius:100%; border-bottom-left-radius: 40%; border-bottom-right-radius: 40%; top:8%; z-index: 5; left:50%; width:350px; @include fp(margin-top, -700, 0, $end:800); @include fp(margin-left, 200, -200, $end:800); img{ width:100%; } } road { display: block; position: absolute; top: 50%; left: 0; width: 100%; height: 200px; transform: translateY(-50%); background-color: #aaa; background: linear-gradient(to bottom, #b5bdc8 0%, #828c95 36%, #28343b 100%); z-index: 3; &:before { content: ""; display: block; position: absolute; width: 5000px; top: 60%; transform: translateY(-50%); @include fp(right, 0, -2000); border-top: 10px dashed #eee; } }