js实现一个躲避鼠标的大眼睛眼珠效果代码
代码语言:html
所属分类:其他
代码描述:js实现一个躲避鼠标的大眼睛眼珠效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background-color: #dc5; padding: 20px; } .eyeball { position: absolute; width: 200px; height: 200px; top: 350px; left: 100px; transform: translate(-50%, -50%); border-radius: 50%; display: inline-block; margin: 4px; transition: left 0.3s ease-in-out; box-shadow: 0 2px 40px rgba(0, 0, 0, 0.3); background: #fff radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.5) 100%); } .eyeball::before, .eyeball::after { position: absolute; content: ""; border-radius: 50%; transition: transform 0.3s ease-in-out; } .eyeball::before { width: 66%; height: 66%; background-color: #ddd; background-image: radial-gradient(ellipse, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.5) 100%); top: 17%; left: 17%; } .eyeball::after { width: 24%; height: 24%; background: #000; background: radial-gradient(circle at 70% 30%, white 0%, white 16%, black 19%); top: 38%; left: 38%; } .eyeball.yellow:before { background-color: #fe7; } .eyeball.blue:before { background-color: #5ae; } .eyeball.green:before { background-color: #ae5; } .eyeball.down::before { transform: translate(0, 10%); } .eyeball.down::after { transform: translate(0, 60%); } .eyeball.up-right::before { transform: translate(10%, -10%); } .eyeball.up-right::after { transform: translate(60%, -60%); } .eyeball.right::before { transform: translate(15%, 0%); } .eyeball.right::after { transform: translate(80%, 0%); } .eyeball.left::before { transform: translate(-15%, 0%); } .eyeball.left::after { transform: translate(-80%, 0%); } </style> </head> <body > <div id="player" class="eyeball blue"></div> <script > (function (f) { if (typeof exports === "object" && typeof module !== "undefined") { module.exports = f(); } else if (typeof define === "function" && define.amd) { define([], f); } else { var g; if (typeof window !== "undefined") { g = window; } else if (typeof global !== "undefined") { g = global; } else if (typeof self !== "undefined") { g = self; } else { g = this; } g.AnimationFrame = f(); } })(function () { var define, module, exports; return function e(t, n, r) { function s(o, u) { if (!n[o]) { if (!t[o]) { var a = typeof require == "function" && require; if (!u && a) return a(o, !0); if (i) return i(o, !0); var f = new Error("Cannot find module '" + o + "'"); throw f.code = "MODULE_NOT_FOUND", f; } var l = n[o] = { exports: {} }; t[o][0].call( l.exports, function (e) { var n = t[o][1][e]; return s(n ? n : e); }, l, l.exports, e, t, n, r); } return n[o].exports; } var i = typeof require == "function" && require; for (var o = 0; o < r.length; o++) s(r[o]); return s; }( { 1: [ function (require, module, exports) { /** * An even better animation frame. * * @copyright Oleg Slobodskoi 2015 * @website https://github.com/kof/animationFrame * @license MIT */ module.exports = require("./lib/animation-frame"); }, { "./lib/animation-frame": 2 }], 2: [ function (require, module, exports) { "use strict"; var nativeImpl = require("./native"); var now = require("./now"); var performance = require("./performance"); var root = require("./root"); var nativeRequest = nativeImpl.request; var nativeCancel = nativeImpl.cancel; function AnimationFrame(options) { if (!(this instanceof AnimationFrame)) return new AnimationFrame(options); options || (options = {}); if (typeof options == "number") options = { frameRate: options }; options.useNative != null || (options.useNative = true); this.options = options; this.frameRate = options.frameRate || AnimationFrame.FRAME_RATE; this._frameLength = 1e3 / this.frameRate; this._isCustomFrameRate = this.frameRate !== AnimationFrame.FRAME_RATE; this._timeoutId = null; this._callbacks = {}; this._lastTickTime = 0; this._tickCounter = 0; } module.exports = AnimationFrame; AnimationFrame.FRAME_RATE = 60; AnimationFrame.shim = function (options) { var animationFrame = new AnimationFrame(options); root.requestAnimationFrame = function (callback) { return animationFrame.request(callback); }; root.cancelAnimationFrame = function (id) { return animationFrame.cancel(id); }; return animationFrame; }; AnimationFrame.prototype.request = function (callback) { var self = this; ++this._tickCounter; if ( nativeImpl.supported && .........完整代码请登录后点击上方下载按钮下载查看
网友评论0