gpt4 book ai didi

html - 如何防止过渡动画运行页面加载

转载 作者:行者123 更新时间:2023-11-28 06:14:31 25 4
gpt4 key购买 nike

我有这个 HTML 代码:

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="css/music_index.css">
<head>
<title></title>
</head>
<body>
<div class="main_container">
<div class="main_header">
<center><input type="search" class="main_page_search"></center>
</div>
</div>
</body>
</html>

还有这个 CSS:

body {
background-color: #F3F3F3;
font: 12px/1.4 "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Garuda,Verdana,Tahoma,sans-serif;
margin: 0;
}

.main_container {
background-color: white;
width: 1050px;
margin: 0 auto;
height: 900px;
}

.main_header {
height: 400px;
border-top: 8px gray solid;
background: url(../img/header_bg.jpg) no-repeat;
background-size: 1050px;
}

.main_page_search {
font-family: "Interstate","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Garuda,Verdana,Tahoma,sans-serif;
margin-top: 200px;
width: 60%;
color: #666;
outline: 0;
border: 0;
padding: 5px 7px;
background: #e5e5e5;
height: 40px;
border-radius: 4px;
-webkit-transition: background 0.4s ease 0s;
-moz-transition: background 0.4s ease 0s;
-o-transition: background 0.4s ease 0s;
transition: background 0.4s ease 0s;
}

.main_page_search:focus {
background-color: white;
}

我的问题是,当我刷新页面时,搜索输入的背景变为白色,然后又变回灰色,这意味着在我没有点击输入时发生了转换,我该如何防止这种情况发生?

最佳答案

只是在 body 元素中添加了一个“preload”类。

<body class="preload">

然后确保不会发生转换:

.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}

然后在页面加载时删除该类:

JQuery

$(window).load(function() {
$("body").removeClass("preload");
});

Quick video的问题

关于html - 如何防止过渡动画运行页面加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35973003/

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