精华内容
下载资源
问答
  • 有的动效可能是一个微妙的悬停效果,使用 Bttn.css 或者是 Hover Buttons 的帮助下,添加到按钮上,有的则可能是使用引人瞩目的动态渐变背景抓住用户的眼球,而这可能是通过 Granim.js 来实现的。或大或小,这些动画...

    如今很多 UI 设计师不是正在做动效,就正在学着做动效。

    动效现在已经无处不在了。有的动效可能是一个微妙的悬停效果,使用 Bttn.css 或者是 Hover Buttons 的帮助下,添加到按钮上,有的则可能是使用引人瞩目的动态渐变背景抓住用户的眼球,而这可能是通过 Granim.js 来实现的。或大或小,这些动画就和字体、导航、图标一样, 是如今 UI 界面当中不可或缺的组成部分。如果你仍然抱着侥幸心理,认为动效只是暂时的趋势,过一阵子就会消失,那就大错特错了。

    动效并不仅仅是一种娱乐手段。它们在整个设计当中承担着极为重要的作用和任务,是用户体验的粘合剂,增强了用户界面的可访问性,让界面更易于被理解。

    ▲Bttn.css

    ▲Hover Buttons

    ▲Granim.js

    微交互是动效最典型的使用场景。微交互中所用到的动效微小,但是功能强大,为用户提供视觉线索,让体验更加愉悦。你可以看看 Micron,这是一个小型的基于 JavaScript 的 CSS动效库,通过相应的脚本,每个动效都可以应用到 HTML 布局内的任何 DOM 元素。

    ▲Micron

    另一个常见的动效是加载动效。虽然绝大多数的用户已经习惯了它,但是像 Blotter.js 这样神奇的动效还是会时不时地给我带来惊喜,留下深刻的印象。但是总的来说,良好的用户体验始终是非常重要的。网站显示内容的时候,它应该持续地吸引用户,让用户保持兴趣。

    ▲Blotter.js

    众所周知的是,静止不变仿佛卡顿住的界面,很容易让用户觉得迷惑,所以进度条是一个非常重要的组件,让访客知道后台是有进展的。而 Progressbar 就是为此专门创建的工具。

    ▲Progressbar

    动效对于设计各方面的影响是积极的,微小的变化总能带来巨大的改变,这才是它所存在的重要意义。你可以试试 Pretty Checkbox 和 Hamburgers。Pretty Checkbox 是一个小型的 CSS 效果库,提供丰富的复选框和单选按钮的交互动画。它诞生之初装饰性比较强,但是随着其中效果的升级和功能性的强化,使得它所提供的动效越来越强大,越来越有效果。

    ▲Pretty Checkbox

    而 Hamburgers 这个项目特别类似 Kurt Petrek 之前的一个项目 Second-Hamburger-Helper,这个其中包括十几个非常可爱汉堡图标和相应的动效。即便只是最简单的三个小横杠构成的图标和交叉的关闭图标之间的动效,也可以这么丰富多彩,这种发现的愉悦会让人感受到一种别样的舒适感。

    ▲Second-Hamburger-Helper

    ▲Hamburgers

    另外,滚动条触发的动效也是如今到处都可以看到的一个动效类别。它们最初更多出现在讲述故事的网站上,但是现在已经大规模的普及开了。

    事实证明,动效确实是创造顺畅体验的粘合剂。除此之外,它还需要辅助创建视觉路径。比如 T-Scroll 和 Scrollanim,这两个动效都是用来处理滚动动效的,第一个使用了CSS 和JS,而后者则使用了 Sass 和 ES6,根据你的实际技术来选择合适的工具吧。

    装饰性动效

    在各种最新的插件、库和代码片段的加持之下,想在界面的任何地方添加上丰富的细节和动画,都不是一件麻烦的事情。你可以找到很多通用的解决方案,比如 Mimic.CSS,Animate Plus,AnimTrap ,也可以使用 jQuery DrawSVG 和 Moving Letters。

    Mimic.CSS 是一个包含有20中不同视觉效果的小合集,从脉动动效到下坠动效,不一而足。你可以在不同的 DOM元素中添加不同的类,来实现不同的效果。

    ▲Mimic.CSS

    AnimatePlus 则是一个基于 JavaScript 的轻量级的动效库,专注于高性能和灵活的动效。它所带来的动效通常简单且直观。

    ▲Animate Plus

    AnimTrap 并不是一个动效工具,而是一个动效的 CSS 框架,可以作为安全的基础,所以你可以使用它来创建可行性极高的基于滚动的动效。

    ▲AnimTrap

    Leonardo Santos 所开发的这款 jQuery DrawSVG 插件能够以多样的方式将 SVG 动效应用到实际产品当中。它适用于矢量元素,借此创建出独特的视觉效果。

    ▲jQuery DrawSVG

    Moving Letters 则是 Tobias Ahlin 的个人项目,它提供了16种基于文本和字体的动画效果,你只需要复制代码粘贴到你的网站里面,就能够重现出相应的效果。

    ▲Moving Letters

    DrawSVG 和 Moving Letters 都是纯粹的娱乐性的工具,这个系列当中,还有另外三个工具也是非常值得推荐的:Tilt.js、Pixel Wave 和 3D Lines。这三个工具也同样借助动效实现了丰富多彩的用户体验。

    Tilt.js 是一个非常小的插件,用来创建微妙但是引人瞩目的视差效果,而 Pixel Wave 则可以将像素变成博朗,带来时尚非常的几何元素氛围。

    ▲Tilt.js

    ▲Pixel

    Wave 3D Lines 则是基于 Three.js 的解决方案。它可以创建不断变化的颜色和线条,风格现代而视觉感十足。

    ▲3D Lines

    动效能够让琐碎的细节变得有趣。在实际运用的过程中,使用 MixltUp 也是不错的选择,它是一个不依赖其他组件的解决方案,能够创造出不同的动画效果。

    其他的资源素材

    来自专业人事的动效工具真的能够让你的网页和产品拥有截然不同的视觉效果,尤其是像 Mary Lou 这样的高手所创建的工具。你可以看看 Decorative Letter Animations 和 Glitch Effect 这两篇文章,其中都包含了非常突出的展示,清新而时尚。当然,这些代码和工具的缺陷在于……过于先锋,对于浏览器兼容性有着极高的要求。但是这不会是不可逾越的障碍,因为浏览器会越来越先进,性能越来越强。

    ▲Decorative Letter Animations

    结语

    纯粹静态的网站越来越少,动态的网站是大势所趋。今天的文章我们直接推荐的是最新的、效果突出的动效工具和代码片段,并没有推荐诸如 Three.js、WebGL 或者 GSAP 等主流工具的技巧,但是这些东西其实很容易获得,也容易找到。我相信这些最新、最独特的工具能够帮你迈出设计和应用动效的第一步,这才是最重要的。

    作者 : Nataly Birch

    原文链接:https://designmodo.com/dynamic-animations-ui/

    展开全文
  • 字体随处可见,网页上看到的任何字都包含字体的使用,怎么使用呢? font-family 定义字体系列 传统字体 我们在开发一个互联网项目首先要做的就是字体选择,通常我们在设计的时候尽量去考虑系统默认的字体;而一个...

    字体

    字体随处可见,网页上看到的任何字都包含字体的使用,怎么使用呢?
    font-family 定义字体系列

    传统字体

    我们在开发一个互联网项目首先要做的就是字体选择,通常我们在设计的时候尽量去考虑系统默认的字体;而一个系统中通常会包含很多字体,一般如何选择呢?css 中 font-family 去实现。
    比如:我们给一个div定义一个字体,如果是在window下面用‘微软雅黑’如果没有的话就用‘黑体’代替,如果都没有就让系统自动选择

    div{
      font-family:"Microsoft YaHei","微软雅黑","黑体","宋体",sans-serif;
    }
    

    font-family 定义字体系列 可以在后面跟很多个,数目不限,实现顺序就是先用第一个,如果没有在去找第二个,以此类推,如果都没有就找系统的默认字体。
    时代的进步,很多情况我们不喜欢系统为我们提供的字体,那怎么办呢?

    自定义字体

    css 3的出现允许自定义字体,也就说当系统没有字体的时候,可以自己下载,听上去很厉害,
    css 3 给我们提供了一个 @font-face 可以从服务器导入字体,导入的字体可以自己随便命名
    举例:自定义一个字体 比叫myfont ,然后应用在div上

    @font-face
    {
    font-family: myfont ;  /* 自定义字体名称*/
    src: url('Sansation_Light.ttf'),
         url('Sansation_Light.eot'); /* IE9 */
    }
    /* 调用自定义字体 应用到div中*/
    div{
      font-family:myfont  /*调用定义好的字体名称*/
    }
    

    @font-face 两个基础属性是必须的:如上面的例子
    font-family: 定义字体的名称 然后需要用到字体的地方调用
    src :后面的url 表示导入字体的路径可以是相对路径绝对路径
    在div中用字体和传统方法一样直接使用即可

    字体分栏

    分栏效果就是像报纸一样一栏一栏的看一下示例:
    在这里插入图片描述
    实现这个效果可用div加上浮动布局float 属性也可以完成,但是浮动带来的问题是,高度要写死,并且还要清除浮动,因为他是脱离了文档流。
    实现这个效果推荐用css3 字体分栏方法

    column-count 表示需要分为多少栏
    column-gap 每一栏之间的间距
    column-rule 每一栏之间的样式

    html 代码

    <h1>分栏效果</h1>
    <div>字体
        字体随处可见,网页上看到的任何字都包含字体的使用,怎么使用呢?
        font-family 定义字体系列
        
        传统字体
        我们在开发一个互联网项目首先要做的就是字体选择,通常我们在设计的时候尽量去考虑系统默认的字体;而一个系统中通常会包含很多字体,一般如何选择呢?css 中 font-family 去实现。
        比如:我们给一个div定义一个字体,如果是在window下面用‘微软雅黑’如果没有的话就用‘黑体’代替,如果都没有就让系统自动选择
        
        div{
          font-family:"Microsoft YaHei","微软雅黑","黑体","宋体",sans-serif;
        }
        font-family 定义字体系列 可以在后面跟很多个,数目不限,实现顺序就是先用第一个,如果没有在去找第二个,以此类推,如果都没有就找系统的默认字体。
        时代的进步,很多情况我们不喜欢系统为我们提供的字体,那怎么办呢?
        
        自定义字体
        css 3的出现允许我们,自定义字体,也就说当系统没有字体的时候我们可以自己下载,听上去很厉害,
        css 3 给我们提供了一个 @font-face 可以从服务器导入字体,导入的字体可以自己随便命名
        举例:自定义一个字体 叫,myfont ,这个字体其实是一个艺术字体,然后应用在div上
        
        @font-face
        {
        font-family: myfont ;
        src: url('Sansation_Light.ttf'),
             url('Sansation_Light.eot'); /* IE9 */
        }
        /* 调用自定义字体 应用到div中*/
        div{
          font-family:myfont
        }
        @font-face 两个基础属性是必须的:如上面的例子
        font-family: 定义字体的名称 然后需要用到字体的地方调用
        src :后面的url 表示导入字体的路径可以是相对路径绝对路径
        在div中用字体和传统方法一样直接使用即可
        
        字体分栏
        背景和颜色
        边框多样化</div>
    

    css

    div{
       column-count: 3; 
       column-gap: 30px;
       column-rule: blue 1px solid;
    }
    

    这样就简单实现了3栏文字布局,动手练,还有很多字体相关的特性
    注意:浏览器支持目前还不是很普级,最好使用可编译的css技术less,sass等

    背景

    css 可以允许纯色应用为背景同时也支持图片作为背景,css3的出现背景更加多样化,渐变,背景适应大小等等

    背景写法

    常用书写格式

     background: 颜色值,图片地址,重复设置 区域定位 ;
    

    颜色值:可以是十六进制或者rgba都可以,
    图片地址:可以是绝对路径或者相对路径,
    重复设置:可以设置为x、y方向重复或者不重复背景
    区域定位:背景图片从哪里开始展现
    在开发中比较常用的就是上述表现出来的
    如:定义一个纯色的蓝色背景,不用图片,不重复,区域定位从0.0 开始即:左上角

    div{
      background:blue no-repeat 0 0;
    }
    /*或者 定义纯色后面的都可以删掉。不存在重复设置*/
    div{
      background:blue;
    }
    

    设置一张图美女图片为背景,不重复,区域定位从0.0 开始

    div{
      background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592124104699&di=d7ebb683d4baccff9a741254a900e736&imgtype=0&src=http%3A%2F%2Fpic.feizl.com%2Fupload%2Fallimg%2F170614%2F1TJB554-0.jpg') no-repeat 0 0;
    }
    

    在开发中灵活使用相对路径,少用绝对路径

    背景大小

    在css3 以前控制 背景大小很不方便,有可能还要找设计师改图片大小,现在就很简单了

    backgournd-size:'宽度' '高度'
    

    宽度和高度的单位不固定可以是px,rem,em等等都可以,有一个前提必须是在background-img 地址后面,否则无效;

    假设:有一个div宽度和高度分别是300px和200px,有一个图片实际大小事 600px和 400px,现在我们需要把这个图片当做div的背景,并且无剪切填充满?
    html

    <div class ='box'>
    	一张美女图300*200
    </div>
    

    css 代码

     .box{
      width: 300px;
      height: 200px;
      background: url('https://img.tupianzj.com/uploads/allimg/202003/9999/8969d449f7.jpg') no-repeat 0 0;
      background-size: 100% 100%; 
    }
    

    background-size 可以自行调试多试试就知道了。

    渐变

    这是一种有规律的变化,能给人一种很强的节奏感和审美情趣,日常生活中随处可见,是一种视觉形象。
    看一个生活的渐变
    在这里插入图片描述
    是一种很有规律很有节奏感的视觉之美。
    css 中最常用的是线性渐变,其他渐变当然可以轻松实现只要你有较强的审美观念,如果没有还是交给设计师去处理吧。
    线性渐变
    基本语法

     background-image: linear-gradient('渐变开始位置[坐标点||角度]','渐变开始颜色','渐变结束颜色','颜色')
    

    颜色最低通常包含两个,如果有三个或者以上按照等比例来分,第二个是第三个的开始颜色以此类推;
    如:从上到下的渐变

     background-image: linear-gradient( to bottom,#ccc,#000);
    

    在这里插入图片描述
    线性渐变支持,向下/向上/向左/向右/对角方向,模式是向下,因此向下渐变也可以

    background-image: linear-gradient('#ccc','#000')
    

    如果有三段渐变

    background-image: linear-gradient(top,'#ccc','#000','#fff')
    

    边框多样化

    边框让一个样式吧内容框起来就叫边框
    最简单的边框

    border:'宽度大小' '边框样式' '边框颜色'
    

    1px 直线 红色边框

    border:1px solid red
    

    90度的边框不好看,加点圆角

    border: 1px solid red;
    border-radius: 2px;
    

    效果
    在这里插入图片描述
    来点阴影:

      width: 50px;
      height: 20px;
      border: 1px solid red;
      border-radius: 5px;
      box-shadow: #cccccc 1px 5px 5px;
    

    在这里插入图片描述

    border-radius : 圆角的写法 后面可以根百分比的单位
    box-shadow 阴影 语法

    box-shadow:颜色 水平偏移 垂直偏移 模糊距离 阴影尺寸 内外阴影(默认外)
    
    展开全文
  • 设计网页的时候,可能会用到某种特殊的字体。如果用户的机器中没有安装,文字只能以普通字体显示。 这时可以让用户的浏览器自行下载服务器端字体,然后就能呈现出设计者想要的效果。 @font-fa...

    随着浏览器的升级,CSS3可以再一些大型网站上运用了比如淘宝。
    但是,不同的浏览器有不同的CSS3实现,兼容性是一个大问题,天外飞仙整理一些常用的写法。
    一、服务器端字体(font-face)
    设计网页的时候,可能会用到某种特殊的字体。如果用户的机器中没有安装,文字只能以普通字体显示。
    这时可以让用户的浏览器自行下载服务器端字体,然后就能呈现出设计者想要的效果。

    @font-face {
    font-family: ‘MyFont’;
    src: url(‘myfont.eot’); /* IE6+ */
    src: local(‘myfont.ttf’),
    url(‘myfont.woff’) format(‘woff’), /* FF3.6 */
    url(‘myfont.ttf’) format(‘truetype’); /* FF3.5+, Saf3+,Chrome,Opera10+ */
    }

    第一行代码:
    font-family: ‘MyFont’;
    表示为这种字体起一个名称,可以随意设置,我这里用的是MyFont。
    src: url(‘myfont.eot’);
    这一行表示字体位置,由于ie只支持服务器端的eot字体,所以这一行是ie专用的。
    src: local(‘myfont.ttf’),
    url(‘myfont.woff’) format(‘woff’),
    url(‘myfont.ttf’) format(‘truetype’);
    local()表示在本机(客户端)查找该字体,如果本机已经安装了,就不用下载了。url()表示字体在服务器上的位置,format()用来说明字体 格式。Firefox 3.5支持TrueType和OpenType字体,Firefox 3.6又增加了WOFF字体。其他基于Webkit引擎的浏览器(sarif,opera、chrome),目前好像只支持truetype。然后,使用 的时候这样写就可以了。

    h2{ font-family: “MyFont”; }

    需要注意的是,字体文件必须与网页文件来自同一个域名,符合浏览器的“同源政策”。另外,由于中文字体文件太大,服务器端字体显然只适用于英文字体。
    二、盒状阴影(Box Shadow)

    .box_shadow {
    -moz-box-shadow: 3px 3px 4px #ffffff; /* FF3.5+ */
    -webkit-box-shadow: 3px 3px 4px #ffffff; /* Saf3.0+, Chrome */
    box-shadow: 3px 3px 4px #ffffff; /* Opera 10.5, IE 9.0 */
    filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color=#ffffff); /* IE6,IE7 */
    -ms-filter: “progid:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color=#ffffff); /* IE8 */
    }

    -moz-box-shadow、-webkit-box-shadow和box-shadow的设置是一样的,都有4个参数,含义分别为:x轴偏移值、y轴偏移值、阴影的模糊度、以及阴影颜色。
    IE 6~8使用其独有的滤镜,需要设置三个参数:offX(X轴偏移值)、offY(Y轴偏移值)、Color(阴影颜色)。
    三、圆角(Rounded Corner)

    .box_round {
    -moz-border-radius: 30px; /* FF1+ */
    -webkit-border-radius: 30px; /* Saf3+, Chrome */
    border-radius: 30px; /* Opera 10.5, IE 9 */
    }

    圆角的实现比较简单,只要设好一个半径值就可以了。IE 9才可以有效果的哦。
    四、透明(opacity)
    正常情况下,上层的对象会覆盖下层的对象。

    但是,如果将上层对象的颜色变为透明,就可以透过它看到下层对象。

    .box_rgba {
    background-color: #B4B490;
    background:transparent;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99B4B490,endColorstr=#99B4B490); /* IE6,IE7 */
    -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#99B4B490,endColorstr=#99B4B490); /* IE8 */
    zoom: 1;
    background-color: rgba(180, 180, 144, 0.6); /* FF3+, Saf3+, Opera 10.10+, Chrome */
    }

    background-color: #B4B490;
    这是设置对象的预备色,也就是不透明时的颜色。如果浏览器不支持透明,就将显示这个颜色。

    background:transparent;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99B4B490,endColorstr=#99B4B490); /* IE6,IE7 */
    -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#99B4B490,endColorstr=#99B4B490); /* IE8 */
    zoom: 1;

    这几行是专门为IE写的,其中主要用到 DXImageTransform.Microsoft.gradient滤镜。我们要为它设置起点色(startColorstr)和终点色 (endColorstr)。在单色透明的情况下,这两个值是相同的。需要注意的是,它们的取值是一个八位的十六进制值,前两位表示alpha通道 值,00表示完全透明,FF表示完全不透明;后六位则是这个颜色的RGB值。
    background-color: rgba(180, 180, 144, 0.6);
    除了IE,其他浏览器几乎都支持rgba函数。它有四个参数,前三个为一种颜色的RGB值,第四个为透明度,这里设为0.6。
    五、旋转(rotation)

    .box_rotate {
    -moz-transform: rotate(7.5deg); /* FF3.5+ */
    -o-transform: rotate(7.5deg); /* Opera 10.5 */
    -webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod=auto expand’);
    -ms-filter: “progid:DXImageTransform.Microsoft.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod=auto expand’); /* IE8 */
    }

    除了IE以外,其他浏览器都是用rotate函数,实现某个对象的旋转。比如rotate(7.5deg)就表示顺时针旋转7.5度(degree)。
    IE则需要用到一个复杂的滤镜DXImageTransform.Microsoft.Matrix。它一共接受五个参数,前四个参数需要自行计算三角函 数,然后分别写成M11 = cos(rotation),M12 = -sin(rotation),M21 = sin(rotation),M22 = cos(rotation),其中的rotation表示旋转角度,如果顺时针旋转7.5度,则rotation就为7.5;第五个参数 SizingMethod表示重绘方式,’auto expand’代表自动扩展到新的边界。
    除了这个滤镜,IE还有一个稍微简单一点的滤镜DXImageTransform.Microsoft.BasicImage(rotation=x)。其中的x只能取值为1,2,3,0,分别表示顺时针选择90度、180度、270度和360度。
    六、线性渐变(Gradient)

    .box_gradient {
    background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
    background-image: -webkit-gradient(linear,left top, left bottom, color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#444444, endColorstr=#999999, GradientType=0); /* IE6,IE7 */
    -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#444444, endColorstr=#999999,GradientType=0); /* IE8 */
    }

    Firefox

    -moz-linear-gradient(top, #444444, #999999);

    -moz-linear-gradient有三个参数。第一个参数表示线性渐变的方向,top是从上到下、left是从左到右,如果定义成left top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数,表示多种颜色的渐变。
    -webkit-gradient(linear,left top, left bottom, color-stop(0, #444444),color-stop(1, #999999));
    -webkit-gradient是webkit引擎对渐变的实现,一共有五个参数。第一个参数表示渐变类型(type),可以是linear(线性渐 变)或者radial(辐射渐变)。第二个参数和第三个参数,都是一对值,分别表示渐变起点和终点。这对值可以用坐标形式表示,也可以用关键值表示,比如 left top(左上角)和left bottom(左下角)。第四个和第五个参数,分别是两个color-stop函数。color-stop函数接受两个参数,第一个表示渐变的位置,0为 起点,0.5为中点,1为结束点;第二个表示该点的颜色。
    DXImageTransform.Microsoft.gradient(startColorstr=’#444444′, endColorstr=’#999999′, GradientType=’0′);
    IE依靠滤镜实现渐变。startColorstr表示起点的颜色,endColorstr表示终点颜色。GradientType表示渐变类型,0为缺省值,表示垂直渐变,1表示水平渐变。
    七、其他
    利用css3,还可以完成transform(变形),包括skew(扭曲)和scale(缩放),以及css transitions(动态变换)。这些内容待以后再补充。

    文章链接:http://www.jqueryba.com/1059.html (转载时请注明本文出处及文章链接)

    转载于:https://www.cnblogs.com/z-uu/archive/2013/01/07/2848980.html

    展开全文
  • JavaScript网页特效范例宝典源码

    千次下载 热门讨论 2013-09-04 10:40:38
    实例143 制作彩色渐变文字动画 224 5.2 改变文字大小 226 实例144 文字伸缩 226 实例145 动荡的文字 227 实例146 文字伸展 228 实例147 文字逐个放大 230 实例148 自动改变大小 231 实例149 选择字体的大小 232 5.3 ...
  • javascript网页特效实例

    热门讨论 2010-10-28 08:54:15
    实例143 制作彩色渐变文字动画 224 5.2 改变文字大小 226 实例144 文字伸缩 226 实例145 动荡的文字 227 实例146 文字伸展 228 实例147 文字逐个放大 230 实例148 自动改变大小 231 实例149 选择字体...
  • 现在,您可以使用 CSS3 来添加阴影、渐变、旋转和某些字体 —— 这一切都不需要用到减慢网页速度的图像。这个小节介绍一些新的、令人激动的特性,您可以直接使用它们而不会导致跨浏览器问题。Web 设计师可以将更多...

     

    对 Web 设计师而言,CSS3 将带来许多全新的机会。现在,您可以使用 CSS3 来添加阴影、渐变、旋转和某些字体 —— 这一切都不需要用到减慢网页速度的图像。这个小节介绍一些新的、令人激动的特性,您可以直接使用它们而不会导致跨浏览器问题。Web 设计师可以将更多时间用于创建吸引眼球的网站,而不是致力于如何让网站看起来尚可。

    使用阴影

    阴影给网页添加了维度;以前,阴影效果只能通过图像来实现。使用 CSS3 之后,您可以控制许多细节,包括方向、偏移量、颜色和阴影的平滑度(如 图 3 所示)。清单 8清单 9 和 清单 10 通过几个例子展示使用 CSS 创建阴影的各种方法。


    图 3. 使用 CSS3 呈现阴影
    对 HTML 元素应用 CSS3 阴影的例子 

    在 Firefox 浏览器中使用 -moz-box-shadow 来将阴影应用到元素。您可以为该属性赋予 4 个值。


    清单 8. 在 Firefox 中创建阴影

     

    -moz-box-shadow: 1px 
    1px 4px #666; 

     在 Safari 和 Chrome 中,使用 -webkit- box-shadow 来将阴影应用到元素。您一样可以对该属性赋予 4 个值。

     


    清单 9. 在 Safari 和 Chrome 中创建阴影

     

    -webkit-box-shadow: 1px 1px 4px #666; 
     

     

    下面是对 Safari、Chrome 和 Firefox 阴影可用的 4 个属性:

    • Horizontal offset of the shadow。偏移量的数值可以是正数也可以是负数;如果是负数,那么偏移量将把影子投向元素的左边,而正数将把阴影投向右边。
    • Vertical offset。这个偏移量也可以设置为正数或负数。负数将把阴影投向元素的上方,而正数将把阴影投向元素的下方。
    • Blur radius。增大该属性的值将增加阴影的平滑度,而减小值将增加阴影的尖锐度。
    • Hex color。可以设置阴影的十六进制颜色。

    CSS 在 Internet Explorer 中的工作方式与其他浏览器不同。清单 10 显示了如何使用过滤器在 Internet Explorer 中创建阴影。第一个过滤器针对版本 6 和 7 的 Internet Explorer,而第二个过滤器针对版本 8 或更新的 Internet Explorer。


    清单 10. 用于创建阴影的 Internet Explorer CSS 过滤器

     

    filter: 
    progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=2px, 
    Color='#333333'); 
    -ms-filter: 
    "progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=2px, 
    Color='#333333')"; 

     创建渐变效果

     

    这些年有许多创建渐变效果的方法都流行起来了;我最喜欢的是重复 1 个像素的渐变图像。图 4 表明有了 CSS3 就不必再使用这一技巧了,因为每种浏览器处理渐变时都有自己的一套方法(见 清单 11清单 12 和 清单 13)。


    图 4. 使用 CSS3 呈现渐变效果
    对 HTML 元素应用 CSS3 渐变的例子 

    您可以通过几种方式来处理渐变的显示。清单 11 是一个使用 Firefox 浏览器进行演示的简单例子,它从顶部开始渐变,然后从第一种颜色过渡到第二种颜色。


    清单 11. 在 Firefox 中创建渐变效果

     

    background: -moz-linear-gradient(top, #eaeaea, #999999); 
     

     

    清单 12 中以 Safari 和 Chrome 浏览器为例,它们的效果与 Firefox 浏览器一样,但是实现方式不相同:

    • 第一个属性是类型,它允许将渐变设置为线性(linear)或放射状(radial)。
    • 第二和第三个属性分别是渐变的起点和终点。
    • 第四和第五个属性分别是渐变的开始和结束颜色。


    清单 12. 在 Safari 和 Chrome 浏览器中创建渐变

     

     

     background: -webkit-
    gradient(linear,left top,left bottom,color-stop(0, #eaeaea), color-stop(1, 
    #999999)); 
     

     

    Internet Explorer 需要使用过滤器来创建渐变。过滤器有许多相关的属性:

    • Enabled 表明是否启用过滤器(默认值为 True)。
    • EndColor 决定渐变的最终不透明色。
    • EndColorStr 决定渐变的最终颜色。
    • GradientType 决定渐变的方向。
    • StartColor 决定渐变的最初不透明色。
    • StartColorStr 决定渐变的最初颜色。

    清单 13 是一个最简单的渐变过滤器,它定义了起始和结束颜色。


    清单 13. 在 Internet Explorer 中创建渐变

     

     filter: 
    progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaeaea', 
    endColorstr='#999999'); 

     


    旋转元素

    有时候,仅以常规的垂直方式显示元素还是不够用的。CSS3 中引入了形状转换,允许您旋转元素(如 图 5 所示)。您可以让元素完全翻转,也可以让它仅旋转一定的角度,并且旋转效果都是跨浏览器有效的,请参见 清单 14清单 15 和 清单 16 的代码。


    图 5. 使用 CSS3 旋转 HTML 元素 
    使用 CSS3 旋转 HTML 元素的例子 

    用于旋转元素的代码直观易懂:仅使用一个数值和 deg 来表示旋转的角度。在 Firefox 中,使用 -moz-transform 来旋转元素,如 清单 14 所示的代码。


    清单 14. 在 Firefox 浏览器中旋转元素

     

     -moz-transform:rotate(-2deg); 
     


    在 Safari 和 Chrome 浏览器中,使用 -webkit-transform 来旋转元素。


    清单 15. 在 Safari 和 Chrome 中旋转元素

     

     -webkit-transform:rotate(-2deg); 

     


    在 Internet Explorer 旋转元素有几种可选办法。如果第一种选择办法不可行,通常可以退而使用过滤器。用于在 Internet Explorer 中旋转元素的过滤器是 Matrix。尽管使用它有些复杂,但是它在必要时能够完成很多工作。

    Matrix 过滤器有许多相关的属性:

    • Dx 对 X 分量进行线性变换。
    • Dy 对 Y 分量进行线性变换。
    • Enabled 用来启用过滤器。
    • FilterType 用来设置变换内容的像素。
    • M11 决定线性变换的第一行/第一列条目。
    • M12 决定线性变换的第一行/第二列条目。
    • M21 决定线性变换的第二行/第一列条目。
    • M22 决定线性变换的第二行/第二列条目。
    • SizingMethod 用于确定是否根据结果的需要重新调整容器的大小。


    清单 16. 在 Internet Explorer 中旋转元素

    -ms-transform: rotate(-2deg); 
    filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', 
    M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, 
    M22=0.9914448613738104); 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9914448613738104, 
    M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104,
    sizingMethod='auto expand')";
     


    框调整

    所有浏览器都使用 W3C 框模型,因此在 CSS3 中您可以使用 box-sizing 来设置浏览器呈现元素的宽度和高度的方式。border-box元素告诉浏览器使用实际的宽度和高度,而不考虑填充和边框。清单 17 显示了 Safari 和 Chrome 浏览器中的框调整。


    清单 17. Safari 和 Chrome 浏览器中的框调整

     

    box-sizing: content-box;

     

     


    在 清单 18 中可以发现,框调整在 Safari/Chrome 和 Firefox 中的惟一区别是 Firefox 使用 -moz-box-sizing 属性。


    清单 18. Firefox 中的框调整

     

    -moz-box-sizing: content-box;
     

     


    Internet Explorer 使用 -ms-box-sizing 属性,如 清单 19 所示。


    清单 19. Internet Explorer 中的框调整

    -ms-box-sizing: content-box;
     


    在一些浏览器中,设置元素的宽度时会默认提示将填充和边框考虑在内,从而得到这样的等式:(宽度或高度)+ 填充 + 边框

    给元素添加边框

    border 元素是用来在 web 页面上定义一块区域的常见方法。新的 outline 元素不仅能够实现 border 元素的功能,还可以设置偏移量。在 清单 20 中,offset 元素允许您创建边框,并且可以参照元素的实际位置进行偏移。在过去,仅能通过添加边框和使用填充来实现该效果,但是通常不能取得预期结果。


    清单 20. 给元素添加边框并进行偏移

     

    outline: 1px dotted #cccccc;
    outline-offset: 10px;

     

     


    使用伪类

    现在已有许多伪类(pseudo-class)投入使用;其中大部分伪类通常都与超链接的锚标记相关联。伪类允许为元素添加不同的状态,以及基于当前的状态改变属性。清单 21 展示了伪类的常见用法。


    清单 21. 伪类的常见用法

    a:link { }
    a:visited { }
    a:hover { }
    a:active { }
     


    清单 22 中的伪类选择器为可编辑的 HTML5 内容区创建了一个悬停(hover)状态,并应用前面讨论的边框代码。


    清单 22. 使用伪类

     

    #editable:hover {
    	outline: 1px dotted #cccccc;
    	outline-offset: 10px;
    }
     

     

    嵌入字体

    web 字体从一开始就一直是个问题。每个用户的计算机上可用的字体非常有限,而这些有限的字体中好看的少之又少。我们现在处于大变革的边沿,而字体嵌入(见 图 6)将允许在不使用笨重的图像的情况下创建出色的页面布局。可以通过几种方法来实现该目的。


    图 6. 使用 CSS3 嵌入字体
    使用 CSS3 嵌入字体的例子 

    对于 Internet Explorer 浏览器,需要使用的字体必须采取 .eot 文件格式。清单 23 显示了如何在获得正确的字体文件时嵌入字体。


    清单 23. 在 Internet Explorer 中嵌入字体

     

    font-family: yanone;
    src: url('../fonts/yanone.eot');
     

     


    对于 Firefox、Safari 和 Chrome,您可以嵌入 .ttf 或 .otf 格式的字体。清单 24 显示了嵌入这些字体供 Web 页面日后使用所需的代码。


    清单 24. 在 Firefox、Safari 和 Chrome 中嵌入字体

    font-family: yanone;
    src: local('Yanone'), url(../fonts/yanone.ttf) format("truetype");
     


    字体嵌入完成之后,通过在 @font-face 声明中创建一个以字体家族为名的类来将它应用到实际的 HTML 元素中。


    清单 25. 为所有浏览器嵌入字体并添加一个类来将字体分配给元素 

    @font-face {
        font-family: yanone;
        src: url('../fonts/yanone.eot');    
        src: local('Yanone'), url(../fonts/yanone.ttf) format("truetype");
    }
    .yanone {
      font-family: yanone, Verdana, Arial, Helvetica, sans-serif;
    }
     

     

     

    展开全文
  • 第一部分 界面设计

    2013-10-22 23:10:34
    第一部分 界面设计 实例001 如何实现程序闪屏效果 实例002 如何实现程序窗口闪烁 实例003 如何制作吸附窗口程序 实例004 如何制作透明程序窗口 实例005 如何制作半透明程序窗口 实例006 如何制作不规则程序...
  • 案例1.5 半透明渐显动画和渐变窗体 案例1.6 浮动的窗体 案例1.7 在屏幕中央并总在最前窗体 案例1.8 椭圆形窗体 案例1.9 可移动的五边形窗体 案例1.10 文字窗体 案例1.11 动态滑入滑出的闪烁窗体 案例1.12 以...
  • 本书适合 Web 设计与开发的初学者和爱好者自学,也适合有一定 Web 前端开发基础的网页开发人员阅读,同时也可作为各院校相关专业的教材使用。 第1章 移动设备与Web技术 1 1.1 了解移动互联网 1 1.1.1 移动互联网...
  • 6.9 结合案例实战-设计精美的多列网页版式 第7章 CSS 3渐变设计 7.1 Webkit引擎的CSS渐变实现方法 7.1.1 基本语法 7.1.2 直线渐变的基本用法 7.1.3 径向渐变的基本用法 7.1.4 渐变的其他应用 7.2 ...
  • C#美化单选按钮和复选按钮,用绘制的方法来实现美化,首先改变了单选框和复选框的颜色,其实是改变了它们的形状,一改灰色的默认风格,学习这种美化方法后,可以让复选框和单选按钮更能适合你的网页风格,为你设计出...
  • 实例22 设计能选择字体并显示效果的按纽 第5课 Delphi制作的对话框 实例23 设计打开查找对话框的程序 实例24 设计打开替换对话框的程序 实例25 设计打开保存文件对话框的程序 第6课 Delphi制作显示类应用程序 实例26...
  • 12.1 响应式Web设计:概述 237 12.2 创建可伸缩图像 239 12.3 创建弹性布局网格 241 12.4 理解和实现媒体查询 245 12.5 组合使用 251 12.6 兼容旧版IE 257 第13章 使用Web字体 259 13.1 什么...
  • ILLUSTRATOR.CS2宝典.pdf

    2013-02-17 09:23:54
    它是印刷出版线稿设计师、专业插画家、多媒体图像艺术家和Internet网页及在线内容制作者不可或缺的工具之一。 Adobe Illustrator CS2是该软件的最新版本,它增加了一些新功能并改进了原有的功能,《Illustrator CS2...
  • 实例026 实现两个变量的互换(不借助第3个变量) 2.3 条件语句 实例027 判断某一年是否为闰年 实例028 验证登录信息的合法性 实例029 为新员工分配部门 实例030 用Switch语句根据消费金额计算折扣 实例031 ...
  • 实例026 实现两个变量的互换(不借助第3个变量) 2.3 条件语句 实例027 判断某一年是否为闰年 实例028 验证登录信息的合法性 实例029 为新员工分配部门 实例030 用Switch语句根据消费金额计算折扣 实例031 ...
  • 实例141 使用网页对话框显示图片 226 实例142 上传图片并生成高清缩略图 228 实例143 删除上传到服务器指定文件夹中的数码照片 231 实例144 批量上传数码相片 232 5.5 Panel容器控件 236 实例145 使用Panel控件显示...
  • 实例141 使用网页对话框显示图片 226 实例142 上传图片并生成高清缩略图 228 实例143 删除上传到服务器指定文件夹中的数码照片 231 实例144 批量上传数码相片 232 5.5 Panel容器控件 236 实例145 使用Panel控件显示...
  • 实例141 使用网页对话框显示图片 226 实例142 上传图片并生成高清缩略图 228 实例143 删除上传到服务器指定文件夹中的数码照片 231 实例144 批量上传数码相片 232 5.5 Panel容器控件 236 实例145 使用Panel控件显示...
  • 本书理论知识系统全面,详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性,所有这些都巧妙地融入到案例中...
  • 实例183 使窗体背景色渐变 236 实例184 随机更换主界面背景 237 实例185 磁性窗体的设计 238 实例186 制作鼠标穿透窗体 246 实例187 窗体换肤程序 247 8.4 窗体动画 250 实例188 窗体中的滚动字幕 250 实例189 动画...
  • 实例183 使窗体背景色渐变 实例184 随机更换主界面背景 实例185 磁性窗体的设计 实例186 制作鼠标穿透窗体 实例187 窗体换肤程序 8.4 窗体动画 实例188 窗体中的滚动字幕 实例189 动画显示窗体 实例190 ...
  • 实例183 使窗体背景色渐变 实例184 随机更换主界面背景 实例185 磁性窗体的设计 实例186 制作鼠标穿透窗体 实例187 窗体换肤程序 8.4 窗体动画 实例188 窗体中的滚动字幕 实例189 动画显示窗体 实例190 ...
  • 实例183 使窗体背景色渐变 实例184 随机更换主界面背景 实例185 磁性窗体的设计 实例186 制作鼠标穿透窗体 实例187 窗体换肤程序 8.4 窗体动画 实例188 窗体中的滚动字幕 实例189 动画显示窗体 实例190 ...
  •  实例183 使窗体背景色渐变 236  实例184 随机更换主界面背景 237  实例185 磁性窗体的设计 238  实例186 制作鼠标穿透窗体 246  实例187 窗体换肤程序 247 8.4 窗体动画 250  实例188 窗体中的滚动字幕...
  • 明日科技C#开发入门及项目实战

    热门讨论 2013-04-19 15:47:07
    实例002 统一窗体中控件的字体设置 实例003 设置程序代码行号 实例004 通过“格式”菜单布局窗体 实例005 为项目添加dll文件引用 实例006 为项目添加已有类 实例007 为项目添加第三方控件 实例008 为项目添加已有...
  • 实例002 统一窗体中控件的字体设置 3 实例003 设置程序代码行号 5 实例004 通过“格式”菜单布局窗体 6 实例005 为项目添加dll文件引用 7 实例006 为项目添加已有类 8 实例007 为项目添加第三方控件 9 实例008 为...
  • 10.1.2 主要的JavaScript实现 458 10.1.3 JavaScript对象 459 10.1.4 对象属性和方法 460 10.1.5 JavaScript事件 461 10.1.6 JavaScript程序设计 468 10.2 解决方案 469 10.2.1 ─建立脚本 469 10.2.2 ─用于不支持...

空空如也

空空如也

1 2 3 4 5 6
收藏数 101
精华内容 40
关键字:

网页设计实现字体渐变