<!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>
效果图：
相关推荐
总结，CSS3制作小图标涉及到的知识点包括：`@font-face`规则、自定义字体、伪元素、`content`属性、图形绘制技巧（如边框半径、阴影、`clip-path`和`mask`）、动画（`keyframes`和`animation`）以及响应式设计。...
使用此库中的keyframes帮助器，您可以控制动画期间在每个关键帧中使用哪种缓动功能。 import keyframes from 'react-native-easing-keyframes'const easeInOut = Easing . bezier ( 0.42 , 0.0 , 0.58 , 1.0 )const...
这包括`@keyframes`规则，用于定义动画的起始和结束状态，以及`animation`属性，用于设置动画的时长、延迟、次数等参数。在这个项目中，开发者创建了一系列CSS3关键帧动画，应用于Font Awesome图标上，使它们在网页...
通过巧妙运用`<canvas>`、CSS3文本属性、`@font-face`规则、`transform`和`animation`，开发者可以创造出令人印象深刻的艺术字体设计，提升网页的视觉吸引力和用户体验。在实践中，不断探索和实验这些特性，将有助于...
Keyframes Keyframes is a combination of (1) an ExtendScript script that extracts image animation data from an After Effects file and (2) a corresponding rendering library for Android and iOS. ...
:rocket: 局部作用域， @font-face @keyframes和@font-face规则。 :artist_palette: 高级主题系统，支持同时主题。 没有全局变量！ :hammer_and_wrench: 用于生成基于变量的calc表达式的实用程序。 :flexed_...
【标题】"h5+css+jq 实现love明信片"所涉及的知识点主要集中在Web前端开发领域，包括HTML5、CSS3和jQuery的使用。这三个技术是现代Web开发中的核心部分，用于构建交互式和动态的网页内容。 1. HTML5（HyperText ...
`@font-face`规则让我们可以使用自定义字体，不受系统默认字体限制。 ```css @font-face { font-family: 'MyWebFont'; src: url('myfont.ttf') format('truetype'); } body { font-family: 'MyWebFont', sans-...
css3 Animation属性参数介绍例如@keyframes ...@-webkit-keyframes mymove /* Safari 和 Chrome */ { from {top:0px;} to {top:200px;} } @-o-keyframes mymove /* Opera */ { from {top:0px;} to {top:200px;} }
### 使用jQuery绑定CSS3 Animation-Keyframes关键帧动画 #### 前言 本文将详细介绍如何通过jQuery来控制CSS3中的`animation-keyframes`关键帧动画的启动与停止。这种技术非常实用，尤其当动画需要根据用户的操作...
在H5（HTML5）和CSS3中，`@keyframes`规则是创建动画的核心工具。这个技术允许我们定义一个动画的过程，从开始到结束的各个阶段，从而实现丰富的视觉效果。在这个“文字一闪一闪提示”的例子中，我们将探讨如何使用`...
@-webkit-keyframes warn{ 0%{-webkit-transform:scale(0);transform:scale(0);opacity:1} 100%{-webkit-transform:scale(1);transform:scale(1);opacity:0} } @-moz-keyframes warn{ 0%{-moz-transform:scale...
1. 使用`@font-face`规则：这是最常见的方式，允许开发者直接在浏览器中加载自定义字体。例如： ```css @font-face { font-family: 'UnidreamLED'; src: url('UnidreamLED.eot'); /* IE9兼容 */ src: url('...
@font-face{ font-family:"Raphaelicons"; src:url('fonts/raphaelicons-webfont.eot'); src:url('fonts/raphaelicons-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/raphaelicons-webfont....
在网页设计领域，CSS3（层叠样式表第三版）为开发者提供了丰富的视觉效果和交互体验，其中之一就是图标字体的使用。Font Awesome是一款广受欢迎的图标库，它将图标以字体的形式提供，允许设计师和开发者通过CSS来...
CSS3支持@font-face规则，允许开发者引入网络上的自定义字体，提高网页的视觉吸引力。只需提供字体文件和相应的格式，如`.ttf`或`.woff`，然后在CSS中声明： ```css @font-face { font-family: 'MyCustomFont'; ...
`readme.html`可能是介绍如何使用和理解特效的文档；`jQuery之家.url`可能是一个链接到jQuery教程或资源的快捷方式，虽然这个特效未明确提及使用jQuery，但一些动态效果可能需要JavaScript库的支持；`css`和`fonts`...
7. **字体图标**：使用`@font-face`规则，我们可以引入自定义字体，包含图标，从而在导航中添加图形元素，提高可读性和视觉吸引力。 8. **透明度与混合模式**：`opacity`和`mix-blend-mode`属性可以创建半透明效果...
4. **字体和图标**：如果在`fonts`文件夹中有自定义字体或图标，可以通过`@font-face`规则导入，并在CSS中应用。例如： ```css @font-face { font-family: 'MyCustomFont'; src: url('fonts/myfont.ttf') format...