标签:nsf tran href htm 不用 html 滚动效果 transform 查看
原文地址:https://segmentfault.com/a/1190000014964220
感想:动画效果运用了具有滚动效果的marquee标签
HTML代码:
<div class="frame"> <div class="wall top"><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div> <div class="wall right"><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div> <div class="wall bottom"><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div> <div class="wall left"><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div> </div>
CSS代码:
html, body { margin: 0; padding: 0; } .frame { position: relative; /* 视口的宽高 vmin vmax */ width: 100vmin; height: 100vmin; /* whitesmoke 烟白色 */ background-color: whitesmoke; /* 设置元素被查看位置的视图:只影响 3D 转换元素 */ perspective: 40vmin; } .wall{ position: absolute; width: 100%; font-size: 75vmin; font-weight: bold; overflow: hidden; transform-origin: 0 0; } .wall.top { top: 0; left: 0; transform: rotate(0deg) rotateX(-90deg); } .wall.right { top: 0; left: 100%; transform: rotate(90deg) rotateX(-90deg); } .wall.bottom { top: 100%; left: 100%; transform: rotate(180deg) rotateX(-90deg); } .wall.left { top: 100%; left: 0; transform: rotate(270deg) rotateX(-90deg); }
29.如何不用 transition 和 animation 也能做网页动画
标签:nsf tran href htm 不用 html 滚动效果 transform 查看
原文地址:https://www.cnblogs.com/FlyingLiao/p/10314786.html