Question

我想在我的网站上做到这一点，当您单击图像时，动画开始显示重要信息。如果单击感叹号，则会打开一条重要消息。我希望它从感叹号移动到中心并变大。这可能没有100％的意义，但我希望如此。我将在附近回答问题。注意：所有大写字母中的所有词语都是为了保护隐私而删除的信息。另外，有些图像已下载且无法分发，因此，请单击显示重要信息的地方！非常感谢大家！我想用纯JS，CSS和HTML做到这一点。

function showImportantMessage() {
  var x = document.getElementById("importantMessage");
  var y = document.getElementById("importantButton");
  if (x.style.display === "none") {
    x.style.display = "block";
    y.style.display = "none";
  } else {
    x.style.display = "none";
    y.style.display = "block";
  }
}

body {
  background-color:white;
  
}
.center{
  text-align: center;
  
}
.w3-theme {
background-color: #477d72;
}
.w3-theme-text {
background-color: #549688;
}
div.a {
  text-indent: 50px;
}
div.b {
  font-size: 60px;
}
button {
  color: white;
  background-color: blue;
  border: none;
  width: 100px;
  height: 75px;
}
button:hover {
  border: 1px solid white;
  
  //font-weight: 800;
  background-color: blue;
  //color: crimson;
}
.margin {
  margin-top: 0px;
  margin-bottom: 5px;
  margin-right: 150px;
  margin-left: 45px;
}
.buttonSelector {
  background-color: blue;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-right: 0px;
  margin-left: 0px;
  height: 150px;
  padding-left: 20px;
  padding-top: 35px;
  
}

.home {
  border: 1px solid white;
}
.imgOfNAME {
  background-color: white;
  float: right;
  margin-right: 45px;
}
.importantMessage {
  width: 700px;
}
.importantPic {
  
}
.point {
  float: right;
}

.w3-theme {
  background-color: #cdcdcd;
}
.w3-themeTwo {color:#000 !important; background-color:#c2c2c2 !important}

<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>TITLE</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link rel="icon" type="image/png" href="faviconStepTWO.png"></link>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  </head>
  <body>
    <header>
      
      <div class="buttonSelector">
  <button class="w3-bar-item home" onClick="BacktoHome()">Home</button>
  
  
  
  <!---<button class="w3-bar-item" onClick="OpenParents()"> Parents </button>--->



      </header>
      </div>
      
      <div class="margin">
    <script src="script.js"></script>
   
  <h1 class='center'>TITLE</h1>
<br>
<br>
<br>
<br>
<img class="imgOfNAME point" id="importantButton" onclick="showImportantMessage()" width="70px" src="exclamtionMarkONE.png" title="View important message">
<br>
<br>
<br>
<br>

<center>
<div id="importantMessage" class="importantMessage">
  <div class="w3-border">
    <br>
    <img width="70px" class="importantPic" src="pointONE.png">
    
   
  <h3><b>Important message!</b></h3>
  <p>DATE</p>
  <p>Dear NAME,
<br>
<br>
INFO
<br>
<button class="w3-button  w3-themeTwo w3-round w3-hover w3-hover-theme w3-hover-theme" id="importantButton" onclick="showImportantMessage()" style="width: 115px; height: 50px;">OK, got it.</button>
<br>
<br>
</div>
</div>
<br>
</center>
  <script>


  var 
x = document.getElementById("importantMessage");
if (x.style.display === "none") {
    x.style.display = "block";
} else {
    x.style.display = "none";
}</script>


  </body>
  </div>
</html>

es。

Answer 1

您可以通过添加具有“转换” CSS规则的类来为元素设置动画。查看此示例https://jsfiddle.net/alvinmoyo/08Lt2ekw/15/，您可以在其中缩放元素。进一步了解CSS动画属性

.div{
     animation: all ease-in-out;
}

按下按钮后如何激活动画

1 个答案: