# CSS 按钮视觉效果
<style>
.btn-style {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 230px;
height: 90px;
line-height: 90px;
text-align: center;
color: #fff;
font-size: 25px;
text-transform: uppercase;
cursor: pointer;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
border-radius: 60px;
}
.btn-style:hover {
animation: animate 8s linear infinite;
}
@keyframes animate {
0% {
background-position: 0%;
}
100% {
background-position: 400%;
}
}
.btn-style::before {
content: '';
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
z-index: -1;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
border-radius: 40px;
opacity: 0;
transition: 0.5s;
}
.btn-style:hover::before {
filter: blur(20px);
opacity: 1;
animation: animate 8s linear infinite;
}
</style>
<body>
<b href="#" class="btn-style">流光按钮</b>
</body
# CSS 背景视觉效果
# CSS 颜色混合模型(Blend Mode)视觉效果
<div class="content">BLEND</div>
<section class="one">
<div class="wrapper"></div>
</section>
<section class="two">
<div class="wrapper"></div>
</section>
<section class="three">
<div class="wrapper"></div>
</section>
<section class="four">
<div class="wrapper"></div>
</section>
%fixedbox {
// Basic styling
box-sizing: border-box;
display: block;
font-size: 4em;
padding: 1em;
width: 6em;
height: 3em;
// Center box in middle of screen
position: fixed;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
.content {
// Basic styling
@extend %fixedbox;
font-weight: bold;
text-align: center;
z-index: 1000;
// Cut-out text effect
background: #fff;
color: #000;
mix-blend-mode: lighten;
}
section {
// Background image styling
background-repeat: no-repeat;
background-size: cover;
// Reset stacking context
isolation: isolate;
// Must be set to correctly position .wrapper below
position: relative;
// Height not required. Can be left as auto
height: 100vh;
padding: 1em;
}
.wrapper {
// Hides box (&:before) outside of section
clip: rect(auto auto auto auto);
// Clip works only on positions absolute or fixed
position: absolute;
// Stretch to fill entire section
top: 0;
right: 0;
bottom: 0;
left: 0;
&:before {
content: " ";
// Basic styling
@extend %fixedbox;
padding: 2em 3.5em;
// Blend with background
mix-blend-mode: darken;
}
}
.one {
// Section background image
background-image: url(https://source.unsplash.com/1920x1080?nature);
.wrapper:before {
// Box background color
background: red;
}
}
.two {
background-image: url(https://source.unsplash.com/1920x1080?landscape);
.wrapper:before {
background: #faaa54;
mix-blend-mode: difference;
}
}
.three {
background-image: url(https://source.unsplash.com/1920x1080?portrait);
.wrapper:before {
background: #6c320a;
mix-blend-mode: screen;
}
}
.four {
background-image: url(https://source.unsplash.com/1920x1080?stars);
.wrapper:before {
background: #e4135d;
}
}
# 滚动模糊视觉效果
<div class="feature"></div>
<div class="content">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscfing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. </p>
<p>Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. </p>
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. </p>
<p>Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. </p>
</div>
* {box-sizing:border-box}
body, html {padding:0; margin:0}
body {background:#232323; color:#fff}
.opaque {position:absolute; top:0; left:0; right:0; bottom:0; opacity:0; background:#d2d6f1;}
.lt-ie9 .opaque {display:none;}
.feature {position:fixed; top:0; z-index:0; width:100%; padding-top:50%; background: url(http://s3.nikecdn.com/pass/NikeBasketball/LeBron_Poster.jpg) center center no-repeat;
-webkit-background-size:250%;
-moz-background-size:250%;
-o-background-size:250%;
background-size:250%;
-webkit-box-shadow: 0 -50px 20px -20px #232323 inset;
-moz-box-shadow: 0 -50px 20px -20px #232323 inset;
box-shadow: 0 -50px 20px -20px #232323 inset;
}
.content {position:relative; z-index:1; padding-top:45%; width:90%; margin:0 auto;}
@media only screen and (min-width:36.250em) {
.content {width:60%; padding-top:35% }
}
$(function(){
zoom = $('.feature').css('background-size')
zoom = parseFloat(zoom)/100
size = zoom * $('.feature').width();
$(window).on('scroll', function(){
fromTop = $(window).scrollTop();
newSize = size - (fromTop/3);
if (newSize > $('.feature').width()) {
$('.feature').css({
'-webkit-background-size': newSize,
'-moz-background-size': newSize,
'-o-background-size': newSize,
'background-size': newSize,
'-webkit-filter':'blur('+ 0 + (fromTop/100) + 'px)',
'opacity': 1 - ((fromTop / $('html').height()) * 1.3)
});
}
});
});
$(function (){
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
if (isChrome || isSafari) {
} else {
$('.feature').append('<div class="opaque"></div>');
$(window).on('scroll', function(){
var opacity = 0 + ($(window).scrollTop()/5000);
$('.opaque').css('opacity', opacity);
});
}
});