[HTML]Web前端开发技术22（HTMLCSSJavaScript ）HTML5 基础与CSS3 应用，animation ，@keyframes，Transition——喵喵画网页
HTML5 基础：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header>页面头部</header>
<nav>导航栏</nav>
<section>
<article>
<h1>文章标题</h1>
<p>这里是文章内容...</p>
</article>
</section>
<aside>侧边栏</aside>
<footer>页面底部</footer>
</body>
</html>CSS3 应用：
/* CSS 文件 */
body {
background-color: #f3f3f3;
}
header, footer {
background-color: #444;
color: white;
text-align: center;
padding: 5px 0;
}
nav, aside {
background-color: #f5f5f5;
color: #333;
padding: 10px;
}
section article {
background-color: white;
padding: 15px;
margin-bottom: 10px;
}
section article h1 {
color: #333;
margin-bottom: 5px;
}CSS3 动画（animations）应用：
/* 定义关键帧 */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* 应用动画 */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example; /* 使用动画名称 */
animation-duration: 4s; /* 动画时长 */
animation-iteration-count: infinite; /* 动画无限次数播放 */
}HTML 和 CSS 结合使用，CSS 中的动画效果会应用于一个 div 元素。这个 div 元素在页面加载时会从红色渐变到黄色，并且这个过程会无限循环。
评论已关闭