首页 爱情文章 亲情文章 友情文章 生活随笔 校园文章 经典文章 人生哲理 励志文章 搞笑文章 心情日记
  • 爱情文章
  • 亲情文章
  • 友情文章
  • 生活随笔
  • 校园文章
  • 经典文章
  • 人生哲理
  • 励志文章
  • 搞笑文章
  • 心情日记
  • 英语文章
  • 范文大全
  • 作文大全
  • 新闻阅读
    •
    当前位置: 山茶花美文网 > 人生哲理 > 正文

    CSS3入门：由点到面 由点到面是什么意思

    时间：2018-08-11来源：山茶花美文网 本文已影响 人 山茶花美文网手机站


    CSS3入门：由点到面1

    3. DesignSwap

    DesignSwap网站里，所有文本链接都有0.2秒的悬浮过渡效果，个人头像会隐现并变为"浏览详细内容"文本链接。

    CSS3入门：由点到面2

    4. Eric E.Anderson

    译者注：该网站已改版，与原内容不符，略去

    案例二：背景裁剪

    提及text-shadow和@font-face时，background-clip属性不乏亮点。简单说来，我们获取一张图片，将文本覆盖在该图上。代码非常简单，div标签里引入bg-clip类：

    CSS3入门：由点到面3

    CSS3入门：由点到面4

    接着是CSS部分。首先，图片需要设置为背景图片。-webkit-text-fill-color属性设为transparent，-webkit-background-clip属性设为文本。

    CSS3入门：由点到面5

    查看在线案例

    参考案例

    仅仅是一个简单的实现方法，却诞生了一些有趣、创造性的案例。

    1. Trent Walton

    我自己的一个实验，结合bg-clip和@font-face的设计。

    CSS3入门：由点到面6

    CSS3入门：由点到面6

    2. Neography

    将rotate、bg-clip和@font-face综合使用的精彩案例。

    CSS3入门：由点到面7

    3. Everday Works

    我所见过的最早实现CSS文本旋转的案例之一。

    CSS3入门：由点到面8

    CSS3入门：由点到面9

    4. Panic Blog

    Panic博客对发表的文章进行了随机旋转，你可以通过刷新来观察微妙的变化。

    CSS3入门：由点到面10

    5. Sam Brown

    译者注：该网站已改版，与原内容不符，略去

    案例三：CSS变形、阴影和色值

    简单几行CSS代码就能取代以前的一些额外的图片及相关标注工作。本案例将box-shadow和RGB值与案例二中的一些变形特性相结合。首先创建4个图片文件，每张图片展示了Smashing Magazine主页的不同时期版本，并配上阴影和相关的旋转效果。

    CSS3入门：由点到面11

    HTML代码如下：

    CSS3入门：由点到面12

    通过CSS添加RGBA阴影：

    CSS3入门：由点到面13

    box-shadow属性中，头两个值分别表示了x和y方向的补偿值，这里x方向设为0，y方向设为3像素补偿。最后的数值表示阴影模糊度大小，这里设为4像素。

    RGBa也与上述类似。RGBa分别代表了红色（red）、绿色（green）、蓝色（blue）、不透明度（alpha）。案例中，RGB值为（0,0,0），不透明度为50%，即0.5。

    最后，通过CSS为每个截图添加旋转变换特效：

    CSS3入门：由点到面14

    CSS3入门：由点到面14

    查看在线案例

    参考案例

    1. Butter Label

    该网站充分利用了CSS3的相关特性。注意订阅表单处的transform和box-shadow属性。

    CSS3入门：由点到面15

    2. Hope 140

    译者注：该网站已不存在

    3. Simon Collison

    Simon Collison在他的新网站中，为每个缩略图链接都应用了RGBa和box-shadow。

    CSS3入门：由点到面16

    案例四：CSS3动画

    如果你想挑找自我，尝试一些新的CSS3特性，那么CSS3关键帧动画（keyframe animation）值得尝试。本案例，我们主要是让一张圆形的png图片沿着矩形边沿轨迹运动。首先在div类里引入原型图片：

     

    CSS3入门：由点到面17

    CSS3入门：由点到面18

    第一步，为.circle_motion类设置相关属性，包括动画名赋值：

    CSS3入门：由点到面19

    1. 作就是设定关键帧值，简单起见，我将8秒的动画分成了四个部分：
    • CSS3入门：由点到面 由点到面是什么意思 相关文章:
    • 爱情文章
    • 亲情文章
    • 友情文章
    • 随笔
    • 哲理
    • 励志
    • 范文大全

    最新文章

    热点文章

    推荐访问

    军训远足心得体会 军训爬山心得体会 大学军训徒步拉练感想 军训徒步作文 军训徒步10公里感想 军训徒步心得体会 5分钟演讲中秋节节日 中秋一分钟演讲 中秋节演讲稿4分钟 中秋节演讲稿一分钟 中秋节演讲稿五分钟 3-5分钟 中秋节短篇演讲稿 中秋节演讲稿两分钟 中秋节的演讲稿3分钟 关于中秋节的演讲稿三分钟 孩子体验军训的心得 参加孩子军训活动的感受与收获 家长对孩子军训后的收获和感悟 小孩军训的收获与感悟 学生军训的收获与感悟 孩子军训成长过程家长感悟 孩子军训感悟 孩子军训心得体会 孩子军训的收获与感悟 兵役前训练心得体会 部队当兵的心得 新兵役前教育训练心得体会 预备役军训心得体会 新兵军训感悟

    本文CSS3入门：由点到面 由点到面是什么意思由山茶花美文网整理提供，版权归原作者、原出处所有。

    Copyright © 山茶花美文网 All Rights Reserved.