XiYun/index1.html
2024-08-29 08:49:58 +08:00

165 lines
5.0 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>汐云记事本下载</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: '微软雅黑', sans-serif;
background-color: #f4f4f4;
color: #333;
}
.container {
width: 80%;
margin: 50px auto;
background-color: #fff;
padding: 40px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
animation: fadeInUp 1s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.header {
text-align: center;
padding-bottom: 30px;
}
.header h1 {
font-size: 36px;
animation: slideInLeft 1s ease-out;
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-100px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.header p {
font-size: 20px;
color: #666;
animation: slideInRight 1s ease-out;
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(100px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.download-btn {
display: inline-block;
margin: 20px 0;
padding: 15px 30px;
background-color: #007bff;
color: #fff;
text-decoration: none;
border-radius: 4px;
font-size: 18px;
transition: background-color 0.3s, transform 0.3s;
animation: bounceIn 1s ease-out;
}
.download-btn:hover {
background-color: #0056b3;
transform: scale(1.05);
}
@keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
.features {
padding: 20px 0;
}
.feature-item {
padding: 15px;
border-bottom: 1px solid #ddd;
animation: fadeIn 1s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.feature-item h3 {
font-size: 22px;
margin-bottom: 10px;
}
.feature-item p {
font-size: 16px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>汐云记事本,一个简单的记事本</h1>
<p>汐云记事本是一款简洁高效的记事本软件,帮助您轻松记录和管理日常笔记。</p>
</div>
<a href="exe/汐云记事本.exe" class="download-btn" download>立即下载</a>
<div class="features">
<div class="feature-item">
<h3>简洁设计</h3>
<p>汐云记事本采用简洁的设计风格,界面清新,操作简便,让您专注于记录内容。</p>
</div>
<div class="feature-item">
<h3>高效管理</h3>
<p>支持分类管理、标签标记、快捷搜索等功能,帮助您高效管理和查找笔记。</p>
</div>
<div class="feature-item">
<h3>多平台支持</h3>
<p>汐云记事本支持Windows、Mac、Linux等多个平台满足不同用户的需求。bushi</p>
</div>
<div class="feature-item">
<h3>数据安全</h3>
<p>所有数据本地存储,确保您的笔记安全可靠,不会被上传到云端。</p>
</div>
</div>
</div>
</body>
</html>