代码之家 › 专栏 › 技术社区 › tommy

月亮升起和月亮集动画css

css-animations css html

tommy · 技术社区 · 2 年前

我想制作一个简单的月亮动画,月亮从左上角升起(像太阳升起),月亮从右上角落下(像太阳落下)

我解决了第一步,但第二步(moon设置为右上角)非常混乱,当我在浏览器中运行代码时,moon转到了右上角,但当我向右滚动时,我仍然可以看到moon

解决方案是什么?

mountain image

moon image

output image

注意:简单的解释会更好

*{
    box-sizing: border-box;

}

@keyframes move{

    from{left:-250px; }
    to{left: 100%;}
}

body {

    
    background-image: url("https://i.stack.imgur.com/ZO2wI.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

img{

    width: 150px;
    height: 200px;
    position: relative;
    border-radius: 50%;
    animation-name: move;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: both;
    transform: translateX(250)
    
}

<!DOCTYPE html>
<html lang="en">
<head>
   
    <meta charset="UTF-8">
    <meta name="viewport>" content="width=device-width, intital-scale=1.0">
    
    <title> Animated Moon </title>

    <link rel="stylesheet" href="style.css">



</head>


<body>

    

 <header>

    <img src="https://i.stack.imgur.com/M1OFe.png">

 </header>



</body>



</html>

2 回复 | 直到 2 年前

MikoFrosty 2 年前

这个 最简单的 您可以这样做,即添加

“overflow-x:hidden”到样式表中的主体选择器。

body {
  overflow-x: hidden;

}

隐藏溢出基本上意味着如果某个东西在边缘超出边界对于元素,它是隐藏的,而不是显示滚动条。

我还建议在你的动画中,将左移:100%改为略高的值,比如110%,以确保动画结束时完全脱离页面。

DANNGZSHOT 2 年前

在左边放一个百分比,这作为衡量屏幕大小的指标,应该足够了。

*{
    box-sizing: border-box;

}

@keyframes move{

    from{left:-250px; }
    to{left: 80%;}   
    0%,100% {opacity: 0.2;}
    30%, 80% {opacity: 1;}
}

body {

    
    background-image: url("https://i.stack.imgur.com/ZO2wI.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

img{

    width: 150px;
    height: 200px;
    position: relative;
    border-radius: 50%;
    animation-name: move;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: both;
    transform: translateX(250)
    
}

<!DOCTYPE html>
<html lang="en">
<head>
   
    <meta charset="UTF-8">
    <meta name="viewport>" content="width=device-width, intital-scale=1.0">
    
    <title> Animated Moon </title>

    <link rel="stylesheet" href="style.css">



</head>


<body>

    

 <header>

    <img src="https://i.stack.imgur.com/M1OFe.png">

 </header>



</body>



</html>