以下是 jQuery鼠标滑过背景视觉差动画特效js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery鼠标滑过背景视觉差动画特效</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div class='page'>
<div class='content'>
<div class='circle'>
<div class='circle_title'>
<h2>内容</h2>
<h3>内容</h3>
</div>
<div class='circle_inner'>
<div class='circle_inner__layer'>
<img src='img/pc1.png'>
</div>
<div class='circle_inner__layer'>
<img src='img/pc3.png'>
</div>
<div class='circle_inner__layer'>
<img src='img/pc2.png'>
</div>
</div>
<div class='content_shadow'></div>
</div>
</div>
<div class='content'>
<div class='circle'>
<div class='circle_title'>
<h2>内容</h2>
<h3>内容</h3>
</div>
<div class='circle_inner'>
<div class='circle_inner__layer'>
<img src='img/pc4.png'>
</div>
<div class='circle_inner__layer'>
<img src='img/pc5.png'>
</div>
<div class='circle_inner__layer'>
<img src='img/pc6.png'>
</div>
</div>
<div class='content_shadow'></div>
</div>
</div>
<div class='content'>
<div class='circle'>
<div class='circle_title'>
<h2>内容</h2>
<h3>内容</h3>
</div>
<div class='circle_inner'>
<div class='circle_inner__layer'>
<img src='img/pc7.png'>
</div>
<div class='circle_inner__layer'>
<img src='img/pc8.png'>
</div>
<div class='circle_inner__layer'>
<img src='img/pc9.png'>
</div>
</div>
<div class='content_shadow'></div>
</div>
</div>
</div>
</body>
</html>CSS代码(styles.css):
*{box-sizing:border-box;}
body{font-family:'Nunito',sans-serif;}
body .page{margin:0 auto;width:920px;}
body .content{width:33.33%;display:inline-block;margin:0 auto;position:relative;height:100vh;max-width:300px;}
body .circle_inner__layer{width:600px;height:200px;-webkit-transition:all .4s;transition:all .4s;position:absolute;top:0;left:-200px;}
body .circle_inner__layer img{width:100%;position:absolute;bottom:0;}
body .circle{position:absolute;left:0;right:0;margin:auto;top:35%;width:200px;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:all .5s;transition:all .5s;cursor:pointer;}
body .circle:hover .circle_shine{top:330px;left:-200px;}
body .circle_shine{background:white;width:600px;-webkit-transition:.3s;transition:.3s;height:200px;opacity:0.2;top:-10px;left:-90px;-webkit-transform:rotate(45deg);transform:rotate(45deg);position:absolute;z-index:2;}
body .circle:hover h2,body .circle:hover h3{opacity:1;top:-36px;}
body .circle:hover .content_shadow{-webkit-transform:scale(1.1);transform:scale(1.1);top:-22px;}
body .circle:hover h3{-webkit-transition:all .2s .04s;transition:all .2s .04s;}
body .circle:hover h2{-webkit-transition:all .2s;transition:all .2s;}
body .circle .circle_inner__layer:nth-of-type(1){top:0px;left:0px;}
body .circle .circle_inner__layer:nth-of-type(2){top:0px;left:-210px;}
body .circle .circle_inner__layer:nth-of-type(3){top:0px;left:-440px;}
body .circle_title{text-align:center;}
body .circle_title h2,body .circle_title h3{opacity:0;color:#4A7479;margin:0;-webkit-transition:all .2s .04s;transition:all .2s .04s;position:relative;top:-10px;}
body .circle_title h3{-webkit-transition:all .2s;transition:all .2s;color:#B0D5D6;font-size:15px;}
body .circle_inner{border-radius:200px;background:#B0D5D6;overflow:hidden;margin:auto;width:200px;z-index:1;-webkit-transition:all .3s;transition:all .3s;height:200px;position:relative;}
body .circle_inner:hover{-webkit-transform:scale(1.1);transform:scale(1.1);}
body .circle_inner:hover .circle_inner__layer:nth-of-type(1){left:-80px;-webkit-transition:all 4s linear;transition:all 4s linear;}
body .circle_inner:hover .circle_inner__layer:nth-of-type(2){left:-400px;-webkit-transition:all 4s linear;transition:all 4s linear;}
body .circle_inner:hover .circle_inner__layer:nth-of-type(3){left:-140px;-webkit-transition:all 4s linear;transition:all 4s linear;}
body .content_shadow{width:200px;box-shadow:0px 31px 19px -2px #E0E8F9;height:20px;border-radius:70%;position:relative;top:-44px;-webkit-transition:all .3s;transition:all .3s;z-index:0;}
分享到QQ
分享到微博
微信扫一扫
