视觉差效果的月亮特效

来源:https://www.sucaihuo.com/js/2848.html 2017-08-28 00:33浏览(1307) 收藏

一款视觉差效果的月亮特效,鼠标悬停在预设区域时,区域的形状会变成圆形,并且月亮和云都跟随鼠标的运动有一个视差效果,鼠标离开时,则恢复到固定的画面。
视觉差效果的月亮特效
分类:html/css > 图形 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的head部分,需引入页面的样式文件,代码如下:

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分,需设置好月亮、云和星星的容器,代码如下:

<div class="main">
  <div class="moon-group">
    <div class="moon"></div>
    <div class="moon-shadow"></div>
  </div>
  <div class="cloud-group-1">
    <div class="cloud cloud-1"></div>
    <div class="cloud-shadow"></div>
  </div>
  <div class="cloud-group-2">
    <div class="cloud cloud-2"></div>
    <div class="cloud-shadow"></div>
  </div>
  <div class="stars">
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
  </div>
</div>

页面的底部,远程调用jQuery库和其余两个JS文件,代码如下:

<script src='https://code.jquery.com/jquery-1.11.3.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>
标签: 视差视觉差
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2