CSS動畫是網頁設計的一個重要組成部分，它可以為網站帶來生動的效果，吸引用戶的注意力，提高用戶體驗。下面是一個使用CSS動畫的網站模板，讓我們一起來看看吧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS動畫網站模板</title>
<style>
h1 {
font-size: 36px;
text-align: center;
margin-top: 50px;
animation: headline 1.5s ease-in-out infinite;
}
@keyframes headline {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
.nav {
display: flex;
justify-content: space-around;
align-items: center;
background-color: #ccc;
padding: 10px;
}
.nav a {
color: #333;
text-decoration: none;
font-size: 20px;
}
.nav a:hover {
color: #fff;
background-color: #333;
padding: 10px;
}
.section {
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 50px;
}
.section img {
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
animation: circle 2s ease-in-out infinite;
}
@keyframes circle {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
.section p {
font-size: 24px;
}
.footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>歡迎來到CSS動畫網站模板</h1>
</div>
<div class="nav">
<a href="#">首頁</a>
<a href="#">關于我們</a>
<a href="#">產品介紹</a>
<a href="#">聯系我們</a>
</div>
<div class="section">
<img src="https://picsum.photos/200" alt="頭像">
<p>這里是我們的介紹文字，可以放一些公司簡介、團隊介紹等</p>
</div>
<div class="footer">
<p>版權所有，©2021 CSS動畫網站模板</p>
</div>
</body>
</html>上一篇css動畫的空白頁面
下一篇css動畫規則制定