gpt4 book ai didi

javascript - 在页面加载时加载 CSS3

转载 作者:太空宇宙 更新时间:2023-11-04 03:57:49 25 4
gpt4 key购买 nike

我有以下 HTML 代码。我已经使用 CSS3 为 Logo 应用了一些动画,并且效果如我所愿。现在,当我们将鼠标悬停在 Logo 上时,动画开始工作。我希望动画在页面加载时自动运行。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>After Quote</title>
<style type="text/css">
.container {
background: none repeat scroll 0 0 #1180AE;
height: 340px;
margin: 0 auto;
padding-top: 50px;
width: 215px;
background: url(container.jpg) no-repeat;
}
.content {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 8px;
height: 200px;
margin: 0 auto;
padding-top: 115px;
width: 194px;
}
.logo:hover {
border-radius: 50%;
transform: rotate(720deg);
}
.logo {
height: 80px;
margin: 0 auto;
transition: all 1s ease 0s;
width: 80px;
}
.logo img {
border-radius: 15px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="logo"> <a href="#"> <img src="logo.jpg" alt="logo" /></a> </div>
<!--logo-->
</div>
<!--content-->
</div>
<!--container-->

</body>
</html>

最佳答案

有多种方法可以实现这一点:

第一个是在使用 JavaScript 加载页面后向 Logo 添加一个类。您需要这样做,因为 CSS transitions 仅对类列表更改、悬停等更改使用react,但不能自行启动。

第二种方法是使用 CSS 关键帧动画,我相信这更符合您的要求。您可以在这里了解它:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

关于javascript - 在页面加载时加载 CSS3,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22551988/

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