html 醒目的样式,CSS3背景 醒目而惊艳的滚动效果

html>

Title

* {

padding: 0;

margin: 0;

}

body {

height: 2000px;

}

#wrap {

width: 800px;

height: 400px;

background: url("bg.jpg") no-repeat center ;

background-size: cover;

}

.sircle {

position: absolute;

top: 20%;

left: 20%;

width: 0px;

height: 0px;

border-radius:50%;

background: url('circle.jpg') no-repeat fixed;

background-size: 800px 400px;

background-position-x: 0;

background-position-y: 400px;

border:1px solid #2b2b2b;

}

.box {

overflow: hidden;

float: left;

position: absolute;

top: 400px;

}

$(() => {

/**背景滚动自身高度时， */

var body = $('body')[0],

sircle = document.querySelector('.sircle');

//        body.onscroll = function () ;

body.οnscrοll=function () {

console.log(this.scrollY);

sircle.style.width = this.scrollY * 4 + 'px';

sircle.style.height = this.scrollY * 4 + 'px';

sircle.style.left = 20 - this.scrollY  + 'px';

sircle.style.top = 20 - this.scrollY + 'px';

sircle.style.backgroundPositionY =-this.scrollY+400 + 'px';

}

})

/