anime实现鼠标悬浮层叠动画效果代码
代码语言:html
所属分类:悬停
代码描述:anime实现鼠标悬浮层叠动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> *, *::after, *::before { -webkit-box-sizing: border-box; box-sizing: border-box; } body { font-family: 'Overpass Mono', monospace; color: #edecf2; background: #37373e; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { text-decoration: none; color: #ff3d53; outline: none; transition: color 0.2s; } a:hover, a:focus { color: #fff; } .hidden { position: absolute; overflow: hidden; width: 0; height: 0; pointer-events: none; } /* Icons */ .icon { display: block; width: 1.5em; height: 1.5em; margin: 0 auto; fill: currentColor; } .message-mobile { font-size: 0.85em; display: none; width: 100%; padding: 0.5em; text-align: center; background: #ff3d53; } /* Header */ .codrops-header { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; width: 100%; padding: 1.5em 1.5em 4em; text-align: left; } .codrops-header__title { font-size: 1.15em; margin: 0; padding: 0 0.5em; } .codrops-header__tagline { font-size: 0.85em; width: 100%; margin: 0; color: #b0adad; } .codrops-header__tagline::before { content: '> '; } .github { font-size: 0.85em; font-weight: bold; margin: 0 0 0 auto; } /* Top Navigation Style */ .codrops-links { position: relative; display: flex; justify-content: center; text-align: center; white-space: nowrap; } .codrops-links::after { content: ''; position: absolute; top: 20%; left: 50%; width: 1px; height: 60%; background: #b0adad; transform: rotate3d(0, 0, 1, 22.5deg); } .codrops-icon { display: inline-block; margin: 0.25em 0 0.25em 0.25em; padding: 0.35em 0 0.35em 0.35em; } .codrops-icon:first-child { margin: 0.25em 0.25em 0.25em 0; padding: 0.35em 0.35em 0.35em 0; } /* Content */ .content { position: relative; display: flex; flex-wrap: wrap; align-items: center; padding: 0 0 1em; } .content:not(:first-child) { padding: 4em 0; } .content.content--padded { padding: 4em 0 8em; } .content__title { font-size: 0.85em; position: absolute; top: 18%; left: 2em; width: 5em; margin: 0.75em 0; color: #b0adad; } /* Grid */ .grid { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; padding: 0 7em; perspective: 800px; perspective-origin: 50% 100%; } .grid__item { position: relative; display: block; flex: none; width: 250px; margin: 1.5em 2vw; cursor: default; transform-style: preserve-3d; } .grid__item:hover, .grid__item:focus { outline: none; } .grid__item--c1, .grid__item--c1:hover, .grid__item--c1:focus { color: #52649e; } .grid__item--c2, .grid__item--c2:hover, .grid__item--c2:focus { color: #ee7074; } .grid__item--c3, .grid__item--c3:hover, .grid__item--c3:focus { color: #f7f295; } .stack { position: relative; width: 100%; height: 200px; transform-style: preserve-3d; } .stack__deco { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: currentColor; transform-origin: 50% 100%; } .stack__deco:first-child { opacity: 0.2; } .stack__deco:nth-child(2) { opacity: 0.4; } .stack__deco:nth-child(3) { opacity: 0.6; } .stack__deco:nth-child(4) { opacity: 0.8; } .stack__figure { position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; width: 100%; height: 100%; cursor: pointer; transform-origin: 50% 100%; } .stack__img { position: relative; display: block; flex: none; } .grid__item-caption { position: relative; display: flex; flex-wrap: wrap; width: 100%; transform-style: preserve-3d; } .grid__item-title { font-size: 1.15em; width: 100%; margin: 1em 0; text-align: left; color: #fff; } .column { width: 50%; padding: 0 0.5em; opacity: 0; } .column--left { text-align: right; } .column--right { text-align: left; } .column__text { font-size: 0.85em; display: block; color: #fff; } .column--left .column__text { font-weight: bold; } .column--right .column__text { color: #b0adad; } /* Individual effects */ /* Vega */ .grid--effect-vega .column { opacity: 1; } /* Castor */ .grid--effect-castor .stack__figure, .grid--effect-castor .stack__deco { transform-origin: 50% 50%; } .grid--effect-castor .column { opacity: 1; } /* Hamal */ .grid--effect-hamal { perspective: none; } .grid--effect-hamal .column { opacity: 1; } /* polaris */ .grid--effect-polaris { perspective-origin: 100% -100%; } .grid--effect-polaris .column { opacity: 1; } /* Alphard */ .grid--effect-alphard { perspective: none; } .grid--effect-alphard .column { opacity: 1; } .grid--effect-alphard .stack__figure, .grid--effect-alphard .stack__deco { transform-origin: 50% 150%; } /* Altair */ .grid--effect-altair { perspective-origin: 50% -50%; } .grid--effect-altair .column { opacity: 1; } .grid--effect-altair .stack__figure, .grid--effect-altair .stack__deco { transform-origin: 50% 100%; } /* rigel */ .grid--effect-rigel { perspective-origin: 50% 100%; } .grid--effect-rigel .column { opacity: 1; } /* Canopus */ .grid--effect-canopus { perspective-origin: 50% 0%; } .grid--effect-canopus .column { opacity: 1; } .grid--effect-canopus .stack__figure, .grid--effect-canopus .stack__deco { transform-origin: 50% 100%; } /* pollux */ .grid--effect-pollux { perspective: 1000px; perspective-origin: 50% -70%; } .grid--effect-pollux .column { opacity: 1; } .grid--effect-pollux .stack__figure, .grid--effect-pollux .stack__deco { transform-origin: 50% 50%; } .grid--effect-pollux .grid__item-caption > .grid__item-title { transform-origin: 50% -200%; } /* deneb */ .grid--effect-deneb { perspective: none; } .grid--effect-deneb .stack__figure, .grid--effect-deneb .stack__deco { transform-origin: 50% 50%; } .grid--effect-deneb .grid__item-caption > .column { transform-origin: 50% -200%; } /* Related demos */ .content.content--related { font-weight: bold; justify-content: center; min-height: 0; padding-bottom: 10em; text-align: center; background: #5d5d66; } .content--related a { color: #b0adad; } .content--related a:hover, .content--related a:focus { color: #fff; } .content--related p:first-child { padding: 6em 0 2em; } .content--related p { width: 100%; color: #37373e; } .media-item { font-size: 0.85em; display: inline-block; padding: 1em 2vw; vertical-align: top; transition: color 0.3s; } .media-item__img { max-width: 100%; opacity: 0.6; transition: opacity 0.3s; } .media-item:hover .media-item__img, .media-item:focus .media-item__img { opacity: 1; } .media-item__title { font-size: 1em; margin: 0; padding: 0.5em; } @media screen and (max-width: 42em) { .codrops-header { display: block; text-align: center; } .github { width: 100%; margin: 0; padding: 0.5em 0; } .message-mobile { display: block; } } </style> </head> <body> <svg class="hidden"> <symbol id="icon-arrow" viewBox="0 0 24 24"> <title>arrow</title> <polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "> </symbol> <symbol id="icon-drop" viewBox="0 0 24 24"> <title>drop</title> <path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"> </symbol> </svg> <main> <div class="message-mobile">This is a hover effect. Best viewed on desktop.</div> <section class="content"> <h2 class="content__title">_001</h2> <div class="grid grid--effect-vega"> <a href="#" class="grid__item grid__item--c1"> <div class="stack"> <div class="stack__deco"></div> <div class="stack__deco"></div> <div class="stack__deco"></div> <div class="stack__deco"></div> <div class="stack__figure"> <img class="stack__img" src="//repo.bfw.wiki/bfwrepo/image/5e584482a56eb.png" alt="Image"> </div> </div> <div class="grid__item-caption"> <h3 class="grid__item-title">anaerobic</h3> <div class="column column--left"> <span class="column__text">Period</span> <span class="column__text">Subjects</span> <span class="column__text">Result</span> </div> <div class="column column--right"> <span class="column__text">2045</span> <span class="column__text">133456</span> <span class="column__text">Positive</span> </div> </div> </a> <a href="#" class="grid__item grid__item--c2"> <div class="stack"> <div class="stack__deco"></div> <div class="stack__deco"></div> <div class="stack__deco"></div> <div class="stack__deco"></div> <div class="stack__figure"> <img class="stack__img" src="//repo.bfw.wiki/bfwrepo/image/5e584482a56eb.png" alt="Image"> </div> </div> <div class="grid__item-caption"> <h3 class="grid__item-title">exothermic</h3> <div class="column column--left"> <span class="column__text">Period</span> <span class="column__text">Subjects</span> <span class="column__text">Result</span> </div> <div class="column column--right"> <span class="column__text">2045</span> <span class="column__text">133456</span> <span class="column__text">Positive</span> </div> </div> </a> <a href="#" class="grid__item grid__item--c3"> <div class="stack"> <div class="stack__deco"></div> <div class="stack__deco"></div> <div class="stack__deco"></div> <div class="stack__deco"></div> <div class="stack__figure"> <img class="stack__img" src="//repo.bfw.wiki/bfwrepo/image/5e584482a56eb.png" alt="Image"> </div> </div> <div class="grid__item-caption"> <h3 class="grid__item-title">diatomic</h3> <div class="column column--left"> <span class="column__text">Period</span> <span class="column__text">Subjects</span> <span class="column__text">Result</span> </div> <div class="column column--right"> <span class="column__text">2045</span> <span class="column__text">133456</span> <span class="column__text">Positive</span> </div> </div> </a> </div> </section> </main> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/anime-min.js"></script> <script> /** * main.js * http://www.codrops.com * * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * Copyright 2017, Codrops * http://www.codrops.com */ ;(function(window) { 'use strict'; /** * StackFx: The parent class. */ function StackFx(el) { this.DOM = {}; this.DOM.el = el; this.DOM.stack = this.DOM.el.querySelector('.stack'); this.DOM.stackItems = [].slice.call(this.DOM.stack.children); this.totalItems = this.DOM.stackItems.length; this.DOM.img = this.DOM.stack.querySelector('.stack__figure > .stack__img'); this.DOM.caption = this.DOM.el.querySelector('.grid__item-caption'); this.DOM.title = this.DOM.caption.querySelector('.grid__item-title'); this.DOM.columns = {left: this.DOM.caption.querySelector('.column--left'), right: this.DOM.caption.querySelector('.column--right')}; } StackFx.prototype._removeAnimeTargets = function() { anime.remove(this.DOM.stackItems); anime.remove(this.DOM.img); anime.remove(this.DOM.title); anime.remove(this.DOM.columns.left); anime.remove(this.DOM.columns.right); }; /************************************************************************ * VegaFx. ************************************************************************/ function VegaFx(el) { StackFx.call(this, el); this._initEvents(); } VegaFx.prototype = Object.create(StackFx.prototype); VegaFx.prototype.constructor = VegaFx; VegaFx.prototype._initEvents = function() { var self = this; this._mouseenterFn = function() { self._removeAnimeTargets(); self._in(); }; this._mouseleaveFn = function() { self._removeAnimeTargets(); self._out(); }; this.DOM.stack.addEventListener('mouseenter', this._mouseenterFn); this.DOM.stack.addEventListener('mouseleave', this._mouseleaveFn); }; VegaFx.prototype._in = function() { var self = this; this.DOM.stackItems.map(function(e, i) { e.style.opacity = i !== self.totalItems - 1 ? 0.2*i+0.2 : 1 }); anime({ targets: this.DOM.stackItems, translateZ: [ { value: function(target, index) { return index*8 + 8; }, duration: 200 , easing: [0.42,0,1,1] }, { value: function(target, index) { return index*20 + 20; }, duration: 700, easing: [0.2,1,0.3,1] } ], rotateX: [ { value: function(target, index) { return -1 * (index*2 + 2); }, duration: 200, easing: [0.42,0,1,1] }, { value: 0, duration: 700, easing: [0.2,1,0.3,1] } ] }); anime({ targets: this.DOM.img, duration: 900, easing: [0.2,1,0.3,1], scale: 0.7 }); anime({ targets: this.DOM.title, translateY: { value: [35,0], duration: 500, easing: [0.5,1,0.3,1] }, opacity: { value: [0,1], duration: 400, easing: 'linear' } }); anime({ targets: [this.DOM.columns.left, this.DOM.columns.right], translateY: [ { value: function(target, index) { return index === 0 ? [40,0] : [60,0]; }, duration: 500, easing: [0.5,1,0.3,1], delay: 100 } ], opacity: [ {value: [0,0], duration: 1, easing: 'linear'}, {value: 1, delay: 100, duration: 400, easing: 'linear'} ] }); }; VegaFx.prototype._out = function() { var self = this; anime({ targets: this.DOM.stackItems, translateZ: [ { value: function(target, index) { return index * 20 + 20 - 8; }, duration: 200 , easing: [0.42,0,1,1] }, { value: 0, duration: 900, easing: [0.2,1,0.3,1] } ], rotateX: [ { value: function(target, index) { return index*2 + 2; }, duration: 200, easing: [0.42,0,1,1] }, { value: 0, duration: 900, easing: [0.2,1,0.3,1] } ], opacity: { value: function(target, index, cnt) { return index !== cnt - 1 ? 0 : 1 }, duration: 900, delay: 200, easing: [0.2,1,0.3,1] } }); anime({ targets: this.DOM.img, duration: 900, easing: [0.2,1,0.3,1], scale: 1 }); anime({ targets: this.DOM.title, duration: 750, easing: [0.2,1,0.3,1], translateY: 0, opacity: 1 }); anime({ targets: [this.DOM.columns.left, this.DOM.columns.right], duration: 750, easing: [0.2,1,0.3,1], translateY: 0, opacity: 1 }); }; window.VegaFx = VegaFx; /************************************************************************ * CastorFx. ************************************************************************/ function CastorFx(el) { StackFx.call(this, el); this._initEvents(); } CastorFx.prototype = Object.create(StackFx.prototype); CastorFx.prototype.constructor = CastorFx; CastorFx.prototype._initEvents = function() { var self = this; this._mouseenterFn = function() { self._removeAnimeTargets(); self._in(); }; this._mouseleaveFn = function() { self._removeAnimeTargets(); self._out(); }; this.DOM.stack.addEventListener('mouseenter', this._mouseenterFn); this.DOM.stack.addEventListener('mouseleave', this._mouseleaveFn); }; CastorFx.prototype._in = function() { var self = this; anime({ targets: this.DOM.stackItems, rotateX: { value: function(target, index, cnt) { return index === cnt - 1 ? 0 : [70, 0]; }, duration: 1000, easing: 'easeOutExpo' }, translateZ: { value: function(target, index, cnt) { return index === cnt - 1 ? index*20 : [-300, index*20]; }, duration: 1000, easing: 'easeOutExpo' }, opacity: { value: function(target, index, cnt) { return index === cnt - 1 ? 1 : [0,0.2*index+0.2]; }, duration: 1000, easing: 'linear' }, delay: function(target, index, cnt) { return (cnt-index-1)*100 } }); anime({ targets: this.DOM.img, duration: 1000, easing: 'easeOutExpo', scale: 0.7 }); anime({ targets: this.DOM.title, duration: 1000, easing: 'easeOutExpo', translateZ: 30 }); }; CastorFx.prototype._out = function() { var self = this; anime({ targets: this.DOM.stackItems, duration: 1000, easing: 'easeOutExpo', translateZ: 0, opacity: function(target, index, cnt) { return index !== cnt - 1 ? 0 : 1 } }); anime({ targets: this.DOM.img, duration: 1000, easing: 'easeOutExpo', scale: 1 }); anime({ targets: this.DOM.title, duration: 1000, easing: 'easeOutExpo', translateZ: 0 }); anime({ targets: [this.DOM.columns.left, this.DOM.columns.right], duration: 500, easing: 'easeOutExpo', delay: function(target, index) { return index === 0 ? 150 : 200; }, translateX: 0, translateY: 0 }); }; window.CastorFx = CastorFx; /************************************************************************ * HamalFx. ************************************************************************/ function HamalFx(el) { StackFx.call(this, el); this._initEvents(); } HamalFx.prototype = Object.create(StackFx.prototype); HamalFx.prototype.constructor = HamalFx; HamalFx.prototype._initEvents = function() { var self = this; this._mouseenterFn = function() { self._removeAnimeTargets(); self._in(); }; this._mouseleaveFn = function() { self._removeAnimeTargets(); self._out(); }; this.DOM.stack.addEventListener('mouseenter', this._mouseenterFn); this.DOM.stack.addEventListener('mouseleave', this._mouseleaveFn); }; HamalFx.prototype._in = function() { var self = this; this.DOM.stackItems.map(function(e, i) { e.style.opacity = i !== self.totalItems - 1 ? 0.2*i+0.2 : 1 }); anime({ targets: this.DOM.stackItems, duration: 1000, easing: 'easeOutExpo', translateY: function(target, index) { return -1*index*5; }, rotate: function(target, index, cnt) { if( index === cnt - 1 ) { return 0; } else { return index%2 ? (cnt-index)*1 : -1*(cnt-index)*1; } }, scale: function(target, index, cnt) { if( index === cnt - 1 ) { return 1; } else { return 1.05; } }, delay: function(target, index, cnt) { return (cnt-index-1)*30 } }); anime({ targets: this.DOM.img, duration: 1000, easing: 'easeOutExpo', scale: 0.7 }); anime({ targets: [this.DOM.columns.left, this.DOM.columns.right], duration: 1000, easing: 'easeOutExpo', translateX: function(target, index) { return index === 0 ? -30.........完整代码请登录后点击上方下载按钮下载查看
网友评论0