360度全景海平面效果
代码语言:html
所属分类:三维
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Ocean Surface</title> <style> html, body { width:100%; height:100%; overflow:hidden; background:linear-gradient(to top, rgb(255,255,255) 55%, rgb(110,215,255) 80%, rgb(75,100,255) 130%); min-height:440px; } * { position:absolute; user-select: none; } </style> </head> <body translate="no"> <div id="container"> <div id="water"></div> <div class="bird bird1"></div> <div class="bird bird2"></div> <div class="bird bird3"></div> </div> <div id="compass"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px"> <circle opacity="0.5" fill="#fff" cx="25" cy="25" r="25" /> <path class="cView" fill="#fff" d="M50,25c-14.33,0-25,0-25,0s0-7,0-25C38.81,0,50,11.19,50,25z" /> <circle fill="#fff" cx="25" cy="25" r="4.67" /> </svg> </div> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script> <script> var c = document.getElementById('container'), water = document.getElementById('water'), n = 55; new TimelineMax() .set(c, {minWidth:3200, width:'200%', height:'100%', backgroundImage:'url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/721952/fog3.png)'}, 0) .set(water, {width:'110%', height:300, left:'-20%', bottom:-50, perspective:500}, 0) .set('.bird', {width:60, left:-60, height:60, backgroundImage:'url(https://s3-us-west-2.amazonaws.com.........完整代码请登录后点击上方下载按钮下载查看
网友评论0