操作系统动画不起作用?

时间:2018-06-01 15:46:25

标签: html css animation css-animations bounce

我现在很困惑。我之前使用过Os-animation,我甚至从其他用途中复制了确切的代码,但是我无法在这个页面上使用它。这是我的HTML / CSS:

html,
    body {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
        background-color: #4074A0;
        font-family: 'Open Sans', sans-serif;
        border: none;
        outline: none;
        box-shadow: none;
    }
    
    * {
        outline: none;
        border: none;
        box-shadow: none;
        text-shadow: none;
    }
    
    main {
        position: absolute;
        top: 35%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: block;
    }
    
    p {
        text-align: center;
        font-size: 250%;
        width: 100%;
        color: white;
        text-transform: uppercase;
        text-shadow: 0px 3px #098FA8;
    }
<!DOCTYPE html>
    <html lang="">
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Animation Testing</title>
        <link rel="stylesheet" href="style.css">
        <link href="css/animate.css" rel="stylesheet" />
        <link href="css/waypoints.css" rel="stylesheet" />
    </head>
    
    <body>
        <main class="os-animation" data-os-animation="bounceInDown" data-os-animation-delay="0s">>
                <p>Hello!</p>
        </main>
    </body>
    
    </html>



    

所以,我想要'你好'!要从顶部弹出的文本,我之前已经完成了这项工作,甚至已经复制了旧文档中的代码,但是,它似乎并不想在这个文档上工作。

我已经做了一些网上搜索,但似乎没有太多关于这个话题。

任何帮助表示赞赏! 谢谢。

0 个答案:

没有答案