css动画的网站模板

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>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！