zoukankan      html  css  js  c++  java
  • 29.如何不用 transition 和 animation 也能做网页动画

    原文地址:https://segmentfault.com/a/1190000014964220

    感想:动画效果运用了具有滚动效果的marquee标签

    HTML代码:

        注释:  <!-- marquee 用来插入一段滚动的文字; 元素已经 过时,请不要再使用 !!! -->
    <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);
    }
  • 相关阅读:
    margin问题
    IE6里面子集尺寸大的会把父亲撑大
    第一个元素<flout>写了,想在他的旁边加一个元素.IE6会出现缝隙. 不要用margin撑开,要用flout
    兼容性,float
    HTML5的兼容问题以及调用js文件的方法
    表单
    表格的编写,课程表
    SmartThreadPool
    C# 多线程的等待所有线程结束的一个问题
    DataTable保存与读取 stream
  • 原文地址:https://www.cnblogs.com/FlyingLiao/p/10314786.html
Copyright © 2011-2022 走看看