TweenMax实现图片悬浮交互移动效果代码
代码语言:html
所属分类:悬停
代码描述:TweenMax实现图片悬浮交互移动效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { background: #3C4B59; } body, html { height: 100%; width: 100%; margin: 0; padding: 0; } .container { height: 100%; display: flex; align-items: center; justify-content: center; } /* ========================================================================== Work Item ========================================================================== */ .work__item { position: relative; width: 500px; height: 500px; min-height: 375px; max-height: 720px; padding: 10px; perspective: 300px; } .work__item:after { position: absolute; z-index: 0; top: 10px; right: 10px; bottom: 10px; left: 10px; display: block; content: ""; background: transparent; box-shadow: 4px 4px 80px rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity 1s ease-in-out; } .work__item-inner { position: relative; z-index: 1; height: 100%; background: black; overflow: hidden; box-shadow: 4px 4px 24px rgba(0, 0, 0, 0.3); transform-style: preserve-3d; } .work__item-img-outer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; } .work__item-img { transform: scale(1.4); width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script> </head> <body> <div class="container"> <article class="work__item"> <div class="work__item-inner"> <div class="work__item-img-outer" style="transform: matrix(1, 0, 0, 1, 0, 0); transform-origin: center center 0px;"> <img class="work__item-img" src="//repo.bfw.wiki/bfwrepo/image/5ff8f9e5b4e43.png" alt=".........完整代码请登录后点击上方下载按钮下载查看
网友评论0