<html>
<head>
<title>vn</title>
<style>
.box { width: 300px height: 300px background-color: red margin: 10px 0 }
#animation-1:target {
animation: rotate 1000ms linear both
}
#animation-2:target {
animation: translate 1000ms linear both
}
#animation-3:target {
animation: scale 1000ms linear both
}
@keyframes rotate {
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg) }
}
@keyframes translate {
0% { transform: translate(-100%, 0) }
100% { transform: translate(0, 0) }
}
@keyframes scale {
0% { transform: scale(2) }
100% { transform: scale(1) }
}
</style>
</head>
<body>
<p>
<a href='#animation-1'>
点击后触发动画1
</a>
</p>
<p>
<a href='#animation-2'>
点击后触发动画2
</a>
</p>
<p>
<a href='#animation-3'>
点击后触发动画3
</a>
</p>
<div class="box" id="animation-1"></div>
<div class="box" id="animation-2"></div>
<div class="box" id="animation-3"></div>
</body>
</html>
不知道你是否知道target选择器的具体意义，简单的来说如下：
// div:target 的意思是锚点在目标上的时候// 看我最上面的例子，有三个链接，只有点击过以后才会触发动画。然后看看地址的变化
// 如果你想要同时全部显示，就把:target删除
HTML5+CSS3布局的页面，汉字显示不出来是因为HTML代码中对全站字体显示做了设置，如下图：
行20、21的js语句对整体网页代码字体进行了调用设置，此时设置中文字体不会被识别，只需删除即可识别汉字。
个人主页可以采用html代码也可以采用cms系统形式，一般以个人博客网站形式存在。你可以在个人博客模板找到自适应的模板程序后，进行源码下载。
每天的进行一些文章更新，相信对于建立个人品牌是非常有帮助的。
