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);
    }
  • 相关阅读:
    RPC 在整个过程中,体现了逐层抽象,将复杂的协议编解码和数据传输封装到了一个函数中
    RPC 框架
    x86寄存器说明
    计算机组成原理—— 寻址方式--
    七种寻址方式(相对基址加变址寻址方式)---寄存器
    什么是寻址方式
    Intel寄存器名称解释及用途,%eax%ebx等都是什么意思
    CPU的内部架构和工作原理
    CPU工作流程
    8086内部寄存器
  • 原文地址:https://www.cnblogs.com/FlyingLiao/p/10314786.html
Copyright © 2011-2022 走看看