gpt4 book ai didi

javascript - 线条消失的CSS动画

转载 作者:太空宇宙 更新时间:2023-11-04 10:34:27 24 4
gpt4 key购买 nike

我正在尝试为一个 Logo 制作一个动画,它似乎被一根绳子(将是一条垂直的黑线)从页面底部拉到顶部。

如果绳子在 Logo 上升时消失在 Logo 后面,我会喜欢它,但我不确定该怎么做。

我知道如何进行 CSS 翻译,所以移动 Logo 没问题,只是我不确定消失的绳子部分。

我更喜欢 css,但 javascript 没问题。

谢谢

编辑:到目前为止添加了一些 CSS 和 HTML:

body {
background-color: White;"
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
display: inline-block;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
margin: 0
}

li a:hover:not(.active) {
background-color: blue;
}

.active {
background-color: #4CAF50;
}
p.one {
color: black;
font-family: arial;
padding-top: 50px;
align="center";
}

</style>

</head>

<body>

<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#Products">Our Products</a></li>
<li><a href="#Contact">Contact</a></li>

</ul>
<h1>Home</h1>

<p class="one", align="center">Text</p>

最佳答案

  • 您可以在为 Logo 制作动画的同时为绳子制作动画(也可以使用 css 翻译)。在父元素上使用 overflow: hidden;
  • 您可以使用 HTML canvas rect(); 绘制绳索并为其高度设置动画。

关于javascript - 线条消失的CSS动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36249346/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com