<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>新建H5模板</title>
<style>
body{
background-color: #222222;
}
/*
在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。
通过 CSS3，web 设计师可以使用他们喜欢的任意字体。
当您您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。
您“自己的”的字体是在 CSS3 @font-face 规则中定义的。
*/
@font-face {
font-family: 'Monoton';
font-style: normal;
font-weight: 400;
src: local('Monoton'), local('Monoton-Regular'), url(http://themes.googleusercontent.com/static/fonts/monoton/v4/AKI-lyzyNHXByGHeOcds_w.woff) format('woff');
}
#container{
width:500px;
margin:auto;
}
p{
text-align:center;
font-size:4em;
margin:20px 0 20px 0;
}
a{
text-decoration:none;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
p a{
color:#FF1177;
font-family:Monoton;
}
p a:hover{
-webkit-animation: demo 1.5s ease-in-out infinite alternate;
-moz-animation: demo 1.5s ease-in-out infinite alternate;
animation: demo 1.5s ease-in-out infinite alternate;
color:#ffffff;
}
/*
通过 @keyframes 规则，您能够创建动画。
创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中，您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。
0% 是动画的开始时间，100% 动画的结束时间。
为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
//目前浏览器都不支持 @keyframes 规则。
@keyframes demo {}
//Firefox 支持替代的 @-moz-keyframes 规则。
@-moz-keyframes demo {}
//Opera 支持替代的 @-o-keyframes 规则。
@-webkit-keyframes demo {}
//Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。
@-o-keyframes demo {}
*/
@keyframes demo {
from {
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #FF1177,
0 0 70px #FF1177,
0 0 80px #FF1177,
0 0 100px #FF1177,
0 0 150px #FF1177;
}
to {
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 20px #FF1177,
0 0 35px #FF1177,
0 0 40px #FF1177,
0 0 50px #FF1177,
0 0 75px #FF1177;
}
}
@-moz-keyframes demo {
from {
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #FF1177,
0 0 70px #FF1177,
0 0 80px #FF1177,
0 0 100px #FF1177,
0 0 150px #FF1177;
}
to {
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 20px #FF1177,
0 0 35px #FF1177,
0 0 40px #FF1177,
0 0 50px #FF1177,
0 0 75px #FF1177;
}
}
@-webkit-keyframes demo {
from {
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #FF1177,
0 0 70px #FF1177,
0 0 80px #FF1177,
0 0 100px #FF1177,
0 0 150px #FF1177;
}
to {
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 20px #FF1177,
0 0 35px #FF1177,
0 0 40px #FF1177,
0 0 50px #FF1177,
0 0 75px #FF1177;
}
}
@-o-keyframes demo {
from {
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #FF1177,
0 0 70px #FF1177,
0 0 80px #FF1177,
0 0 100px #FF1177,
0 0 150px #FF1177;
}
to {
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 20px #FF1177,
0 0 35px #FF1177,
0 0 40px #FF1177,
0 0 50px #FF1177,
0 0 75px #FF1177;
}
}
</style>
</head>
<body>
<p><a href="###">oneStopWeb</a></p>
</body>
</html>
效果图：
相关推荐
通过巧妙运用`<canvas>`、CSS3文本属性、`@font-face`规则、`transform`和`animation`，开发者可以创造出令人印象深刻的艺术字体设计，提升网页的视觉吸引力和用户体验。在实践中，不断探索和实验这些特性，将有助于...
【标题】"h5+css+jq 实现love明信片"所涉及的知识点主要集中在Web前端开发领域，包括HTML5、CSS3和jQuery的使用。这三个技术是现代Web开发中的核心部分，用于构建交互式和动态的网页内容。 1. HTML5（HyperText ...
9. 强大的字体处理：`@font-face`允许引入自定义字体，`font-family`支持多种字体堆栈。 10. CSS3过渡和变换：`transition`平滑地改变一个或多个属性，`transform`进行2D和3D变换。 这个压缩包中的“H5基础标签demo...
8. 字体与图标：@font-face规则支持自定义字体，而图标字体则提供了一种轻量级、可自定义的图标解决方案。 本学习资料将涵盖这些关键知识点，并通过实例代码和练习帮助你深入理解并熟练运用HTML5和CSS3。无论你是...
6. 自定义字体和颜色（Custom Fonts and Colors）：`@font-face`规则允许引入自定义字体，而`rgba()`和`hsl()`颜色函数则提供了更丰富的色彩控制。 通过结合HTML5的动态功能和CSS3的视觉特效，这个“HTML5炫酷动画...
6. CSS3 动画：通过 `keyframes` 规则和 `animation` 属性，可以创建平滑的过渡和动画效果，增加用户交互的趣味性。 7. 响应式设计：利用 `media queries` 实现根据不同设备特性调整界面布局。 在“HTML5+CSS3炫酷...
通过使用`@font-face`规则，可以将特定的字体文件加载到网页中，从而使网页能够使用这些字体显示文本。 ##### 5.2 字体图标 类似于Web字体，字体图标也是通过加载特定的字体文件实现的。它们的优点是可以像普通文字...