一个轻量级的jQuery插件可以让你创建有趣的交互式眼睛,跟随光标的移动,让你的网站栩栩如生
1.在网页中添加眼睛。
- <div class="eyes">
- <div class="eye">
- <div class="eye-retina"></div>
- </div>
- <div class="eye">
- <div class="eye-retina"></div>
- </div>
- </div>
- /* example CSS */
- .eyes {
- width: 200px;
- height: 100px;
- position: relative;
- border-radius: 100px / 50px;
- background-color: white;
- display: flex;
- justify-content: center;
- align-items: center;
- overflow: hidden;
- }
- .eye {
- width: 80px;
- height: 80px;
- border-radius: 50%;
- background-color: #666666;
- position: absolute;
- top: 10%;
- transition: transform .2s ease-in-out;
- }
- .eye-retina {
- width: 40px;
- height: 40px;
- border-radius: 50%;
- background-color: white;
- position: absolute;
- top: 20%;
- left: 20%;
- transform: translate(-50%, -50%);
- }
2.加载jquery.eyes-follow-mouse.js
在jQuery之后。就是这样。
- <!-- jQuery is required -->
- <script src="/path/to/cdn/jquery.min.js"></script>
- <!-- jQuery eyes-follow-mouse.js -->
- <script src="/path/to/jquery.eyes-follow-mouse.js"></script>