文字视觉阴影交互动画效果-html代码-BFW代码库

文字视觉阴影交互动画效果

代码语言：html

所属分类：动画

代码描述：文字视觉阴影交互动画效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html{
 
}
body{
  background-color:#16A085;
}
div.longus{
  display:block;
  width:300px;
 margin-left:12.5%;
  margin-top:12.5%;
  background-color:#16A085;
  text-align:center;
  line-height:200px;
  font-family:Arial;
  font-size:150px;
  color:#fff;
  font-weight:bold;
  letter-spacing:50px;
}

.container{ 
  
-webkit-transform: perspective(1000px) rotateX(25deg) rotateY(35deg) rotateZ(-10deg);
-moz-transform: perspective(1000px) rotateX(25deg) rotateY(35deg) rotateZ(-10deg);
-o-transform: perspective(1000px) rotateX(25deg) rotateY(35deg) rotateZ(-10deg);
-ms-transform: perspective(1000px) rotateX(25deg) rotateY(35deg) rotateZ(-10deg);
transform: perspective(1000px) rotateX(25deg) rotateY(35deg) rotateZ(-10deg); 
}
</style>

</head>
<body translate="no">
<div class="longus container">PERSPECTIVE<br />REALSHADOW</div>

<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script>




/*! Real Shadow v1.3.4 https://indamix.github.io/real-shadow | https://raw.github.com/Indamix/real-shadow/master/license.txt */
(function(l,h){function f(d,g){this!==l&&(g=d,d=this);g=g||{};for(var a=0;a<d.length;++a){var c=d[a],b=g,m=t(c),c={node:c,x:m.x,y:m.y,c:c.getAttribute("data-shadow-color")||b.color,inset:b.inset?"inset":"",inverse:b.inverse?-1:1};b.angle!==h?c.angle=b.angle:(b.pageX!==h&&(c.pageX=b.pageX),b.pageY!==h&&(c.pageY=b.pageY));c.type=b.type;if("drop"===b.type){if(r===h){var m=(m="webkit","-"+m+"-"),e=document.createElement("div");e.style.cssText=m+"filter:drop-shadow(0 0 0 #000)";r=0<e.style.length}c.length=
  b.length||4;c.opacity=b.opacity||0.2}else c.length=b.length||7,c.opacity=b.opacity||0.05;"flat"===b.style&&(c.style=b.style,c.length=b.length||40,c.opacity=b.opacity||1);n.push(c)}s||(!1!==g.followMouse&&g.angle===h&&(document.body.addEventListener("mousemove",f.frame),s=!0),l.addEventListener("resize",f.update));f.frame();return d}function u(d){return(0===d?0:0>d?1:-1)*Math.pow(Math.abs(d),1/3)}function t(d){var g=d.clientWidth>>1,a=d.clientHeight>>1;do g+=d.offsetLeft,a+=d.offsetTop;while(d=d.offsetParent);
  return{x:g,y:a}}var v=1/1500,w=Math.PI,n=[],s,r;f.reset=function(){n=[];document.body.removeEventListener("mousemove".........完整代码请登录后点击上方下载按钮下载查看