<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>æµ·æ¥ | Weather.io</title>
<link rel="icon" href="icon.png">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,500;0,600;0,700;0,800;0,900;1,800&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/style.css" />
<script src="js/script.js" defer></script>
</head>
<body onload="myFunction()">
<div id="loading"></div>
<div class="cont">
<div class="one">
<h1>ð¦ï¸ Weather.io âï¸</h1>
</div>
</div>
<div class="two">
<div class="card">
<div class="search">
<input type="text" class="search-bar" placeholder="Search" />
<button>
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" height="1em"
width="1.5em" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M10.442 10.442a1 1 0 011.415 0l3.85 3.85a1 1 0 01-1.414 1.415l-3.85-3.85a1 1 0 010-1.415z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd"
d="M6.5 12a5.5 5.5 0 100-11 5.5 5.5 0 000 11zM13 6.5a6.5 6.5 0 11-13 0 6.5 6.5 0 0113 0z"
clip-rule="evenodd"></path>
</svg>
</button>
</div>
<div class="weather loading">
<div class="other">注æï¼è¯·è¾å
¥åå¸åæ¼é³ï¼é¦åæ¯å¤§å</div>
<h2 class="city">Weather in Shanghai</h2>
<h1 class="temp">21°C</h1>
<div class="flex">
<img src="https://openweathermap.org/img/wn/04d.png" alt="" class="icon" />
<div class="description">å¤äº</div>
</div>
<div class="other">
<div class="humidity">湿度: 60%</div>
<div class="wind">é£é: 6.2 km/h</div>
</div>
</div>
</div>
</div>
<div class="three">
<div class="name"><a href="https://haiyong.blog.csdn.net/">~ Haiyong</a></div>
</div>
<script>
var preloader = document.getElementById('loading');
function myFunction() {
preloader.style.display = 'none';
}
</script>
<script type="text/javascript" src="js/vanilla-tilt.js"></script>
<script type="text/javascript">
VanillaTilt.init(document.querySelector(".card"), {
max: 15,
glare: true,
reverse: true,
"max-glare": 0.5,
speed: 400
});
VanillaTilt.init(document.querySelectorAll(".card"));
</script>
</body>
Weather.io-master.zip （6个子文件） 
Weather.io-master css 
style.css 4KB
index.html 3KB js vanilla-tilt.js 15KB script.js 2KB
icon.png 24KB
loading.svg 6KB
海拥✘
- 粉丝: 13w+
- 资源: 139
- 1
- 2
- 3
- 4
前往页