Question

我有一个开场动画，我只想在用户第一次访问网站时运行。我不希望用户每次用户重新加载页面时都能看到动画，所以如果没有为用户设置cookie，我希望只运行动画。

示例psuedocode：

if (cookie(userAlreadyVisited) is set {
doAnimation
}
else
{
doNotAnimate
}

动画将是这样的：

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Div animation</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div id="main"><h1 id="headline-fade">Welcome!</div>
</body>
</html>

CSS：

body {
    background-color: black;
    display: flex;
    justify-content: space-around;
}

#main {
    animation-name: example;
    animation-duration: 1.5s;
    position: relative;
    top: 50px;
    width: 750px;
    height: 500px;
    background-color: white;
    border-radius: 2px;
    display: flex;
    justify-content: space-around;
}

#headline-fade {
    animation-name: fontFade;
    animation-duration: 3s;
    margin: auto;
    font-family: Roboto;
}

@keyframes example {
    0% {
        background-color: white;
        width: 2px;
        height: 2px;
    }
    50% {
        background-color: white;
        width: 2px;
        height: 500px;}
    100% {
        background-color: white;
        width: 750px;
        height: 500px;
    }
}

@keyframes fontFade {
    0% {
        opacity: 0;
        margin: auto;
    }
    50% {
        opacity: 0;
        margin: auto;
    }
    100% {
        opacity: 1;
        margin: auto;
    }
}

总而言之，我只希望在用户第一次访问或Cookie过期时运行关键帧。 我尝试过jQuery.Keyframes ，但我无法让它发挥作用。

Answer 1

如果它在CSS中有特定的类，则只设置public static double f2 (double x, double y, double z) { double result = (0.49*Math.exp(-y - x)*Math.pow(x,2)* (1 - Math.pow(z,94)*(0.00666 + 0.98*Math.exp(-y - x) + 0.98*Math.exp(-y - x)* y*x + 0.245*Math.exp(-y - x)*Math.pow(y,2)* Math.pow(x,2) + 0.02722* Math.exp(-y - x)*Math.pow(y,3)*Math.pow(x,3) + 0.00170*Math.exp(-y - x)* Math.pow(y,4)*Math.pow(x,4) + 0.00006* Math.exp(-y - x)*Math.pow(y,5)*Math.pow(x,5) + 1.89043*Math.pow(10,-6)*Math.exp(-y - x)* Math.pow(y,6)*Math.pow(x,6) + 3.85802*Math.pow(10,-8)* Math.exp(-y - x)*Math.pow(y,7)*Math.pow(x,7) + 6.02816*Math.pow(10,-10)*Math.exp(-y - x)* Math.pow(y,8)*Math.pow(x,8) + 7.44217*Math.pow(10,-12)* Math.exp(-y - x)*Math.pow(y,9)*Math.pow(x,9) + 7.44217*Math.pow(10,-14)*Math.exp(-y - x)* Math.pow(y,10)*Math.pow(x,10))))/(0.01333 + 0.98*Math.exp(-y - x)*y + 0.49*Math.exp(-y - x)*Math.pow(y,2) + 0.16333*Math.exp(-y - x)*Math.pow(y,3) + 0.04083*Math.exp(-y - x)*Math.pow(y,4) + 0.00816*Math.exp(-y - x)*Math.pow(y,5) + .....，而在PHP（或javascript）中，只有在用户已访问过时才将该元素赋予该类。

Answer 2

让PHP确定cookie是否存在并在条件语句中使用它来将类添加到可能动画或不动画的元素中。

然后，您可以使用该类扩展CSS，并仅将动画样式应用于具有此类的元素。

举个例子：

在您的CSS中：

#main {
    position: relative;
    top: 50px;
    width: 750px;
    height: 500px;
    background-color: white;
    border-radius: 2px;
    display: flex;
    justify-content: space-around;
}
#main.animated {
    animation-name: example;
    animation-duration: 1.5s;
}

@keyframes example {
    0% {
        background-color: white;
        width: 2px;
        height: 2px;
    }
    50% {
        background-color: white;
        width: 2px;
        height: 500px;}
    100% {
        background-color: white;
        width: 750px;
        height: 500px;
    }
}

在您的HTML中：

<div id="main" <?php if (!isset($_COOKIE['userAlreadyVisited'])) { echo class='animated' }; ?>>
<h1 id="headline-fade">Welcome!</h1>

PS：您的原始代码示例中缺少结束</h1>标记。

Answer 3

只是保持一切相同期望整合PHP代码与这样的HTML我想这将完美地工作试试这个......

    <?php if (!isset($_COOKIE['userAlreadyVisited'])) { 
?>
<div id="main"><h1 id="headline-fade">Welcome!</div>
<?php
} ?>

这里的isset将检查cookie是否存储，然后只是一个简单的if条件，如果它变为true，它将执行你的情况下的语句是欢迎消息，如果它没有成功，它将会跳过欢迎信息

如果满足PHP条件，如何运行CSS关键帧？

3 个答案: