<!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>
效果图: