我有以下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);}
}
这很好,并且图像在屏幕上移动。 但是,当我缩小浏览器的窗口时,图像仍会以全屏方式在浏览器的整个长度上移动,因此会被截断,您将看不到它。 我怎样才能解决这个问题? (例如,如何使动画缩放到浏览器大小?)
谢谢!
答案 0 :(得分:0)
尝试这样。我在这里添加了动画宽度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));}
}
答案 1 :(得分:0)
只需使用百分比%:
@keyframes slide{
from{transform: translateX(0);} /*start at 0 */
to {transform:translateX(80%);}