文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >图片不对齐，不能正确缩放

问图片不对齐，不能正确缩放
EN

Stack Overflow用户
提问于 2020-10-14 21:46:54
回答 1查看 62关注 0票数 0

我正在为我的学校项目做一个网站。我偶然发现了一些问题...

我想做一个带有链接的标签，当你按下一个图像，你会得到发送到主题。我想我在同一时间尝试了很多，因为我想让我的网站在不同的屏幕分辨率上运行。

(注意:并不是所有的东西都正常工作，不要介意随机的注释，它们是荷兰语的。我还在网站上工作)

这是我的HTML和CSS：

​

代码语言：javascript
复制
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%;
    
/* ..... */
代码语言：javascript
复制
<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>

​

我希望有人能帮助我解决这些问题，而且网站上的反馈也会很好。

html
css
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-10-14 22:26:36

好的，因为这是一个学校的项目，有很多你应该看的东西，我首先看到的是你把你的身体放在你的大脑里。HTML的结构如下：

代码语言：javascript
复制
<html>
 <head></head>
 <body>
   ...
 </body>
</html>

然后你应该寻找的第二件事是，你应该以一种好的方式格式化你的代码，特别是在你的CSS中(老师会给它打更好的分数，当代码看起来更好，你可以很容易地阅读它)例如，在CSS中，你通常的方法是编写.class{background:black; color:white; display:block}，这不是一个好的编写方法，试着这样写：

代码语言：javascript
复制
.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”，它很容易使用，但没有网格那么强大。它将修复您的问题与2行，并将响应(与每一个屏幕上的东西)。我在底部提供了一个小示例，我对代码进行了大量修改(基本上我在顶部编写的代码都是如此)。

对于本规范：

看看类".imgwrapper“，当我正确理解它的时候，它有望解决你的问题，并且作为一个提示，vw和vw的值(f.e.100vw)是你在响应时应该使用的东西，它基本上是你当前屏幕视图的百分比：https://www.w3schools.com/cssref/css_units.asp

最亲切的问候拉卡

​

代码语言：javascript
复制
.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%;
    }
}
代码语言：javascript
复制
<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>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/64354732

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档