Question

我有这个简单的网页，其中我有2个图像在底部，每5秒淡入淡出。我已将持续时间设置为30秒（意味着它将停止）。我想要做的是添加一个按钮，当我点击它时它将重新生成动画。关于如何做的任何想法？顺便说一句，这是我的代码：

<!DOCTYPE html>
<html lang="en" class="no-js">
<style>
    BODY.enterPage{
    cursor:hand;
}
#cf {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

  @keyframes cf3FadeInOut {
  0% {
  opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

#cf img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: 30s;
animation-duration: 10s;
animation-direction: alternate;
}
}
</style>
<script>
    function goto() {
        location.href = "http://www.google.com"
    }
</script>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-

scale=1">
    <link rel="stylesheet" href="fade.css">
    <title>Wideout</title>
    <link rel="shortcut icon" href="../favicon.ico">
    <link rel="stylesheet" 

type="text/css" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/demo.css" />
    <link rel="stylesheet" type="text/css" 

href="css/style17.css" />
    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
</head>

<body class="enterPage"  onclick="goto();">
    <div class="container">

        <div class="content">
            <svg viewBox="0 0 600 300">

                <!-- 

Symbol with text -->
                <symbol id="s-text">
                    <text text-anchor="middle" x="50%" y="50%" dy=".35em" class="text--line">

t

    Text                   </text>
                </symbol>

                <!-- Clippath  with text -->
                <clippath id="cp-text">

<text text-anchor="middle" x="50%" y="50%" dy=".35em" class="text--line">
                        PIXAR                    </text>
                </clippath>



    <!-- Group for shadow -->
                <g clip-path="url(#cp-text)" class="shadow">
                    <rect width="100%" height="100%" class="anim-shape anim-

shape--shadow"></rect>
                </g>

                <!-- Group with clippath for text-->
                <g clip-path="url(#cp-text)" class="colortext">


         <!-- Animated shapes inside text -->
                    <rect width="100%" height="100%" class="anim-shape"></rect>
                    <rect width="80%" 

height="100%" class="anim-shape"></rect>
                    <rect width="60%" height="100%" class="anim-shape"></rect>

<rect width="40%" height="100%" class="anim-shape"></rect>

 <rect width="20%" height="100%" class="anim-shape"></rect>
                </g>


<!-- Transparent copy of text to keep patterned text selectable -->

<use xlink:href="#s-text" class="text--transparent"></use>


 </svg>

</div>


</div>

<div style = "text-align:center">
<iframe width="560" height="315"
src="https://www.youtube.com/embed/seMwpP0yeu4" 
frameborder="0" allowfullscreen></iframe>
</div>


<div id="cf">
  <img class="bottom" src="images/1.jpg" height="100" />
  <img class="top" src="images/2.jpg" height="100" />
</div>

    <!-- /container -->

<center>
<footer>
  <p>Created By: Paolo Duhaylungsod</p>
  <p>Deliverable Submitted to: Wideout Incorporated 
</footer>
</center>
</body>

创建按钮以在css中持续一段时间后重新制作动画

0 个答案: