第六篇博客 - 加载动画. png
最近在系统的学习 CSS3 方面的知识, 以前经常在编程使用到部分 CSS3 属性, 但没有想到还有许多功能强大的功能都是在 CSS3 当中提出的. 对于学习前端的同学们, 一定要熟悉掌握 CSS3 的相关知识, 可以极大的提高开发效率.
下面是介绍在项目中使用到的 CSS3 技术:
一, 自定义字体 @font-face
提问: 为什么要使用自定义字体?
回答: 在 CSS3 之前, 网页设计师不得不使用用户计算机上已经安装的字体. 使用 CSS3, 网页设计师就可以设置网页使用大众喜欢的字体, 并且不再受用户本地计算机是否存在该字体的影响. 字体资源可以作为图片资源一样, 放在服务器上, 它会自动下载给需要的用户.
1.1 现有的字体文件有?
woff 文件, ttf 文件, svg 文件, eot 文件
1.2 @font-face 使用: 将字体下载到本地项目中, 路径的设置跟图片类似
自定义字体名, 并引入字体资源
- @font-face{
- font-family: hwxk; /* 自定义字体名 */
- src:url(../fonts/hwxk.ttf);/* 字体路径 */
- }
引用自定义字体
p{font-family:hwxk}
二, 伪类: 向某些选择器添加特殊的效果
2.1 child 选择器
div:first-child: 作为父元素的第一个 div
div:last-child: 作为父元素的最后一个 div
div:nth-child(): 括号内可以是确切的值, 也可以是表达式
例如:
div:nth-child(2): 作为父元素的第二个 div
div:nth-child(an+b): 作为子元素位置是 a 倍数偏移量为 b 的所有 div 元素
div:nth-child(odd): 作为子元素是奇数位置的所有 div 元素
:nth-last-child(): 括号内可以是确切的值, 也可以是表达式
:nth-child() 和: nth-last-child() 的区别在于, 前者从上到下查询, 后者从下到上查询
2.2 type 选择器
div:first-of-type: 作为父元素的第一个类型为 div 的元素
div:last-of-type: 作为父元素的最后一个类型为 div 的元素
div:nth-of-type(): 与 nth-child() 用法类似, 但含义不同
div:nth-last-of-type(): 于 nth-last-child() 用法类似, 但含有不同
三, 圆角: border-radius
- .box{
- width: 200px;
- height: 200px;
- border-radius:100px;/* 最大为宽度的一半, 超过时只能显示一半时的效果; 50% 时显示圆形 */
- background: gold;
- }
效果:
圆形. png
四, 阴影: box-shadow
4.1 属性值
h-shadow: 必需, 水平阴影的位置. 正值时表示向右偏移, 负值时表示向左偏移.
v-shadow: 必需, 垂直阴影的位置. 正值时表示向下偏移, 负值时表示向上偏移.
blur: 可选, 模糊距离.
spread: 可选, 阴影的尺寸.
color: 可选, 阴影的颜色.
inset: 可选, 将外部阴影 (outset) 改为内部阴影.
4.2 实例
代码:
- .box{
- width: 200px;
- height: 200px;
- background: #e8e8e8;
- box-shadow: 2px 2px 5px gold;
- }
效果:
阴影. png
五, 动画
5.1 创建动画 @keyframes(还需要兼容各种浏览器)
- /*Firefox*/
- @-moz-keyframes anim{
- from{transform: rotateY(0deg);}
- 50% {transform: rotateY(180deg);}
- to {transform: rotateY(360deg);
- }
- /*Opera*/
- @-o-keyframes anim{
- from{transform: rotateY(0deg);}
- 50% {transform: rotateY(180deg);}
- to {transform: rotateY(360deg);
- }
- /*Safari 和 Chrome*/
- @-webkit-keyframes anim{
- from{transform: rotateY(0deg);}
- 50% {transform: rotateY(180deg);}
- to {transform: rotateY(360deg);
- }
- /*IE*/
- @-ms-keyframes anim{
- from{transform: rotateY(0deg);}
- 50% {transform: rotateY(180deg);}
- to {transform: rotateY(360deg);
- }
- /* 常规 */
- @keyframes anim{
- from{transform: rotateY(0deg);}
- 50% {transform: rotateY(180deg);}
- to {transform: rotateY(360deg);}
- }
5.2 使用动画 animation
animation: 所有动画属性的简写属性, 除了 animation-play-state 属性.
animation-name: 规定 @keyframes 动画的名称.
animation-duration: 规定动画完成一个周期所花费的秒或毫秒. 默认是 0.
animation-timing-function: 规定动画的速度曲线, 默认是 "ease".
animation-delay: 规定动画何时开始, 默认是 0.
animation-iteration-count: 规定动画被播放的次数, 默认是 1.
animation-direction: 规定动画是否在下一周期逆向地播放, 默认是 "normal".
animation-play-state 规定动画是否正在运行或暂停, 默认是 "running".
- -webkit-animation: anim 2s linear infinite;/*Safari 和 Chrome*/
- -moz-animation: anim 2s linear infinite;/*Firefox*/
- -ms-animation: anim 2s linear infinite;/*IE*/
- -o-animation: anim 2s linear infinite;/*Opera*/
- animation: anim 2s linear infinite;/* 常规 */
六, CSS3 实例 - 加载效果
6.1 html 代码
- <div class="loading">
- <div > 加载中..</div>
- <div></div>
- <div></div>
- </div>
6.2 CSS3 代码
- *{
- padding:0;
- margin:0;
- list-style-type: none;
- }
- @font-face{
- font-family: hwxk; /* 自定义字体名 */
- src:url(../fonts/hwxk.ttf);/* 字体路径 */
- }
- .loading{
- width: 200px;
- height: 200px;
- margin: 100px auto;
- border-radius: 50%;
- font-size: 20px;
- line-height: 200px;
- position: relative;
- text-align: center;
- font-family: hwxk;
- }
- .loading> div:nth-child(2),.loading> div:nth-child(3)
- {
- width: 200px;
- height: 200px;
- border-radius: 50%;
- border:1px solid #ffffff;
- box-shadow: 0px 0px 5px 0 gold;
- position: absolute;
- top:0;
- -webkit-animation: anim 2s linear infinite;
- -moz-animation: anim 2s linear infinite;
- -ms-animation: anim 2s linear infinite;
- -o-animation: anim 2s linear infinite;
- animation: anim 2s linear infinite;
- }
- .loading> div:nth-child(2){
- border-color:#fff;
- left:10px;
- width:180px;
- }
- .loading> div:nth-child(3){
- border-color: gold;
- left:0px;
- width: 200px;
- -webkit-animation-delay: 0.5s;
- -moz-animation-delay: 0.5s;
- -ms-animation-delay: 0.5s;
- -o-animation-delay: 0.5s;
- animation-delay: 0.5s;
- }
- @-moz-keyframes anim{
- from{transform: rotateY(0deg);}
- 50% {transform: rotateY(180deg);}
- to {transform: rotateY(360deg);
- }
- @-o-keyframes anim{
- from{transform: rotateY(0deg);}
- 50% {transform: rotateY(180deg);}
- to {transform: rotateY(360deg);
- }
- @-webkit-keyframes anim{
- from{transform: rotateY(0deg);}
- 50% {transform: rotateY(180deg);}
- to {transform: rotateY(360deg);
- }
- @-ms-keyframes anim{
- from{transform: rotateY(0deg);}
- 50% {transform: rotateY(180deg);}
- to {transform: rotateY(360deg);
- }
- @keyframes anim{
- from{transform: rotateY(0deg);}
- 50% {transform: rotateY(180deg);}
- to {transform: rotateY(360deg);}
- }
6.3 效果
其最终效果下图所示, 但是一个动态循环的效果, 希望可以自己将代码复制到本地感受一下效果, 然后学习一下代码.
加载动画. png
来源: http://www.jianshu.com/p/6263bda5902d