Question

大家朋友嗨...几天前我已经开始使用css编程了，我在互联网上找到了这个网站 - ＆gt; https://daneden.github.io/animate.css/并且在一些视频的帮助下，我试图在我的应用程序中使用网站提供的动画，但没有结果。有人可以帮助我将网站中的代码与我的代码集成吗？我会动画div class =＆＃34; layout_generale＆＃34;。

<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="style_registration.css">

<TITLE>Registrati</TITLE>
</HEAD>
<BODY>

<FORM action="/Esercizio_14.3tomcat/registration" method="POST">
    <div class="layout_generale">
        <p>
            <BR> Nome <INPUT type="text" name="firstname" value=""><BR>
            <BR> Cognome <INPUT type="text" name="lastname" value=""><BR>
            <BR> <BR> 
            <INPUT type="radio" name="sex" value="Male">
            Maschio<BR> 
            <INPUT type="radio" name="sex" value="Female">
            Femmina<BR> <BR> 
            Email <INPUT type="email" name="email" value=""> <BR> <BR> 
            Username <INPUT type="text" name="username" value=""> <BR> <BR> 
            Password <INPUT type="password" name="password" value=""><BR> <BR>
            <BR> 
            <INPUT type="submit" value="Invio"> 
            <INPUT type="reset" value="Cancella">
        </p>
    </div>
</FORM>

这是css文件：

.layout_generale {
    background-color: rgba(211, 211, 211, 0.8);
    border-radius: 50px 0px 50px 0px;
    border: 5px solid lightgrey;
    width: 500px;
    position: absolute;
    top: 15%;
    left: 50%;
    margin-left: -250px; 
}

body{
    background-image: url('ft-bk.jpg');
    background-repeat: no-repeat;
}

p{
    text-align: center;
    font-color: black;
    font-weight: bold;
    font-family: Arial, Helvetia, sans-serif; 
}

input[type=text], input[type=password], input[type=email]{
    width: 50%;
    padding: 5px 5px;
    margin: 5px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-sizing: border-box;
    font-family: Arial, Helvetia, sans-serif; 
}


input[type=text]:focus, 
    input[type=email]:focus,     
    input[type=password]:focus {
    background-color: lightblue;
}


input[type=submit], input[type=reset] {
    background-color: #203231;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
}

我从另一个CSS文件中的网站下载了代码...有什么帮助吗？显然，欢迎其他动画制作方法。

Answer 1

您需要在HTML头中链接动画样式表，如：

<link rel="stylesheet" href="animate.min.css">

然后将特定类添加到HTML元素中，如：

<div class="layout_generale animated infinite bounce">Example</div>

文档解释得非常好：https://github.com/daneden/animate.css

Answer 2

首先，您必须在yout index.html中包含Animate.css

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
</head>

所以你要把你的div添加到你的div。文档中提供了一些方法：https://github.com/daneden/animate.css

我的意见是使用javascript（jQuery）。（将'yourAnimationName'替换为animate.css动画）

$('.layout_generale').addClass('animated yourAnimationName');

使用animated.css

2 个答案: