调整浏览器大小会影响动画-CSS

2024-05-19 • 问答

我有以下HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Document</title>
</head>


<link rel= "stylesheet" href = "style.css"></a>
<body>

    <div class = "wrapper">
        '<img src="compsci_coffee_blend_1.png" height = 150px width = 150px class = "coffee">

    </div>


</body>
</html>

其中style.css是：

    position: relative;
}

.coffee{
    animation-name: slide; /*tells image which set of keyframes to take one */
    animation-duration: 2s; /*how long animation should take */
}


/* define keyframe animation */
@keyframes slide{
    from{transform: translateX(0);} /*start at 0 */
    to {transform:translateX(900px);} 
}

这很好，并且图像在屏幕上移动。但是，当我缩小浏览器的窗口时，图像仍会以全屏方式在浏览器的整个长度上移动，因此会被截断，您将看不到它。我怎样才能解决这个问题？（例如，如何使动画缩放到浏览器大小？）

谢谢！

尝试这样。我在这里添加了动画宽度100窗口宽度

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>


<link rel= "stylesheet" href = "style.css"></a>
<body>

    <div class = "wrapper">
        '<img src="compsci_coffee_blend_1.png" height = 150px width = 150px class = "coffee">

    </div>


</body>
</html>

css

  .wrapper{  
    position: relative;
}

.coffee{
    animation-name: slide; /*tells image which set of keyframes to take one */
    animation-duration: 2s; /*how long animation should take */
}


/* define keyframe animation */
@keyframes slide{
    from{transform: translateX(0);} /*start at 0 */
    to {transform: translateX(calc(100vw - 160px));} 
}

只需使用百分比％：

@keyframes slide{
from{transform: translateX(0);} /*start at 0 */
to {transform:translateX(80%);}

调整浏览器大小会影响动画-CSS

arielyangjing520 回答：调整浏览器大小会影响动画-CSS

大家都在问