图片无法对齐，无法正确缩放

时间：2020-10-14 13:46:53

标签： html css

我正在为我的学校项目建立一个站点。我遇到了一些问题...

我想制作一个带有链接的标签，当您按图像时，将发送至该主题。我想我想同时做很多事情，因为我希望我的网站可以在不同的屏幕分辨率下正常工作。

（注意：不是所有的东西都在工作，也不介意随机注释，它们是荷兰语。我仍在该网站上工作）

这是我的HTML和CSS：

BODY        { font-family: Andalus, Helvetica, sans-serif; background-color: black; color: black; font-size: 15px; margin: 0px; padding: 0px; width: 100%; height:100%;-webkit-animation: color-change-2x 2s linear infinite alternate both;
            animation: color-change-2x 3s linear infinite alternate both;}

div#box1    {border-color:#666666; max-width: 100% ; max-height: 80px;
display: block; height: 10%;background-color:#666666 ;margin-top: -120px;-webkit-animation: slide-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            animation: slide-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
 
div#box2    { border-color:#585858 ;margin-left:auto; max-width: 100% ; height: 855px; display: block; color: black; background-color: #585858; margin-top:100px; -webkit-animation: color-change-2x 2s linear infinite alternate both;
            animation: color-change-2x 3s linear infinite alternate both;}

div#box4    { border-style:none; margin-left: 810px; margin-top: 450px; width: 279px; height: 330px; background-color: none;}

div#titel1   {margin-top: 100px; background-color:  #00000000}
div#txt2    {margin-top:100px; font-size: 20px; margin-left: 100px}

/* Voor #links pagina */
div#links1 {margin-top: 250px; margin-left: 50px;}
div#links2 {margin-top: 250px; margin-left: 300px;}


de img { margin-left: 50px; margin-top: 0px;}
da img { margin-left: 1000; margin-top: -500px;}


div#flash    {margin-top:400px; font-size: 45px; margin-left: 350px}
p       {background-color: none; color: black; padding: 1px; margin-top: 0px; width: 965px; margin-bottom: 0px; margin-left: 20px; margin-right: 5px; position: relative; line-height: 15px}

H1      {  font-size: 85px; background-color:  #00000000; margin-left: 550px; }
H2      {  margin-top: 25px; margin-left: 355px; color: #db0000}


.lijst      { list-style-type: none; padding: 0px; margin-top: 20px; margin-left: 5px; font-size: 15px; color: crimson;}

.sublijst   { list-style-type:disc; padding: 0px; margin-left: 20px; font-size: 13px; font-size: 15px} 

.pageselect     { font-weight: bold; color: #757575;}

.nextpage   { float: right;  margin-right: 5px;}

a:link      { color: black;}

a:visited   { color: black;}

b:link      { color: grey;}

b:visited   { color: grey;}

iframe {border: 5px; border-style: groove; border-color: black}

hr {color: black}

br {text-align: justify; color: black; font-family: inherit; font-size: 10px; margin-left: 5px}


a:hover img { display:block; }
b:hover img { display:block; }

div#box1{width:100%;}
div#box2{width:100%;}
div#box3{width:100%;}

body{ overflow: hidden;}

/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
    margin-top: 20px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #4f4f4f;
  color: black;
    -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
            animation: heartbeat 1.5s ease-in-out infinite both;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4a0900;
  color: white;
}


/* ----------------------------------------------
 * Generated by Animista on 2020-4-18 14:7:8
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-bottom
 * ----------------------------------------
 */
@-webkit-keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
}
@keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
}


@-webkit-keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}

@-webkit-keyframes color-change-2x {
  0% {
    background: #717171;
  }
  100% {
    background: #979797;
  }
}
@keyframes color-change-2x {
  0% {
    background: #717171;
  }
  100% {
    background: #979797;
  }
}

@-webkit-keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@-webkit-keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}

@-webkit-keyframes scale-in-ver-center {
  0% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    opacity: 1;
  }
}
@keyframes scale-in-ver-center {
  0% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    opacity: 1;
  }
}

.blinking{
    animation:blinkingText 2s infinite;
}
@keyframes blinkingText{
    0%{     color: #D70606;    }
    49%{    color: #D70606; }
    60%{    color: transparent; }
    99%{    color:transparent;  }
    100%{   color: #D70606;    }
}


/* Als er iet mis is gebeurt het vast hier */

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .txt1 {width: 50%;}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .txt1 {width: 25%;}
    
/* For mobile phones: */
[class*="txt-"] {
  width: 100%;
    
/* ..... */
<HTML>
 
<HEAD>
 
<TITLE>Links</TITLE>
<LINK HREF="stylesheet.css" REL="stylesheet" TYPE="text/css">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  

<BODY>

<div id="box1">
 
<div class="topnav">
  <a href="homepages.html">Home</a>
  <a class="active" href="links.html">Links</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>
    </div>
<style>
img {
  width:;
  height: auto;
  max-height: 1000px;
  max-width: 1000px;
  min-height: 500px;
  min-width: 500px;
}
</style>
    
<div style="margin-top: 10%; margin-left: 10%">
    
<!- Deepweb photo: https://f.cyberdrop.cc/deep-web-icon-on-white-background-vector-22619325%20(3)-4z9zvu8O.png
    Darkweb photo: https://f.cyberdrop.cc/deep-web-icon-on-white-background-vector-22619325%20(2)-7bmJyo5v.png -!>  
    
    

    <a href="deepweb.html"><img src="https://f.cyberdrop.cc/deep-web-icon-on-white-background-vector-22619325%20(3)-4z9zvu8O.png" title="Deepweb"; width="500"; height="500"></a></div>
<br>
<br>
    <div style="margin-top: -32%; margin-left: 60%">
<a href="darkweb.html"><img src="https://f.cyberdrop.cc/deep-web-icon-on-white-background-vector-22619325%20(2)-7bmJyo5v.png" title="Darkweb"; width="500"; height="500"></a>
    
</div>

    
    
    
    


    
</BODY>
 </HEAD>
</HTML>

我希望有人可以帮助我解决这些问题，并且在站点上提供反馈也很好。

1 个答案:

答案 0 :(得分：1)

好吧，因为这是一个学校项目，所以您应该注意很多事情，首先进入我的眼睛是将您的身体放在头上。 HTML的结构如下：

<html>
 <head></head>
 <body>
   ...
 </body>
</html>

接着，您应该寻找的第二件事是，以一种很好的方式来格式化代码，尤其是在CSS中（例如，在CSS看起来更好并且可以轻松阅读的情况下，老师可以对代码进行更好的分级），例如CSS的常见方法是编写.class{background:black; color:white; display:block}，但这不是写的好方法，尝试像这样写：

.class{
  background: black;
  color: white;
  display: block;
}

更具可读性，您的老师会喜欢的。

您可能会这样做，这将创建一个行数很高的文件，在您的CSS文件中已经是这种情况。您在主css文件中有大量动画，您可以简单地创建一个新的css文件（将其命名为animations.css），将动画存储在其中，并将其链接到html页面。这样可以使所有内容保持清洁并且可读性更高。

要寻找的第三件事是，严格分隔HTML和CSS。由于HTML5不再是标准的，因此在项目用于实际IT类或其他方面时，将不再使用HTML标记“样式”。正如您可能意识到的那样，当您将html（<div style="margin:10px; padding:5px">）中的样式标签和普通的css文件混合在一起时，您的项目就会变得不清楚。

好吧，作为您的项目的最后一个提示（您要求提供反馈），有一个名为“ grid”的简洁内容，对于响应站点来说绝对是惊人的（您所说的“它应在不同的屏幕上运行”）当网格变得复杂时，您仍然可以使用易于使用的“ flex”，但它不如网格强大。它会用两行代码解决您的问题，并且会做出响应（每个屏幕上显示的内容）。我在底部提供了一个Example示例，对代码进行了很多更改（基本上做了我在顶部编写的所有操作）。

对于代码：

看一看“ .imgwrapper”类，它会在我理解正确的情况下解决您的问题，并提示您在响应式工作时应使用vw和vw（fe 100vw）的值基本上是您当前屏幕浏览量的百分比：https://www.w3schools.com/cssref/css_units.asp

对拉卡的亲切问候

.imgwrapper {
    margin-top: 40vh;
    width: 100vw;
    height: 80vh;
    display: flex;
    justify-content: space-around;
}

.imgwrapper img {
    width: 30vw;
}

BODY {
    font-family: Andalus, Helvetica, sans-serif;
    background-color: black;
    color: black;
    font-size: 15px;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    -webkit-animation: color-change-2x 2s linear infinite alternate both;
    animation: color-change-2x 3s linear infinite alternate both;
}

div#box1 {
    border-color: #666666;
    max-width: 100%;
    max-height: 80px;
    display: block;
    height: 10%;
    background-color: #666666;
    margin-top: -120px;
    -webkit-animation: slide-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

div#box2 {
    border-color: #585858;
    margin-left: auto;
    max-width: 100%;
    height: 855px;
    display: block;
    color: black;
    background-color: #585858;
    margin-top: 100px;
    -webkit-animation: color-change-2x 2s linear infinite alternate both;
    animation: color-change-2x 3s linear infinite alternate both;
}

div#box4 {
    border-style: none;
    margin-left: 810px;
    margin-top: 450px;
    width: 279px;
    height: 330px;
    background-color: none;
}

div#titel1 {
    margin-top: 100px;
    background-color: #00000000
}

div#txt2 {
    margin-top: 100px;
    font-size: 20px;
    margin-left: 100px
}

/* Voor #links pagina */
div#links1 {
    margin-top: 250px;
    margin-left: 50px;
}

div#links2 {
    margin-top: 250px;
    margin-left: 300px;
}






div#flash {
    margin-top: 400px;
    font-size: 45px;
    margin-left: 350px
}

p {
    background-color: none;
    color: black;
    padding: 1px;
    margin-top: 0px;
    width: 965px;
    margin-bottom: 0px;
    margin-left: 20px;
    margin-right: 5px;
    position: relative;
    line-height: 15px
}

H1 {
    font-size: 85px;
    background-color: #00000000;
    margin-left: 550px;
}

H2 {
    margin-top: 25px;
    margin-left: 355px;
    color: #db0000
}


.lijst {
    list-style-type: none;
    padding: 0px;
    margin-top: 20px;
    margin-left: 5px;
    font-size: 15px;
    color: crimson;
}

.sublijst {
    list-style-type: disc;
    padding: 0px;
    margin-left: 20px;
    font-size: 13px;
    font-size: 15px
}

.pageselect {
    font-weight: bold;
    color: #757575;
}

.nextpage {
    float: right;
    margin-right: 5px;
}

a:link {
    color: black;
}

a:visited {
    color: black;
}

b:link {
    color: grey;
}

b:visited {
    color: grey;
}

iframe {
    border: 5px;
    border-style: groove;
    border-color: black
}

hr {
    color: black
}

br {
    text-align: justify;
    color: black;
    font-family: inherit;
    font-size: 10px;
    margin-left: 5px
}


/* a:hover img { display:block; }
b:hover img { display:block; } */

div#box1 {
    width: 100%;
}

div#box2 {
    width: 100%;
}

div#box3 {
    width: 100%;
}

body {
    overflow-x: hidden;
}

/* Add a black background color to the top navigation */
.topnav {
    background-color: #333;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    margin-top: 20px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #4f4f4f;
    color: black;
    -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
    animation: heartbeat 1.5s ease-in-out infinite both;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #4a0900;
    color: white;
}

/* ----------------------------------------------
* Generated by Animista on 2020-4-18 14:7:8
* Licensed under FreeBSD License.
* See http://animista.net/license for more info. 
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation slide-bottom
* ----------------------------------------
*/
@-webkit-keyframes slide-bottom {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
    }
}

@keyframes slide-bottom {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
    }
}


@-webkit-keyframes bounce-in-top {
    0% {
        -webkit-transform: translateY(-500px);
        transform: translateY(-500px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    38% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
    }

    55% {
        -webkit-transform: translateY(-65px);
        transform: translateY(-65px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    72% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    81% {
        -webkit-transform: translateY(-28px);
        transform: translateY(-28px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    90% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    95% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}

@keyframes bounce-in-top {
    0% {
        -webkit-transform: translateY(-500px);
        transform: translateY(-500px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    38% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
    }

    55% {
        -webkit-transform: translateY(-65px);
        transform: translateY(-65px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    72% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    81% {
        -webkit-transform: translateY(-28px);
        transform: translateY(-28px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    90% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    95% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}

@-webkit-keyframes color-change-2x {
    0% {
        background: #717171;
    }

    100% {
        background: #979797;
    }
}

@keyframes color-change-2x {
    0% {
        background: #717171;
    }

    100% {
        background: #979797;
    }
}

@-webkit-keyframes jello-horizontal {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }

    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes jello-horizontal {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }

    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@-webkit-keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    10% {
        -webkit-transform: scale(0.91);
        transform: scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    17% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    33% {
        -webkit-transform: scale(0.87);
        transform: scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}

@keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    10% {
        -webkit-transform: scale(0.91);
        transform: scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    17% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    33% {
        -webkit-transform: scale(0.87);
        transform: scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}

@-webkit-keyframes scale-in-ver-center {
    0% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes scale-in-ver-center {
    0% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        opacity: 1;
    }
}

.blinking {
    animation: blinkingText 2s infinite;
}

@keyframes blinkingText {
    0% {
        color: #D70606;
    }

    49% {
        color: #D70606;
    }

    60% {
        color: transparent;
    }

    99% {
        color: transparent;
    }

    100% {
        color: #D70606;
    }
}


/* Als er iet mis is gebeurt het vast hier */

@media only screen and (min-width: 768px) {

    /* For desktop: */
    .txt1 {
        width: 50%;
    }
}
<HTML>
    <HEAD>
       <TITLE>Links</TITLE>
       <LINK HREF="style.css" REL="stylesheet" TYPE="text/css">
       <meta name="viewport" content="width=device-width, initial-scale=1">
    </HEAD>
    <BODY>
       <div id="box1">
          <div class="topnav">
             <a href="homepages.html">Home</a>
             <a class="active" href="links.html">Links</a>
             <a href="#contact">Contact</a>
             <a href="#about">About</a>
          </div>
       </div>
       <div class="imgwrapper">
       <div>
          <a href="deepweb.html">
          <img src="https://f.cyberdrop.cc/deep-web-icon-on-white-background-vector-22619325%20(3)-4z9zvu8O.png" ></a>
       </div>
       <div>
          <a href="darkweb.html"><img
             src="https://f.cyberdrop.cc/deep-web-icon-on-white-background-vector-22619325%20(2)-7bmJyo5v.png"></a>
       </div>
    </BODY>
 </HTML>

相关问题
最新问题