css 动画在 localhost (xampp) 中不起作用
[英]css animation is not working in localhost (xampp)
问题描述
i have created a simple website in HTML and added some animations using CSS but when i open my website in localhost animations are not working but when i directly open my website in google it seems to work fine.
我用 HTML 创建了一个简单的网站，并使用 CSS 添加了一些动画，但是当我在 localhost 中打开我的网站时，动画不起作用，但是当我直接在 google 中打开我的网站时，它似乎工作正常。
Here's an (GIF) image when i open my website in localhost:-这是我在本地主机中打开我的网站时的（GIF）图像：-
Here's an (GIF) image when i open my website directly (by double click on it):-这是我直接打开我的网站时的（GIF）图像（双击它）：-
so my question is why animation is not working in localhost ?所以我的问题是为什么动画在 localhost 中不起作用？
here is my code :-这是我的代码：-
header { width:100%; height:350px; position:relative; overflow:hidden; z-index:-1; border:3px solid grey; background-position: center center; display: flex; background-image:url("https://cdn.pixabay.com/photo/2018/01/31/12/16/architecture-3121009_960_720.jpg"); background-size: cover; } .main-wrapper { position: relative; } #navul01 { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: transparent; position: absolute; right: 0; bottom: 0; } #navul01 li { float: left; } #navul01 li a { display: block; color: white; font-weight: bold; text-shadow: 2px 2px black; text-align: center; padding: 14px 16px; font-size: 25px; text-decoration: none; border:2px solid white; } #navul01 li a:hover { background-color: lightgreen; } #subjects_nav { list-style-type: none; margin: 0; padding: 0; position: absolute; left: 10%; width: 80%; } #subjects_nav li a { display: block; color: white; font-size: 5vw; font-weight: bold; text-shadow: 2px 2px black; text-align: center; padding: 50px 50px; text-decoration: none; border:3px solid white; transition: 1s; } #subjects_nav li a:hover { margin: 0 -5%; } #physics_image { background-position: center center; display: flex; background-image:url("https://cdn.pixabay.com/photo/2018/01/31/12/16/architecture-3121009_960_720.jpg"); background-size: cover; } #chemistry_image { background-position: center center; display: flex; background-image:url("https://cdn.pixabay.com/photo/2018/01/31/12/16/architecture-3121009_960_720.jpg"); background-size: cover; } #maths_image { background-position: center center; display: flex; background-image:url("https://cdn.pixabay.com/photo/2018/01/31/12/16/architecture-3121009_960_720.jpg"); background-size: cover; } #space { list-style: none; }
<!DOCTYPE html> <html> <head> <title>home</title> <link rel="stylesheet" type="text/css" href="css/index.css" /> <link rel="stylesheet" type="text/css" href="animations/index.css" /> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="main-wrapper"> <header> </header> <div><nav> <ul id="navul01"> <li><a href="index.html">Home</a></li> <li><a href="#news">blog</a></li> <li><a href="#about">contacts</a></li> </ul> </nav></div> </div> <div> <ul id="space"> <li><a></a></li> </ul> </div> <div> <ul id="subjects_nav"> <li><a id="physics_image" href="#home">PHYSICS</a></li> <li><a id="chemistry_image" href="pages\\chemistry">CHEMISTRY</a></li> <li><a id="maths_image" href="#contact">MATHS</a></li> </ul> </div> </body> </html>
UPDATE 1:-更新 1:-
even in code snippet it was working fine即使在代码片段中它也能正常工作
1 个解决方案
解决方案1
2 已采纳 2018-02-17 17:10:40
Have you disabled cache in browser?您是否禁用了浏览器中的缓存？ Make sure that you disabled it.确保你禁用了它。
You can disable by checkmark on Chrome devtools and refresh page again.您可以通过 Chrome devtools 上的复选标记禁用并再次刷新页面。
Disabled Cache Chrome:禁用缓存 Chrome：
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.