精华内容
下载资源
问答
  • 视觉设计

    2012-11-02 09:26:52
     不久前,我们(腾讯用户研究与体验设计部,简称CDC)接到并开始筹划启动这样一个全新的天气类设计项目,此前我们曾不止一次的进行过天气类的设计,其中也包括现在广为流传的QQ上的天气类图标。而今次的整个过程因...

    前言
      如何使一个应用在众多同类竞品中脱颖而出?作为全球最普遍的应用之一:天气,是为大家所再熟悉不过的了,今天和大家一起聊聊我们如何设计并完成这个与众不同的天气应用。

      不久前,我们(腾讯用户研究与体验设计部,简称CDC)接到并开始筹划启动这样一个全新的天气类设计项目,此前我们曾不止一次的进行过天气类的设计,其中也包括现在广为流传的QQ上的天气类图标。而今次的整个过程因采用了一站式的设计流程(既体验设计阶段集成高保真原型/前端实现输出),使得我们拥有了更自由的创新与细节实现的机会,对于我们这样一个以创新与设计见长的团队来讲,这样的机会更能够几乎完美的将设计与体验实现至极致。

      于是在过去的六周时间里,整个团队通过非常高效的沟通与迭代使得设计不断与原型进行着融合,最终成为成品。

    目录

           设计目标

           设计实现

           天气的设计

           SKYBOX天穹系统

           OpenGL+XPlayer引擎与设计的融合

     

    设计目标:创造体验峰值

      人们是感性的,我们对一项事物的体验之后,所能记住的就只是在高峰时与结束时的体验(峰终理论)。而在过程中好与不好体验的比重、好与不好体验的时间长短,对记忆差不多没有影响。

      想要让用户对小Q天气产生深刻的记忆,就要在主要任务中打造一个正面情感的峰值。看天气预报核心目的就是看天气状态和温度。所以,我们决定在天气状态上,模拟真实的大自然场景,做动态天气,来为用户营造愉悦的产品体验。其他基本任务,达到使用方便舒适就好,在界面排布上也为突出动态天气信息。

      如下图所示,我们预设了重中之重的峰值点——动态天气:

      【图1】体验峰值

     

    设计实现:透过窗户看真实世界

      基于创造体验峰值的设计目标,在明确气象信息的前提下设计动态天气给予用户更强的视觉冲击,从而更真实的还原当前的气候环境,而在用户虚拟环境的因素考虑中,我们希望传达给用户的隐喻信息并非在烈日当空的骄阳或大雨滂沱的雨地里,而是在室内,透过桌前或天花板的玻璃窗观看到外界的气象变化;在这个环境的基础上,配合设计目标,我们确定了将明确的展示信息打在玻璃上使之成为整个环境的第一层、而玻璃介质的设计为第二层,考虑到玻璃为透明介质,因此设计中增加了一部分光线的漫反射,目前的漫反射考虑了一些美观因素取消了一些不必要的物体投影,否则用3D软件模拟出的漫反射效果将会较大的扰乱玻璃窗后的主体世界过于喧宾夺主;玻璃窗的背后,则是一个真实的气象环境模拟,也是最花费设计的一项工作。

           

      【图2】天气应用的设计实现,上图中的环境为第一版的晴天,但因颜色与动画效果等原因未能收录至第一版的天气包中,我们也逐渐意识到设计是一个实践与动态呈现的过程,静态的画面再优雅但呈现出来就可能完全不是那么一回事,下面我们来回顾一下几个最折腾的天气设计的过程。

     

    天气的设计

      【图3】构图上,我们慢慢明确了从散点式,水平式到焦点式的过度,这个有助于平衡左边的文字区域,也使焦点集中在某一个物体中。从而有机会可以虚化画面其他部分,使画面的变化更多。画面更加平衡。

     

      【图4】色彩上,整个小Q天气使用的颜色会偏冷色调。除沙尘暴天气以外,基本上都在蓝灰色调上,原因在于取景主要以天空为主,以自然景色为主。虽然都是在蓝色调上徘徊,但也少范围地在冷色调的基础上增加了一些暖色作为点缀,如在蓝色的阴天里加入暖黄的光,以减弱冷色系给人带来的冰冷感。

     

      【图5】雾天是我们第一个尝试的天气,也是探索性最强的一个。取景造型上,可以看到从早期设计的乡村街道到高楼大厦,从铺满霞光的马路到弥漫着中国风的河道。设计过程中,我们都做了多番的对比和校正。最后使用了灯塔这个比较有代表性的元素。一来方便于聚焦视觉焦点。另外在冷色系里面添加黄色的暖光旨在增加温暖感。如大雾天的季节,总是接二连三的湿气弥漫,温度虽可能不低,但给人的感觉是阴冷的。在这个时候的场景取色上增加暖光,感觉将是较舒适的。

     

      【图6】上半图为晴天的向光的天气展示,下半图为背光的天气。虽然有太阳的图片更加直观地感受到天晴的氛围。但是由于一般情况,人眼被太阳直射都会感觉到不适。而背向阳光观察事物的时候却是清晰、舒适,因此下半图的设计我们强调的是给人愉悦的感觉,在一轮反复验证之后,下图的方案被采用,并且也很快在用户的反馈中得到了肯定的声音。

     

      【图7】在运动之中取巧,虽然动画引擎非常强大,提供了包括skybox等多种的运动模式,但是我们运用得最多的仍是平移。许多设计都是基于平移的基础上进行的。原因在于一个图片在X和Y轴上的平移,占用的机器性能是最少的。

     

    SKYBOX天穹

      这个设计的灵感来源于广角的镜头拍摄效果以及当前非常流行的FPS(First Person Shooting)第一人称视角射击游戏,其技术也借鉴了FPS的核心实现,从而创造出更真实流动的天空效果,配合不同的气象现象以及时间变化,我们希望这是整个设计中最流光溢彩的亮点。

       【图8】SKYBOX天穹的设计有很强的应用场景,甚至我们可以将SOSO全景的资源从网络上调用进来呈现该城市的地标建筑,这个疯狂的想法还在实现中;上图取自正在设计中的第二版高清皮肤。

     

    OpenGL+XPlayer引擎与设计的融合

      “最逼真的效果应是拍摄一段视频并将之剪辑播放“,设计之初大家都如是认为,但与逼真的效果同样需要考量的是用户的机器硬件配置:任何一台PC设备,在播放视频时的消耗都是非常大的,我们并不希望摧毁用户的主机;同时,与iPhone等智能终端不同,Window基于其多进程的理念,因此其上的产品体验大都为非独占式的(大型游戏除外),也就是您几乎不可能只在WINDOWS下只运行天气这一个程序;除此以外,如果大量引入视频,软件的尺寸则会变得异常庞大,而产品在1M左右的预想也变为不可能,最终我们坚决的放弃了这个念头。

      OpenGL作为当今主流的图形API之一,成为我们所采用的3D部分引擎展现接口,不仅仅因为其高性能的视觉图形渲染特性,还有其非常好的跨平台特点;而自行研发XPlayer的框架则是为了适应Windows系统上进行更加平滑的视觉渲染所构建的动画引擎,通过这套引擎规则,我们可以让设计师更加自由的创建并模拟天气世界的各种物体,比如不断升腾的雾气。

      【图9】雾是在中国大多数城市比较罕见的天气现象,而对于雾的效果模拟也是设计团队最早进行的尝试,我们通过对大量真实雾天的图片与视频的观察最终完成了雾的模拟;

      雨雪天气在众多自然界气候现象里非常普遍,但因其随机性较难模拟,通过对随机粒子的贴图与视角转换,我们分别实现了从天窗降落的雨滴以及平铺的雪花效果的模拟,当然,我们也在脚本过程中加入了风的随机因素来更好的展现该粒子自然的效果;

     

    结语
      最后,贴上本文的作者们,他们也是天气APP的设计与开发与用户研究人员,感谢你们在这6周里的创造!
      接下来我们希望会有更多的机会为未来的创新做筹划,请大家给与我们您的宝贵意见,我们将尽可能的纳入未来的产品体验中去。

       内含小Q天气的小Q书桌2.4Beta2版下载地址:http://dl_dir2.qq.com/invc/xfspeed/qdesk/versetup/QDeskSetup_24_1246.exe

    展开全文
  • 会议视觉设计

    2020-12-17 14:17:48
    会议视觉设计以挖掘自身潜藏的能力为核心,致力于为你提供最实用的会议视觉设计,赶快来下载使用吧!PS:...该文档为会议视觉设计,是一份很不错的参考资料,具有较高参考价值,感兴趣的可以下载看看
  • 视觉设计常见误解

    2021-03-03 02:06:02
    最近,我有机会研究对视觉设计作用的常见误解,这些误解仍然盛行于行政主管、产品主管,工程经理和市场专家中。设计团队成员如何说明这些认识是错误的?又该如何向同事和老板展示视觉设计真相?视觉设计师在特定产品...
  • APP视觉设计方案

    2018-06-15 09:47:36
    APP视觉设计方案APP视觉设计方案APP视觉设计方案APP视觉设计方案
  • 在整个产品设计的过程中,视觉设计与交互设计的“工序”非常紧密,两者关系也是相辅相成,互相影响。而视觉界面作为最直接与用户交流的层面,如何把交互设计以良好表现形态展现给用户,这里主要集中探讨视觉在提升...
  • 视觉设计与交互设计 在整个产品设计的过程中视觉设计与交互设计的工序非常紧密两者 关系也是相辅相成互相影响而视觉界面作为最直接与用户交流的层面如何 把交互设计以良好表现形态展现给用户这里主要集中探讨视觉在...
  • 本综合指南将涵盖视觉设计原理的基础知识,并通过大量插图进行演示,以加深您的理解。 无论您是经验丰富的专业人员,还是Web设计领域的新手,学习扎实的基础知识都将极大地帮助您提高设计工作的质量。 这篇非常...

    视觉设计师跟平面设计

    本综合指南将涵盖视觉设计原理的基础知识,并通过大量插图进行演示,以加深您的理解。 无论您是经验丰富的专业人员,还是Web设计领域的新手,学习扎实的基础知识都将极大地帮助您提高设计工作的质量。

    这篇非常全面的文章将充当“视觉设计原理一站式服务”,并为您提供入门所需的一切。

    主题

    我们将在本指南中涵盖很多内容,包括以下原则:

    • 统一
    • 对准
    • 延续性
    • 重点
    • 图地面关系
    • 层次结构
    • 一致性
    • 相似
    • 空格
    • 平衡
    • 接近
    • 关闭

    什么是视觉设计?

    视觉设计可以帮助您传达针对受众的信息。 设计就是沟通; 通过视觉设计,您可以与观众交流。 您的“单词”或您的曲目包括形状,文本,符号,图像,空白,纹理,颜色甚至运动(动画或隐含运动)。 您的目标是成为一个指导用户,指导用户进行设计,将他们引向您希望他们去的地方(以及最适合他们的地方!)。 良好的UI(用户界面)将认真考虑此问题并提供适当的解决方案。

    在下面,您将找到七个设计原则和一本应注意的有用的格式塔原则。 应该将它们作为指导方针,而不是一成不变,并帮助您做出能够提高凝聚力和质量的决策。

    人际关系

    一个共同的主题将引导我们完成我们今天谈论的所有原则:关系。 良好的视觉设计源于在工作中成功创建独特的关系。 但是请记住,以下内容相对容易学习和理解,但是需要反复练习才能将各个部分放在一起并获得成功创建这些关系的结果。

    格式塔

    我们列出的许多原则(例如“邻近性”和“图基关系”)可以归类为“ 格式塔原则 ”。 这些法律着重于我们作为旁观者如何感知整体上较小部分的总和。 我们如何寻找模式以及我们已经提到过的关系。 与其他视觉设计概念类似,它们可以应用于印刷,网络,视频和摄影。

    就是说,让我们从我们的第一个视觉设计原理开始!

    统一

    设计作为一个有凝聚力的整体最有效,旨在将所有元素放在一起时实现统一。 尝试建立统一的结构。 接近,对齐,连续和重复可以帮助实现元素之间的感知结合。 这也可以帮助您将难题分开,而无需使用其他边框或其他设计元素。 作为观众,我们在看新事物时首先要了解整体结构。

    Dropbox很好地利用了本书中的每种设计原理,可以正确地完成许多事情。 “关于”页面是团结的一个很好的例子。 请注意,仅使用页面上的几个元素即可轻松实现视觉上的统一。 他们甚至可能会失去边界,而且仍然有效。

    Unity需要稳步建立,这不会立即发生。 将其视为宏观和微观统一的结合; 当您建立整体统一印象时,较小的元素也需要传达凝聚力。

    GitHub在建立统一性方面也做得很好。 像这样的内容丰富的页面中的所有小注意事项加起来是一个一致的整体,其中所有部分都组合在一起,并且没有任何负面影响。

    团结和凝聚力使观众更加舒适。 免费的副产品是建立信任并了解用户应如何遵循内容。 如果没有阻碍用户注意力的障碍,那么用户体验将更加顺畅。

    上面的插图是出色运用统一原则的另一个示例。 显示集成列表的块无需其他即可建立统一性。

    对准

    对齐可减少视觉混乱。 想一想凌乱的办公桌与有条理的办公桌。 即使您喜欢看起来富于创意的凌乱办公桌,听众或不熟悉办公桌的客户也会喜欢混乱的外观。 如果可以通过对齐方式建立某种流程,则导航和查找相关信息会更容易。 副作用是,层次结构(稍后将要介绍的内容)更容易建立,而元素不会在各处浮动。

    Dropbox帮助中心的屏幕截图显示了使用清晰的网格来正确对齐元素的喜好。

    themanyfacesof.com上有一个小型的Burt Reynolds主题网站,其中有很多实例可以很好地说明实际情况。 对齐方式非常微妙,主要是通过声音排版和清晰的网格实现的,并且偶尔会巧妙地打破对齐方式。

    Dropbox功能列表是另一个值得研究的示例。 简单,简单,有效的设计工作,可使用对齐方式来最大程度地组织内容。

    延续性

    视觉对齐与格式塔延续的原则紧密结合。 当我们覆盖本系列的网格时,我们将研究更多如何在工作中使用它。 遵循共同方向的对象(例如,通过相互对齐)会给人留下比缺少该准则的元素彼此更相关的印象。 遵循这些有组织的内容行会在布局中创建顺序和流程。

    LOL Colors是对齐和延续的一个很好的例子。 甚至不使用分隔边框,您就可以清楚地看到工作中的网格,并且颜色滴的形式意味着方向继续沿页面向下延伸。

    在宏观级别,您应该努力使彼此相关的事物对齐并沿着共同的边缘放置它们。 这样,元素在整体构图中更容易流动,并让用户轻松导航。 这种视觉联系可以帮助在大小元素之间形成整体统一。 这就像一个看不见的边距,将设计中的主要部分结合在一起,使眼睛几乎没有理由停止视觉上的打ic。

    可以沿着边缘对齐对象,但是可以沿着通常不太清晰定义的中心轴对齐对象。 设计网页时,通过边缘对齐内容绝对是您的头等大事。 中心对齐可用于强调特定要素或行动号召。

    重点

    重点在于联络点。 您拥有的越少,他们的强调就越强。 这里的关键是不要使所有内容都显得重要-如果强调所有内容,那么什么都不会伸出来,最终您会得到噪音。 我敢肯定,您看到过忽略该原理的网站,到处都是石膏色的时髦彩色纽扣。 留下令人讨厌的味道,不是吗? 这就是缺乏重点可以留下的结果。 更重要的是,滥用强调会混淆层次结构。

    您通常选择的工具是可疑的,但是大小和颜色可能是最有效的强调方法。

    Dropbox通过强调使用在突出显示用户应该执行的操作方面做得很好。 在视觉上,没有任何障碍阻碍用户专注于注册。 最强调的是蓝色按钮,这些按钮在视口中的其余部分清晰可见。 这种设计具有良好的视觉平衡-如果只用一个蓝色按钮,效果会更好。

    特定视口中的一个或两个强调元素应足以引导用户注意页面上最重要的元素。 确定哪些元素可能比听起来困难。 问问自己,什么是至关重要的,它首先需要吸引用户的注意力。 做出明智的选择!

    在这种设计中,对产品的重视非常出色。 描述和背景都没有以任何方式阻碍Orée木制键盘的强调。 美丽! 对称在这里也很好地工作。

    关于HTC如何展示VIVE,没有太多要说的了。 尽力而为。 像这样的好设计肯定可以卖。

    Invision的Craft有一个引人注目的登录页面,其中电子邮件地址的输入字段特别强调。 在此页面上很难迷路。 产品名称也很有效。 背景和前景之间的区别特别熟练且有趣。

    图地面关系

    该原理非常强大且非常基础,因此您应该尽早掌握它。 在进行设计时,您应该经常问自己一个简单的问题:哪些元素在后台,哪些元素在前台?

    在此示例中,您可以看到内容和要采取操作的按钮从背景中清晰地突出出来。 明确区分对于发挥用户的注意力非常重要。 在这里,线条有些模糊和有趣,但仍然具有非常明显的图形背景区别。

    当我们的早期祖先忙于狩猎和采集时,辨别眼前的威胁或优势通常是至关重要的。 快速将事物与背景“噪声”相区别似乎仍然是我们“生存”过程的一部分。 想象一下丛林中灌木丛后面的老虎,而不是地平线上的雨。 从神经学上讲,这种视觉生存策略已经留下了深刻的烙印,以至于我们不太可能改变这种简单的感知机制。 对于数字用户来说,这听起来可能很有趣,而且大多已经过时了,但是知道这一点后,就可以更轻松地决定如何为用户强调重要信息,以及如何在后台“隐藏”无关紧要的细节。

    在这里,我们有一个非常突出的背景图像,吸引了很多注意力-它很有用,因为它以人际关系的形式传达了情感。 尽管如此,采取行动的按钮还是巧妙地放置了下来,它的颜色将其带到了前台。

    另一个问题可能是我们的眼睛和大脑不能同时快速处理大量信息,因此导致我们需要首先关注的重点。 了解这一点将帮助您更有效地放置设计难题。

    此示例运行良好,透视图提供了背景和前景之间的区别。 就我个人而言,我希望看到桌子末端的红色按钮-线条自然吸引了人们的眼球。

    新型Samsung Gear 360的示例很好。 背景和前景可以很好地协同工作。 有一个明显的区别,背景使相机优雅地突出在前景中。 相当聪明和好玩。

    以下是有关道路的良好重点和图基关系的更多示例:

    层次结构

    层次结构就是分配视觉上的重要性。 表兄强调减少视觉混乱。 这是一个宏观指南,用于首先关注什么以及如何遵循视觉上的,潜意识的面包屑,例如讲述用户在浏览网站内容时可以坚持的视觉故事。 将设计元素视为“重要层次”,需要对其进行有效安排。 仅强调几个部分,您就可以用手轻轻地抓住观众,并按预期在整个站点中移动观众。

    Reddit索引页面的此屏幕截图可能不是精心设计的最佳示例-特别是在建立清晰而牢固的层次结构方面。 我认为,Reddit是网站与设计成功与否并不紧密相关的情况之一。 我的意思是说,它杂乱无章,但并不需要很多东西来建立更清晰的视觉层次。

    如前所述,您不希望所有事物都显得同样重要。 如果是这种情况,您的观众将很难消化您的内容。 相反,请创建各种重要性级别,以强调作品的整体结构。 一般而言,一种策略是:规模越大,重要性越大。 一旦通过大小和间距实现了基本层次结构,就可以为混合添加色彩,从而有助于进一步强调某些元素。 通过从颜色开始进行反向工作,您将使工作不必要地困难,或者至少效率降低。

    我喜欢GitHub上的“ 浏览”页面如何处理排版以创建微妙而清晰的层次结构。 眼睛扫描并向下跟踪内容非常容易。 颜色也可以很好地用于创建视觉锚点,它们的搜索结果也是如此:

    清晰的层次结构可以Swift将优秀设计与中等设计解决方案区分开。

    上面的屏幕截图是Dropbox熟练的设计师如何执行工作的另一个很好的例子。 有更多的内容可以使用,但是在引导文本的过程中仍然是成功的。

    一致性

    如果您遵循到目前为止讨论的原则,但是缺乏一致性,则将削弱应用其他设计原则时所取得的任何进步。 一致性有助于创建您想要的设计,网站或外观的思维模型。 相似的项目在外观上应相似。 同样,一旦您开始对设计进行编码,就可以使设计更加干燥(不要重复自己)。

    上面的示例显示了各个级别的一致性。 插图的样式和大小一致。 按钮看起来一样。 所有三列的视觉重量均一且对齐。 每列共享相同的内部结构。 总的来说,这是简单,考虑和有效的。

    一致性设定了一个期望,即接下来遇到的任何事情都会看起来相似,从而减少了认知处理。

    避免使用大量不同的字体和字体大小是保持一致性的最重要途径之一。 在一个环境中,用户习惯于阅读一种特定的样式或字体,因此您不应打扰。

    您最近是否看到过使用大量不同按钮的站点,而不是一些会产生更好一致性的按钮? 我打赌你有,我打赌你不喜欢它。 下面的按钮属于一个站点的界面清单。 如下所示,您可以朝错误的方向走多远,这令人惊讶。

    当类似的元素具有相同的美感时,系统的可用性可以大大提高。 为什么要让用户学习多种视觉语言来浏览页面? 没有任何意义!

    相似

    您猜对了,“一致性”源自此格式塔原则,该原则指出外观相似的事物会创建一种可在设计中使用的统一形式。 具有相似特征的元素似乎彼此之间的关联性更高-比不相似的事物关联性更高。

    相似的元素暗示着一种关系,在它们与周围的其他元素之间形成强烈的对比。

    这是Dribbble上的用户列表,显示设计师及其作品。 这是一个很好的例子,说明相似性如何支持一系列不同的设计元素来创建关系,从而显得更加统一。 通过缩略图的水平接近程度和每个重复行的相似性,建议在页面上进行移动。

    Reddit不能很好地应用相似性,从而无法实现很高的一致性。 该帖子列表包含长标题和短标题,有些标题缩进,有些则没有。 看起来很令人困惑,但是并不需要太多工作来通过相似性产生更多的凝聚力。

    您可以使用common来实现元素之间的相似性:

    • 颜色
    • 形成
    • 尺寸
    • 形状
    • 质地
    • 方向
    • 尺寸
    • 大小一致性

    所有这些都可以暗示关系。 颜色和形状是强调这些关系的非常有力的例子。 尽管相似性是一种强大的武器,但它却是增强层次结构的一种工具,而不是一个可以轻易自行创建的工具。

    GitHub上流行的开源回购清单确实很强大。 非常简单,易于阅读和消化,并且通过重复相似性具有内聚性。 我成功地创建了不需要内容的离散内容块:

    我们作为用户可以创建的微妙的心理图不可低估。 它有助于建立组织内容的模式。 混沌处于频谱的另一端,而不是我们作为设计师所追求的目标。 想象一下一个文本页面,其中的字母不是逐行显示的,而是随机地围绕页面浮动的。 不是很吸引人,是吗?

    这是GitHub上“ 浏览”部分的登录页面。 在这里,更一致地使用尺寸和外观会更有效。 实际上,增加某些元素的大小并不是“有意识地”突出某些类别的“主旨”决定。 它是随机的。 缺乏充分发挥尺寸的理由,依靠一致性会增强团结。 另外,您有两种卡片,一种仅带有类别的标题,另一种带有附加的描述性文字。 最重要的是,所有三个变体的悬停效果都不同。 所有这些都引起视觉上的兴趣,但是页面不如下面同一部分的展示列表那么强大:

    在功能方面,外观相似的元素应为用户完成相似的任务。 当用户不必要地为外观相似的界面元素重新学习不同的行为时,就会感到沮丧。 相似性有助于管理期望,这本身就是您军火库中非常强大的工具。

    空白空间

    什么才算是“空白”? 合成中元素之间的空白是未标记的,负的或空白的空间。 它有效地构成内容。 宏空白用于设计中的主要部分,从而产生更明显的效果。 另一方面,微空白空间用于显示细节,例如印刷元素的所有间距。

    在这里,对空白空间的充分利用使对新产品的强调更加优雅。 有两个原则可以成功发挥作用,但是空白在使此设计如此出色地发挥着最重要的作用。

    看一下上面的例子。 当我们调查用于在Foundersuite上建立空白区域的大小时,我们会看到所使用的度量值相互影响。 这些常见的度量会创建“活动的”空白空间,故意引起注意。 让我们看下面:

    “活动”空白是一个模糊的描述,但是当空白显示与其周围元素的关系时,我们会使用它。 活动空格有助于强调内容的组成或结构,因此对层次结构产生积极影响。 “被动”空格不是那么令人困惑,但同等重要,因为它可以创建少量的呼吸空间。 但是,过多的非活动空白空间,与周围元素缺乏联系,会使您的工作显得沉思不堪,甚至混乱。

    白色空间在ionic.io上的出色应用。 在这里,大小以及宏和微空白之间的关系很好。

    每天,当您阅读文本时,都无需过多考虑即可看到空白的有用应用。 单词,句子和段落之间的空间都是空白,可以帮助我们直观地理解所写字母的含义。 它通过内容引导眼睛,并为我们提供有效移动文本的提示。 宏观和微观空白都使眼睛有机会休息并支持整体平衡。

    请记住,我们旨在通过空间实现差异化。 这使我们可以减少其他元素来创造差异。 如果您喜欢自己喜欢的网页设计的“干净”外观,那么有意识地使用空白很有可能是其主要组成部分。 没有什么能比适当使用空白空间更好地表达优雅和精致了。

    平衡

    平衡就是保持视觉重量,视觉平衡。 我们本能地喜欢看围绕垂直轴平衡的事物,这是具有双目视觉的一部分。 在垂直轴上保持平衡是一个安全的模式-非常正式和有条理。 如果您可以熟练地打破这种平衡,则可能会造成一些紧张或意外,也许是为了突出显示构图的某些方面,那么您的设计可能会显得更加动态和有趣。

    Blockhead适配器的站点上有一些很好的示例,说明了它们如何巧妙地将平衡应用于其设计。 上方的右图及其所附文字可实现良好的光学平衡。 下图也是如此。 平衡,层次结构,空白和强调都得到很好的应用。

    对称平衡并不难实现,并且是制作视觉上吸引人的合成物的安全方法。 非对称方法的刚性或静态性较小,但希望能够成功完成更多的Craft.io。 对于非对称平衡,我们需要努力使各个非镜像部分保持可感知的平衡。

    Dropbox登陆页面充分利用了整个地方的视觉平衡。 您可以看到图像和文本达到了很好的不对称平衡,尤其是参考了周围的其他部分。 而且不要让我开始了解他们如何使用锦鲤来暗示响应能力和多设备可操作性。 天才!

    当您在视觉上平衡时,所有设计工具都可以使用:大小,颜色,位置,形状,重复,纹理,它们都可以单独影响感知的重量并相互抵消。

    不对称的平衡可以被认为更友好,并传达出看起来更加有趣和动态的设计。 并不是说我是Dropbox的忠实粉丝,而是在设计方面,Dropbox网站巧妙地利用了我们今天讨论的每种设计原则,获得了令人赞叹的整体质量。

    接近

    彼此相对接近放置的设计元素自然会形成隐含关系。 良好地处理邻近性会对您的设计产生积极影响,使您可以省去实现视觉统一所需的其他元素,例如边界。 再次,团结是此的核心,到目前为止我们讨论的所有工具都可以在不同程度上用于实现这一目标。

    YoGrow的网站上,您可以了解如何使用接近度。 我建议他们本来可以使用较少的背景颜色和边框,而是让接近度发挥作用。

    在下面的示例中(我们之前已经看到过),隐含性就是暗示这些调色板之间的关系所需要的全部。 可以省略边框或背景色,从而产生优雅的外观。

    关闭

    闭合是一种合成技术,用户可以将设计的空白(您故意植入的空白)填满。 这是一种建议,一种错觉,使设计师想要看到的图像更加完整。 封闭是允许读者解释漫画的基础,并建议框架之间的装订线发生了什么。 例如,闭包也是使我们能够解释徽标中负空格的原因。

    寻求模式的人脑通过将缺失的部分填充为熟悉的形式来进行操作。

    以GitHub为例。 他们在页面上使用的徽标是一个黑色圆圈,在其中充满了对Octocat的印象。 即使尺寸很小,您也可以轻松识别它们的吉祥物,并将其放置在导航栏中,可以充当看起来朴实无华且不受约束的视觉锚点。

    那么,所有这些如何与Web设计界面联系在一起? 好吧,坦率地说,它很少这样做。 如果您设计图标和徽标,则更有可能遇到这个概念。

    最后的想法

    我们在这里介绍了很多内容! 从现在开始,每当您查看任何设计或艺术品时,都应尝试考虑这些原则。 尝试了解创作者是否考虑了视觉关系,并积极地和建设性地应用它们。 请记住,为了有效利用这些想法,您需要练习! 在这样做的同时,这些原则肯定会帮助您享受更多的设计乐趣。

    翻译自: https://webdesign.tutsplus.com/articles/a-comprehensive-introduction-to-visual-design--cms-26224

    视觉设计师跟平面设计

    展开全文
  • 美国视觉设计

    2013-05-02 12:25:55
    美国视觉设计
  • 情绪板携手视觉设计

    2021-03-04 08:29:39
    互联网产品的视觉设计存在着很多不确定性,譬如:你按照“典雅”去设计的,他却觉得是“清新”?——评判的主观性&看到图画才明白有时不喜欢某些设计作品,却无法立即说出原因——潜意识开始要求一种风格,很快变卦...
  • Android交互视觉设计规范Android交互视觉设计规范Android交互视觉设计规范
  • 网页视觉设计案例教程》源于视觉传达专业与计算机专业教学一线教师们多年的随堂讲义和授课心得,全面系统地介绍了网页视觉设计概述,网页视觉设计要素及网页应用要素的构成,CI网页中企业形象识别,网页美工设计制作...
  • 版式设计原理-视觉设计,广告杂志设计排版原理知识分享
  • 美国视觉设计学院用书
  • 1.3 应用视觉设计

    2021-03-10 01:20:45
    应用视觉设计介绍 Introduction to the Applied Visual Design Challenges 视觉设计在 Web 开发中是一个非常广泛的话题。 它结合了排版、色彩理论、图形、动画和页面布局等。 如何定义什么是好设计呢? 见仁见智,...

    应用视觉设计介绍
    Introduction to the Applied Visual Design Challenges
    视觉设计在 Web 开发中是一个非常广泛的话题。

    它结合了排版、色彩理论、图形、动画和页面布局等。

    如何定义什么是好设计呢?

    见仁见智,从来没有一个标准的答案,但好设计背后都隐藏着相同的设计原则,这些原则在很多设计方面的书籍中都有所体现。

    在日常生活中,我们每天接触着大量的 Web 内容。

    这些内容的视觉设计会影响页面的呈现和保证用户体验。

    在 Web 开发中,HTML 为页面的内容提供结构和语义,CSS 控制页面的布局和外观。

    本章介绍了开发人员如何使用一些基础工具来创建自己的视觉设计。

    1.3 应用视觉设计

    使用 text-align 属性创建视觉平衡

    这部分课程主要关于应用视觉设计。开始的挑战展示了一些核心的原则,代码基于一个指定的卡片布局。

    web 内容大部分都是文本。CSS 里面的text-align属性可以控制文本的对齐方式。

    text-align: justify;可以让除最后一行之外的文字两端对齐,即每行的左右两端都紧贴行的边缘。

    text-align: center;可以让文本居中对齐。

    text-align: right;可以让文本右对齐。

    text-align: left;是text-align的默认值,它可以让文本左对齐。

    在这里插入图片描述

    居中对齐h4标签文本,文本内容为 “Google”。两端对齐段落标签文本,文本介绍了 Google 的创立。

    <style>
      h4 {
        text-align: center;
      }
      p {
        text-align: justify;
      }
      .links {
        margin-right: 20px;
        
      }
      .fullCard {
        border: 1px solid #ccc;
        border-radius: 5px;
        margin: 10px 5px;
        padding: 4px;
      }
      .cardContent {
        padding: 10px;
      }
    </style>
    <div class="fullCard">
      <div class="cardContent">
        <div class="cardText">
          <h4>Google</h4>
          <p>Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。</p>
        </div>
        <div class="cardLinks">
          <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a>
          <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
        </div>
      </div>
    </div>
    

    在这里插入图片描述

    使用 width 属性调整元素的宽度

    你可以使用 CSS 里面的width属性来指定元素的宽度。属性值可以是相对单位(比如 em),绝对单位(比如 px),或者包含块(父元素)宽度的百分比。下面这个例子把图片的宽度设置为 220px:

    img {
    width: 220px;
    }

    在这里插入图片描述

    给卡片添加width属性,设置它的宽度为 245px。使用fullCard class 来选择元素。

    <style>
      h4 {
        text-align: center;
      }
      p {
        text-align: justify;
      }
      .links {
        margin-right: 20px;
        text-align: left;
      }
      .fullCard {
        
        border: 1px solid #ccc;
        border-radius: 5px;
        margin: 10px 5px;
        padding: 4px;
        width: 245px;
      }
      .cardContent {
        padding: 10px;
      }
    </style>
    <div class="fullCard">
      <div class="cardContent">
        <div class="cardText">
          <h4>Google</h4>
          <p>Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。</p>
        </div>
        <div class="cardLinks">
          <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a>
          <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
        </div>
      </div>
    </div>
    

    在这里插入图片描述

    使用 height 属性调整元素的高度

    和width属性类似,你可以使用 CSS 里面的height属性来指定元素的高度。下面这个例子把图片的高度设置为 20px:

    img {
    height: 20px;
    }

    在这里插入图片描述

    给h4标签添加height属性并设置值为 25px。

    <style>
      h4 {
        text-align: center;
        height: 25px;
      }
      p {
        text-align: justify;
      }
      .links {
        margin-right: 20px;
        text-align: left;
      }
      .fullCard {
        width: 245px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin: 10px 5px;
        padding: 4px;
      }
      .cardContent {
        padding: 10px;
      }
    </style>
    <div class="fullCard">
      <div class="cardContent">
        <div class="cardText">
          <h4>Google</h4>
          <p>Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。</p>
        </div>
        <div class="cardLinks">
          <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a>
          <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
        </div>
      </div>
    </div>
    

    在这里插入图片描述

    使用 strong 标签加粗文本

    术语:Strong => s => 加粗。

    你可以使用strong标签来加粗文字。添加了strong标签后,浏览器会自动给元素应用font-weight:bold;。

    在这里插入图片描述

    在p标签里的 “斯坦福大学” 外面添加strong标签。

    <style>
      h4 {
        text-align: center;
        height: 25px;
      }
      p {
        text-align: justify;
      }
      .links {
        text-align: left;
        color: black;
      }
      .fullCard {
        width: 245px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin: 10px 5px;
        padding: 4px;
      }
      .cardContent {
        padding: 10px;
      }
      .cardText {
        margin-bottom: 30px;
      }
    </style>
    <div class="fullCard">
      <div class="cardContent">
        <div class="cardText">
          <h4>Google</h4>
          <p>Google 由在<strong>斯坦福大学</strong>攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。</p>
        </div>
        <div class="cardLinks">
          <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a><br><br>
          <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
        </div>
      </div>
    </div>
    

    在这里插入图片描述

    使用 u 标签给文本添加下划线

    术语:Underline => u => 下划线。

    你可以使用u标签来给文字添加下划线。添加了u标签后,浏览器会自动给元素应用text-decoration: underline;。

    在这里插入图片描述

    给 “理工博士” 添加u标签,不要给整个 class 为cardText的父div添加。
    注意:锚点默认给文本添加下划线,如果u标签的下划线和页面的锚点混淆,请避免使用它。

    <style>
      h4 {
        text-align: center;
        height: 25px;
      }
      p {
        text-align: justify;
      }
      .links {
        text-align: left;
        color: black;
      }
      .fullCard {
        width: 245px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin: 10px 5px;
        padding: 4px;
      }
      .cardContent {
        padding: 10px;
      }
      .cardText {
        margin-bottom: 30px;
      }
    </style>
    <div class="fullCard">
      <div class="cardContent">
        <div class="cardText">
          <h4>Google</h4>
          <p>Google 由在<strong>斯坦福大学</strong>攻读<u>理工博士</u>的拉里·佩奇和谢尔盖·布林共同创建。</p>
        </div>
        <div class="cardLinks">
          <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a><br><br>
          <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
        </div>
      </div>
    </div>
    

    在这里插入图片描述

    使用 em 标签强调文本

    术语:emphasis => em => 强调。

    你可以使用em标签来强调文本。由于浏览器会自动给元素应用font-style: italic;,所以文本会显示为斜体。

    在这里插入图片描述

    在p标签里面嵌套em标签来强调文本。

    <style>
      h4 {
        text-align: center;
        height: 25px;
      }
      p {
        text-align: justify;
      }
      .links {
        text-align: left;
        color: black;
      }
      .fullCard {
        width: 245px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin: 10px 5px;
        padding: 4px;
      }
      .cardContent {
        padding: 10px;
      }
      .cardText {
        margin-bottom: 30px;
      }
    </style>
    <div class="fullCard">
      <div class="cardContent">
        <div class="cardText">
          <h4>Google</h4>
          <p><em>Google 由在<strong>斯坦福大学</strong>攻读<u>理工博士</u>的拉里·佩奇和谢尔盖·布林共同创建。</em></p>
        </div>
        <div class="cardLinks">
          <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a><br><br>
          <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
        </div>
      </div>
    </div>
    

    在这里插入图片描述

    使用 s 标签给文本添加删除线

    术语:Strikethrough => s => 删除线。

    你可以用s标签来给文字添加删除线,我是明晃晃的删除线,它代表着这段文字不再有效。添加了s标签后,浏览器会自动给元素应用text-decoration: line-through;。

    在这里插入图片描述

    在h4标签里的 “Google” 外添加s标签,然后在s标签外面添加单词 Alphabet,Alphabet 不要有删除线格式。

    <style>
      h4 {
        text-align: center;
        height: 25px;
      }
      p {
        text-align: justify;
      }
      .links {
        text-align: left;
        color: black;
      }
      .fullCard {
        width: 245px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin: 10px 5px;
        padding: 4px;
      }
      .cardContent {
        padding: 10px;
      }
      .cardText {
        margin-bottom: 30px;
      }
    </style>
    <div class="fullCard">
      <div class="cardContent">
        <div class="cardText">
          <h4><s>Google</s>Alphabet</h4>
          <p><em>Google 由在<strong>斯坦福大学</strong>攻读<u>理工博士</u>的拉里·佩奇和谢尔盖·布林共同创建。</em></p>
        </div>
        <div class="cardLinks">
          <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a><br><br>
          <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
        </div>
      </div>
    </div>
    

    在这里插入图片描述

    使用 hr 标签创建水平线

    术语:Horizontal Rule => hr => 水平线。

    你可以用hr标签来创建一条宽度撑满父元素的水平线。它一般用来表示文档主题的改变,在视觉上将文档分隔成几个部分。

    在这里插入图片描述

    在包含卡片标题的h4下面添加一个hr标签。
    注意
    在 HTML 里,hr是自关闭标签,所以不需要一个单独的关闭标签。

    <style>
      h4 {
        text-align: center;
        height: 25px;
      }
      p {
        text-align: justify;
      }
      .links {
        text-align: left;
        color: black;
      }
      .fullCard {
        width: 245px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin: 10px 5px;
        padding: 4px;
      }
      .cardContent {
        padding: 10px;
      }
      .cardText {
        margin-bottom: 30px;
      }
    </style>
    <div class="fullCard">
      <div class="cardContent">
        <div class="cardText">
          <h4><s>Google</s>Alphabet</h4>
          <hr>
          <p><em>Google 由在<strong>斯坦福大学</strong>攻读<u>理工博士</u>的拉里·佩奇和谢尔盖·布林共同创建。</em></p>
        </div>
        <div class="cardLinks">
          <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a><br><br>
          <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
        </div>
      </div>
    </div>
    

    在这里插入图片描述

    调整文本的背景色

    为了让页面更美观,除了设置整个页面的背景色以及文字颜色外,你还可以单独设置文字的背景色,即在文字的父元素上添加background-color属性。在本挑战里我们将使用rgba()颜色,而不是之前学到的hex编码或者rgb()颜色。

    rgba 代表:
    r = red 红色
    g = green 绿色
    b = blue 蓝色
    a = alpha 透明度
    RGB 值可以在 0 到 255 之间。alpha 值可以在 0 到 1 之间,其中 0 代表完全透明,1 代表完全不透明。rgba()非常棒,因为你可以设置颜色的透明度,这意味着你可以做出一些很漂亮的半透明效果。

    在本挑战里你将会用到这个代码background-color: rgba(45, 45, 45, 0.1)。它表示背景是黑灰色,因为设置了透明度为 0.1,所以几乎是透明的。

    在这里插入图片描述

    为了让文字更醒目,设置h4元素的background-color属性值为上面指定的rgba()。
    同时移除h4的height属性,并添加padding属性,值为 10px。

    <style>
      h4 {
        text-align: center;
        padding: 10px;
        background-color: rgba(45, 45, 45, 0.1);
        
      }
      p {
        text-align: justify;
      }
      .links {
        text-align: left;
        color: black;
      }
      .fullCard {
        width: 245px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin: 10px 5px;
        padding: 4px;
      }
      .cardContent {
        padding: 10px;
      }
      .cardText {
        margin-bottom: 30px;
      }
    </style>
    <div class="fullCard">
      <div class="cardContent">
        <div class="cardText">
          <h4>Alphabet</h4>
          <hr>
          <p><em>Google 由在<strong>斯坦福大学</strong>攻读<u>理工博士</u>的拉里·佩奇和谢尔盖·布林共同创建。</em></p>
        </div>
        <div class="cardLinks">
          <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a><br><br>
          <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
        </div>
      </div>
    </div>
    

    在这里插入图片描述

    调整标题与段落的大小

    标题(h1到h6)的文字应该比的段落的文字大,这样可以让用户更直观的看到页面的布局,同时能区别出不同元素的重要程度,更方便用户捕捉关键的信息。你可以使用font-size属性来设置元素内文字的大小。

    在这里插入图片描述

    把h4标签的font-size改成 27 像素,让标题更醒目。

    <style>
      h4 {
        text-align: center;
        background-color: rgba(45, 45, 45, 0.1);
        padding: 10px;
        font-size: 27;
        
      }
      p {
        text-align: justify;
      }
      .links {
        text-align: left;
        color: black;
      }
      .fullCard {
        width: 245px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin: 10px 5px;
        padding: 4px;
      }
      .cardContent {
        padding: 10px;
      }
      .cardText {
        margin-bottom: 30px;
      }
    </style>
    <div class="fullCard">
      <div class="cardContent">
        <div class="cardText">
          <h4>Alphabet</h4>
          <hr>
          <p><em>Google 由在<strong>斯坦福大学</strong>攻读<u>理工博士</u>的拉里·佩奇和谢尔盖·布林共同创建。</em></p>
        </div>
        <div class="cardLinks">
          <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a><br><br>
          <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
        </div>
      </div>
    </div>
    

    在这里插入图片描述

    给卡片元素添加 box-shadow

    box-shadow属性用来给元素添加阴影,该属性值是由逗号分隔的一个或多个阴影列表。

    box-shadow属性的每个阴影依次由下面这些值描述:
    offset-x阴影的水平偏移量;
    offset-y阴影的垂直偏移量;
    blur-radius模糊距离;
    spread-radius阴影尺寸;
    颜色。
    其中blur-raduis和spread-raduis是可选的。

    下面是创建了多个阴影的 CSS 例子,阴影加了模糊效果,颜色是透明度很高的黑色:

    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

    在这里插入图片描述

    现在卡片已经添加了 id thumbnail。把上面的box-shadow值赋给卡片。

    <style>
      h4 {
        text-align: center;
        background-color: rgba(45, 45, 45, 0.1);
        padding: 10px;
        font-size: 27px;
      }
      p {
        text-align: justify;
      }
      .links {
        text-align: left;
        color: black;
      }
      
      
      
      .fullCard {
        width: 245px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin: 10px 5px;
        padding: 4px;
      }
      .cardContent {
        padding: 10px;
      }
      .cardText {
        margin-bottom: 30px;
      }
      #thumbnail{
        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
      }
    </style>
    <div class="fullCard" id="thumbnail">
      <div class="cardContent">
        <div class="cardText">
          <h4>Alphabet</h4>
          <hr>
          <p><em>Google 由在<strong>斯坦福大学</strong>攻读<u>理工博士</u>的拉里·佩奇和谢尔盖·布林共同创建。</em></p>
        </div>
        <div class="cardLinks">
          <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a><br><br>
          <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
        </div>
      </div>
    </div>
    

    在这里插入图片描述

    降低元素的 opactiy

    CSS 里的opacity属性用来设置元素的透明度。

    值 1 代表完全不透明。
    值 0.5 代表半透明。
    值 0 代表完全透明。
    透明度会应用到元素内的所有内容,不论是图片,还是文本,或是背景色。

    在这里插入图片描述

    使用linksclass 选择所有的超链接并设置其opacity值为 0.7。

    <style>
      h4 {
        text-align: center;
        background-color: rgba(45, 45, 45, 0.1);
        padding: 10px;
        font-size: 27px;
      }
      p {
        text-align: justify;
      }
      .links {
        text-align: left;
        color: black;
        opacity: 0.7;
        
      }
      #thumbnail {
        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
      }
      .fullCard {
        width: 245px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin: 10px 5px;
        padding: 4px;
      }
      .cardContent {
        padding: 10px;
      }
      .cardText {
        margin-bottom: 30px;
      }
    </style>
    <div class="fullCard" id="thumbnail">
      <div class="cardContent">
        <div class="cardText">
          <h4>Alphabet</h4>
          <hr>
          <p><em>Google 由在<strong>斯坦福大学</strong>攻读<u>理工博士</u>的拉里·佩奇和谢尔盖·布林共同创建。</em></p>
        </div>
        <div class="cardLinks">
          <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a><br><br>
          <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
        </div>
      </div>
    </div>
    

    在这里插入图片描述

    使用 text-transform 属性给文本添加大写效果

    CSS 里面的text-transform属性来改变英文中字母的大小写。它通常用来统一页面里英文的显示,且无需直接改变 HTML 元素中的文本。
    下面的表格展示了text-transform的不同值对文字 “Transform me” 的影响。
    在这里插入图片描述

    在这里插入图片描述

    使用text-transform属性把h4内的英文的所有字母变成大写。

    <style>
      h4 {
        text-align: center;
        background-color: rgba(45, 45, 45, 0.1);
        padding: 10px;
        font-size: 27px;
        text-transform: uppercase;
      }
      p {
        text-align: justify;
      }
      .links {
        text-align: left;
        color: black;
        opacity: 0.7;
      }
      #thumbnail {
        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
      }
      .fullCard {
        width: 245px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin: 10px 5px;
        padding: 4px;
      }
      .cardContent {
        padding: 10px;
      }
      .cardText {
        margin-bottom: 30px;
      }
    </style>
    <div class="fullCard" id="thumbnail">
      <div class="cardContent">
        <div class="cardText">
          <h4>Alphabet</h4>
          <hr>
          <p><em>Google 由在<strong>斯坦福大学</strong>攻读<u>理工博士</u>的拉里·佩奇和谢尔盖·布林共同创建。</em></p>
        </div>
        <div class="cardLinks">
          <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a><br><br>
          <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
        </div>
      </div>
    </div>
    

    在这里插入图片描述

    设置多个标题元素的 font-size

    font-size属性用来指定元素内文字的大小。这个规则可以应用到多个元素上,合理的使用,能让页面的文字显示的错落有致。在本挑战里,你将要设置h1到h6的每个标题文字的大小。

    在这里插入图片描述

    设置h1标签的font-size为 68px。
    设置h2标签的font-size为 52px。
    设置h3标签的font-size为 40px。
    设置h4标签的font-size为 32px。
    设置h5标签的font-size为 21px。
    设置h6标签的font-size为 14px。

    <style>
     h1{
       font-size:68px;
     } 
     h2{
       font-size:52px;
     } 
     h3{
       font-size:40px;
     } 
     h4{
       font-size:32px;
     } 
     h5{
       font-size:21px;
     } 
     h6{
       font-size: 14px;
     } 
    </style>
    <h1>我是 h1 文字</h1>
    <h2>我是 h2 文字</h2>
    <h3>我是 h3 文字</h3>
    <h4>我是 h4 文字</h4>
    <h5>我是 h5 文字</h5>
    <h6>我是 h6 文字</h6>
    

    在这里插入图片描述

    设置多个标题元素的 font-weight

    在上一个挑战里你已经设置了每个标题的font-size,接下来你将设置font-weight。
    font-weight属性用于设置文本中所用的字体的粗细。

    在这里插入图片描述

    设置h1标签的font-weight为 800。
    设置h2标签的font-weight为 600。
    设置h3标签的font-weight为 500。
    设置h4标签的font-weight为 400。
    设置h5标签的font-weight为 300。
    设置h6标签的font-weight为 200。

    <style>
      h1 {
        font-size: 68px;
        font-weight: 800;
      }
      h2 {
        font-size: 52px;
        font-weight: 600;
      }
      h3 {
        font-size: 40px;
        font-weight: 500;
      }
      h4 {
        font-size: 32px;
        font-weight: 400;
      }
      h5 {
        font-size: 21px;
        font-weight: 300;
      }
      h6 {
        font-size: 14px;
        font-weight: 200;
      }
    </style>
    <h1>我是 h1 文字</h1>
    <h2>我是 h2 文字</h2>
    <h3>我是 h3 文字</h3>
    <h4>我是 h4 文字</h4>
    <h5>我是 h5 文字</h5>
    <h6>我是 h6 文字</h6>
    

    在这里插入图片描述

    设置段落文本的 font-size

    CSS 里面的font-size属性不只限于标题,它可以应用于任何包含文字的元素内。

    在这里插入图片描述

    把段落的font-size设置为 16px 让它看起来更清晰。

    <style>
      p {
        font-size: 16px;
      }
    </style>
    <p>
      天地玄黄 宇宙洪荒 日月盈昃 辰宿列张 寒来暑往 秋收冬藏 闰余成岁 律召调阳 云腾致雨 露结为霜 金生丽水 玉出昆冈 剑号巨阙 珠称夜光 果珍李柰 菜重芥姜 海咸河淡 鳞潜羽翔 龙师火帝 鸟官人皇 始制文字 乃服衣裳 推位让国 有虞陶唐 吊民伐罪 周发殷汤 坐朝问道 垂拱平章 爱育黎首 臣伏戎羌 遐迩壹体 率宾归王 鸣凤在树 白驹食场 化被草木 赖及万方 盖此身发 四大五常 恭惟鞠养 岂敢毁伤 女慕贞絜 男效才良 知过必改 得能莫忘 罔谈彼短 靡恃己长 信使可覆 器欲难量 墨悲丝染 诗讃羔羊
    </p>
    

    在这里插入图片描述

    设置段落的 line-height

    CSS 提供line-height属性来设置行间的距离。行高,顾名思义,用来设置每行文字所占据的垂直空间。

    在这里插入图片描述

    给p标签添加line-height属性并赋值 25px。

    <style>
      p {
        font-size: 16px;
        line-height:25px;
      }
    </style>
    <p>
      天地玄黄 宇宙洪荒 日月盈昃 辰宿列张 寒来暑往 秋收冬藏 闰余成岁 律召调阳 云腾致雨 露结为霜 金生丽水 玉出昆冈 剑号巨阙 珠称夜光 果珍李柰 菜重芥姜 海咸河淡 鳞潜羽翔 龙师火帝 鸟官人皇 始制文字 乃服衣裳 推位让国 有虞陶唐 吊民伐罪 周发殷汤 坐朝问道 垂拱平章 爱育黎首 臣伏戎羌 遐迩壹体 率宾归王 鸣凤在树 白驹食场 化被草木 赖及万方 盖此身发 四大五常 恭惟鞠养 岂敢毁伤 女慕贞絜 男效才良 知过必改 得能莫忘 罔谈彼短 靡恃己长 信使可覆 器欲难量 墨悲丝染 诗讃羔羊
    </p>
    

    在这里插入图片描述

    调整锚点的悬停状态

    本挑战将要涉及到伪类。伪类是可以添加到选择器上的关键字,用来选择元素的指定状态。

    比如,超链接可以使用:hover伪类选择器定义它的悬停状态样式。下面是悬停超链接时改变超链接颜色的 CSS:

    a:hover {
    color: red;
    }

    在这里插入图片描述

    代码编辑器里面已经有了一个 CSS 规则把所有的a标签定义成了黑色。添加一个规则,满足如下,当用户悬停a标签时,把color变成蓝色。

    <style>
      a {
        color: #000;
      }
      a:hover {
      color: blue;
    }
      
      
    </style>
    <a href="http://freecatphotoapp.com/" target="_blank">猫咪相册 App</a>
    

    在这里插入图片描述

    更改元素的相对位置

    在 CSS 里一切 HTML 元素皆为盒子,也就是通常所说的盒模型。块级元素自动从新的一行开始(比如标题、段落以及 div),行内元素排列在上一个元素后(比如图片以及 span)。元素默认按照这种方式布局称为文档的普通流,同时 CSS 提供了 position 属性来覆盖它。

    当元素的 position 设置为relative时,它允许你通过 CSS 指定该元素在当前普通流页面下的相对偏移量。 CSS 里控制各个方向偏移量的对应的属性是left、right、top和bottom。它们代表着从原来的位置向对应的方向偏移指定的像素、百分比或者 ems。下面的例子展示了段落向上偏移 10 像素:

    p {
    position: relative;
    bottom: 10px;
    }
    把元素的 position 设置成 relative 并不会改变该元素在普通流布局所占的位置,也不会对其它元素的位置产生影响。

    注意
    定位可以让你在页面布局上更灵活、高效。注意不管元素的定位是怎样,内部的 HTML 代码阅读起来应该是整洁、有意义的。这样也可以让视障人员(他们重度依赖辅助设备比如屏幕阅读软件)能够浏览你的网页。

    在这里插入图片描述

    把h2的position设置成relative,使用相应的 CSS 属性调整h2的位置,使其向下偏移 15 像素,同时还在普通流中占据原来的位置。注意不要对 h1 和 p 元素的位置产生影响。

    <style>
      h2 {
        position: relative;
        top: 15px;
        
      }
    </style>
    <body>
      <h1>论如何优雅定位</h1>
      <h2>我要离 h1 远一点!</h2>
      <p>我觉得 h2 没变,还是在它原来的位置,相离莫相忘,且行且珍惜。</p>
    </body>
    

    在这里插入图片描述

    使用 CSS 偏移移动相对定位的元素

    CSS 里面的top、bottom、left和right定义了元素在相应方位的偏移距离。元素将从当前位置,向属性相反的方向偏移。就像你在上一个挑战看到的,top属性使h2向下移动。left属性使元素向右移动。

    在这里插入图片描述

    通过 CSS 属性把h2向上移动 10 像素,向右移动 15 像素。

    <head>
    <style>
      h2 {
        position: relative;
        bottom: 10px;
        left: 15px;
        
      }
    </style>
    </head>
    <body>
      <h1>论如何优雅定位</h1>
      <h2>我要离 h1 近一点!</h2>
      <p>我觉得 h2 没变,还是在它原来的位置,相离莫相忘,且行且珍惜。</p>
    </body>
    

    绝对定位的参照物是元素的父元素

    接下来要介绍 CSSposition属性的取值选项absolute,absolute相对于其包含块定位。和relative定位不一样,absolute定位会将元素从当前的文档流里面移除,周围的元素会忽略它。可以用 CSS 的 top、bottom、left 和 right 属性来调整元素的位置。

    absolute定位比较特殊的一点是元素的定位参照于最近的已定位祖先元素。如果它的父元素没有添加定位规则(默认是position:relative;),浏览器会继续寻找直到默认的 body 标签。

    在这里插入图片描述

    通过声明position为absolute,固定#searchbar元素到它父元素section的右上角。即设定其top和right为 50 像素。

    <style>
      #searchbar {
        position: absolute;
        top:50px;
        right:50px;  
      }
      section {
        position: relative;
      }
    </style>
    <body>
      <h1>欢迎!</h1>
      <section>
        <form id="searchbar">
          <label for="search">搜索:</label>
          <input type="search" id="search" name="search">
          <input type="submit" name="submit" value="Go!">
        </form>
      </section>
    </body>
    

    在这里插入图片描述

    固定定位的参照物是浏览器的窗口

    接下来要介绍的是fixed定位,它是一种特殊的绝对(absolute)定位,区别是其包含块是浏览器窗口。和绝对定位类似,fixed定位使用 top、bottom、left 和 right 属性来调整元素的位置,并且会将元素从当前的文档流里面移除,其它元素会忽略它的存在。

    fixed定位和absolute定位的最明显的区别是fixed定位元素不会随着屏幕滚动而移动。

    在这里插入图片描述

    代码里的导航栏已经添加了值为navbar的 id。把它的position设置成fixed,设定其top和left为 0 像素。注意观察对h1的影响,h1并没有被导航栏挤下来,而是遮盖住了,为了显示完全需要单独调整h1的位置。

    <style>
      #navbar {
        position: fixed;
        top: 0px;
        left: 0px;
        
        width: 100%;
        background-color: #767676;
      }
      nav ul {
        margin: 0px;
        padding: 5px 0px 5px 30px;
      }
      nav li {
        display: inline;
        margin-right: 20px;
      }
      a {
        text-decoration: none;
      }
    </style>
    <body>
      <header>
        <h1>欢迎!</h1>
        <nav id="navbar">
          <ul>
            <li><a href="">网站首页</a></li>
            <li><a href="">联系我们</a></li>
          </ul>
        </nav>
      </header>
      <p>当导航条固定在浏览器窗口上时,我会上移。</p>
    </body>
    

    在这里插入图片描述

    使用 float 属性将元素左浮动或右浮动

    接下来要介绍的定位机制并不是position属性的选项,它通过元素的float属性来设置。浮动元素不在文档流中,它向左或向右浮动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。通常需要用width属性来指定浮动元素占据的水平空间。

    在这里插入图片描述

    设置#left元素的float为left,设置#right元素的float为right。使这两个元素按两列布局,section和aside左右排列。

    <head>
      <style>
      #left {
        float: left;
        width: 50%;
      }
      #right {
        float: right;
        width: 40%;
      }
      aside, section {
        padding: 2px;
        background-color: #ccc;
      }
      </style>
    </head>
    <body>
      <header>
        <h1>欢迎!</h1>
      </header>
      <section id="left">
        <h2>内容</h2>
        <p>好样的</p>
      </section>
      <aside id="right">
        <h2>侧边栏</h2>
        <p>一些链接</p>
      </aside>
    </body>
    

    在这里插入图片描述

    使用 z-index 属性更改重叠元素的位置

    当一些元素重叠时,在 HTML 里后出现的元素会默认显示在更早出现的元素的上面。你可以使用z-index属性指定元素的堆叠次序。z-index的取值是整数,数值大的元素优先于数值小的元素显示。

    在这里插入图片描述

    给 class 为first的元素(红色的方块)添加z-index属性并赋值为 2,使它显示在蓝色方块的上方。

    <style>
      div {
        width: 60%;
        height: 200px;
        margin-top: 20px;
      }
      
      .first {
        background-color: red;
        position: absolute;
        z-index: 2;    
      }
      .second {
        background-color: blue;
        position: absolute;
        left: 40px;
        top: 50px;
        z-index: 1;
      }
    </style>
    
    <div class="first"></div>
    <div class="second"></div>
    

    在这里插入图片描述

    使用 margin 属性将元素水平居中

    在应用设计中经常需要把一个块级元素水平居中显示。一种常见的实现方式是把块级元素的margin值设置为auto。

    同样的,这个方法也对图片奏效。图片默认是内联元素,但是可以通过设置其display属性为block来把它变成块级元素。

    在这里插入图片描述

    通过给页面中的div添加值为auto的margin属性将其居中显示。

    <style>
      div {
        background-color: blue;
        height: 100px;
        width: 100px;
        margin: auto;
      }
    </style>
    <div></div>
    

    在这里插入图片描述

    了解互补色

    色彩理论以及设计色彩学很复杂,这里将只涉及很基础的部分。在网站设计里,颜色能让内容更醒目,能调动情绪,从而创造舒适的视觉体验。不同的颜色组合对网站的视觉效果影响很大,精妙的设计都需要适宜的颜色来美化页面内容。

    一半是科学,一半是艺术,色环是我们认识颜色关系的好工具 - 它是一个近色相邻异色相离的圆环。当两个颜色恰好在色环的两端时,这两个颜色叫做补色。绘画中两只补色在混合后会变成灰色。补色搭配能形成强列的对比效果,传达出活力、能量、兴奋等意义。

    下面是一些十六进制码(hex code)补色的例子:

    红色(#FF0000)和蓝绿色 (#00FFFF)
    绿色(#00FF00)和品红色(#FF00FF)
    蓝色(#0000FF)和黄色(#FFFF00)
    现在很多的在线选色工具都有寻找补色的功能。

    注意
    对于所有的颜色关卡: 颜色能吸引用户的注意,但不是唯一的方式,切勿喧宾夺主,过度使用会适得其反。详细会在应用无障碍章节介绍。

    在这里插入图片描述

    把blue和yellowclass 的background-color属性改成相应的颜色。注意观察它们之间的编码区别以及和它们和白色的编码区别。

    <style>
      body {
        background-color: #FFFFFF;
      }
      .blue {
        background-color: 0000FF;
      }
      .yellow {
        background-color: #FFFF00;
      }
      div {
        display: inline-block;
        height: 100px;
        width: 100px;
      }
    </style>
    <div class="blue"></div>
    <div class="yellow"></div>
    

    在这里插入图片描述

    了解三原色

    电脑显示器和手机屏幕是一种加色模型,将红(R)、绿(G)、蓝(B)三原色的色光以不同的比例相加,以产生多种多样的色光。两种原色相加产生二次色:蓝绿(G+B)、品红(R+B)和黄色(R+G)。你在上一个挑战里已经见过这些颜色了。这些二次色恰好是在合成它们时未使用的原色的补色,即在色环中位于两端。例如,品红色是红色和蓝色相加产生,它是绿色的补色。

    三次色是由原色和二次色相加产生的颜色,例如红色(原色)和黄色(二次色)相加产生橙色。将这六种颜色中相邻的颜色相加,便产生了十二色色环。

    设计里面有很多种颜色搭配方法。涉及到三次色的一种配色方法是分裂补色搭配法。选定主色之后,在色环上选择与它的补色相邻的两种颜色与之搭配。此种搭配既有对比,又不失和谐。

    下面是使用分裂补色搭配法创建的三个颜色:
    在这里插入图片描述

    在这里插入图片描述

    把 class 为orange、cyan和rasberry的background-color改成其对应的颜色。由于 rasberry 不在浏览器 17 种标准色之内,不能直接用作颜色名,所以要使用 HEX 颜色码。

    <style>
      body {
        background-color: #FFFFFF;
      }
      
      .orange {
        background-color: #FF7D00;
      }
      
      .cyan {
        background-color: #00FFFF;
      }
      
      .raspberry {
        background-color: #FF007D;
      }
      
      div {
        height: 100px;
        width: 100px;
        margin-bottom: 5px;
      }
    </style>
      
    <div class="orange"></div>
    <div class="cyan"></div>
    <div class="raspberry"></div>
    

    在这里插入图片描述

    将各种元素的颜色调整为互补色

    通过前面关卡的学习,我们知道了补色搭配能形成强列的对比效果,让内容更富生机。但是如果使用不当效果会适得其反,比如如果文字背景色和文字颜色互为补色,文字会很难看清。通常的做法是,一种颜色做为主要颜色,其补色用来装点页面。

    在这里插入图片描述

    使用深青色(#09A7A1)做为页面主色,用其补色橙色(#FF790E)来装饰登录按钮。把header和footer的background-color从黑色改成深青色。然后把h2的文字color也改成深青色。最后,把button的background-color改成橙色。

    <style>
      body {
        background-color: white;
      }
      header {
        background-color: #09A7A1;
        color: white;
        padding: 0.25em;
      }
      h2 {
        color: #09A7A1;
      }  
      button {
        background-color: #FF790E;
      }
      footer {
        background-color: #09A7A1;
        color: white;
        padding: 0.5em;
      }
    </style>
    <header>
      <h1>FCC 中国</h1>
    </header>
    <main>
      <article>
        <h2>FCC 成都社区</h2>
        <p>【FCC成都社区】是一个非营利性的公益性技术社区,由一群编程技术爱好者,利用业余时间搭建的一个友好的交流、学习、互助的平台,帮助开发者、技术爱好者提升个人技术能力,同时帮助企业解决人才问题。</p>
        <button><a href="https://freecodecamp-chengdu.github.io/" target="_blank">更多</a></button>
      </article>
      <article>
        <h2>FCC 深圳社区</h2>
        <p>【FCC 深圳社区】全称 freeCodeCamp 深圳社区,面向深圳所有有意学习编程、热爱编程、甚至想要通过编程找到一份好工作的学生和社会群众,传承 freeCodeCamp 中文社区的主旨思想,倡导人人皆可编程。</p>
        <button><a href="https://freecodecamp-shenzhen.github.io/" target="_blank">更多</a></button>
      </article>
    </main>
    <br>
    <footer>&copy;2018 FCC 中国</footer>
    

    在这里插入图片描述

    调整颜色的色相

    HSL 色彩空间模型是一种将 RGB 色彩模型中的点放在圆柱坐标系中的表示法,描述了色相(hue)、饱和度(saturation)、亮度(lightness)。CSS3 引入了对应的hsl()属性做为对应的颜色描述方式。

    色相是色彩的基本属性,就是平常所说的颜色名称,如红色、黄色等。以颜色光谱为例,光谱左边从红色开始,移动到中间的绿色,一直到右边的蓝色,色相值就是沿着这条线的取值。在hsl()里面,色相用色环来代替光谱,色相值就是色环里面的颜色对应的从 0 到 360 度的角度值。

    饱和度是指色彩的纯度,也就是颜色里灰色的占比,越高色彩越纯,低则逐渐变灰,取0-100%的数值。

    亮度决定颜色的明暗程度,也就是颜色里白色或者黑色的占比,100% 亮度是白色, 0% 亮度是黑色,而 50% 亮度是“一般的”。

    下面是一些使用hsl()描述颜色的例子,颜色都为满饱和度,中等亮度:

    在这里插入图片描述
    在这里插入图片描述

    把 class 为green、cyan和bluediv的background-color使用hsl()表示法描述相应的颜色。颜色都为满饱和度,亮度中等。

    <style>
      body {
        background-color: #FFFFFF;
      }
      
      .green {
        background-color: hsl(120, 100%, 50%);
      }
      
      .cyan {
        background-color: hsl(180, 100%, 50%);
      }
      
      .blue {
        background-color: hsl(240, 100%, 50%);
      }
      
      div {
        display: inline-block;
        height: 100px;
        width: 100px;
      }
    </style>
      
    <div class="green"></div>
    <div class="cyan"></div>
    <div class="blue"></div>
    

    在这里插入图片描述

    调整颜色的色调

    hsl()使 CSS 更改色调更方便。给纯色添加白色可以创造更浅的色调,添加黑色可以创造更深的色调。另外,还可以通过给纯色添加灰色来同时改变颜色的深浅和明暗。回忆下hsl()里面的‘s’和‘l’分辨代表饱和度和亮度。饱和度代表灰色的占比,亮度代表白色和黑色的占比。这在当你有了一个基色调却需要微调时非常有用。

    在这里插入图片描述

    页面的导航栏目前继承了header的background-color。改变nav元素的background-color,保留基色蓝绿色,调整它的色调和明暗使它具有 80% 的饱和度以及 25% 的亮度。

    <style>
      header {
        background-color: hsl(180, 90%, 35%);
        color: #FFFFFF;
      }
      
      nav {
        background-color: hsl(180, 80%, 25%);
      }
      
      h1 {
        text-indent: 10px;
        padding-top: 10px;
      }
      
      nav ul {
        margin: 0px;
        padding: 5px 0px 5px 30px;
      }
      
      nav li {
        display: inline;
        margin-right: 20px;
      }
      
      a {
        text-decoration: none;
        color: inherit;
      }
    </style>
      
    <header>
      <h1>FCC 中国</h1>
      <nav>
        <ul>
          <li><a href="">首页</a></li>
          <li><a href="">课程</a></li>
          <li><a href="">论坛</a></li>
          <li><a href="">新闻</a></li>
          <li><a href="">设置</a></li>
        </ul>
      </nav>
    </header>
    

    在这里插入图片描述

    创建一个 CSS 线性渐变

    HTML 元素的背景色并不局限于单色。CSS 还提供了颜色过渡,也就是渐变。可以通过background里面的linear-gradient()来实现线性渐变,下面是它的语法:

    background: linear-gradient(gradient_direction, 颜色 1, 颜色 2, 颜色 3, …);

    第一个参数指定了颜色过渡的方向 - 它的值是角度,90deg 代表垂直渐变,45deg 的渐变角度和反斜杠方向差不多。剩下的参数指定了渐变颜色的顺序:

    例子:

    background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));

    使用linear-gradient()给div添加background渐变色,渐变角度 35deg,从#CCFFFF过渡到#FFCCCC。
    注意
    有很多种方式指定颜色值,如rgb()或者hsl()。在本关里请使用 hex 颜色码。

    <style>
    
      div{ 
        border-radius: 20px;
        width: 70%;
        height: 400px;
        margin: 50px auto;
        background: linear-gradient(35deg, #CCFFFF,#FFCCCC);
      }
    
    </style>
    
    <div></div>
    

    在这里插入图片描述

    使用 CSS 线性渐变创建条纹元素

    repeating-linear-gradient()函数和linear-gradient()很像,主要区别是repeating-linear-gradient()重复指定的渐变。 repeating-linear-gradient()有很多参数,为了便于理解,本关只用到角度值和起止渐变颜色值。

    角度就是渐变的方向。起止渐变颜色值代表渐变颜色及其宽度值,由颜色值和起止位置组成,起止位置用百分比或者像素值表示。

    在代码编辑器的例子里,渐变开始于 0 像素位置的yellow,然后过渡到距离开始位置 40 像素的blue。由于下一个起止渐变颜色值的起止位置也是 40 像素,所以颜色直接渐变成第三个颜色值green,然后过渡到距离开始位置 80 像素的red。

    下面的代码可以帮助理解成对的起止渐变颜色值是如何过渡的。

    0px [黄色 – 过渡 – 蓝色] 40px [绿色 – 过渡 – 红色] 80px

    如果每对起止渐变颜色值的颜色都是相同的,由于是在两个相同的颜色间过渡,那么中间的过渡色也为同色,接着就是同色的过渡色和下一个起止颜色,最终产生的效果就是条纹。

    在这里插入图片描述

    使用repeating-linear-gradient()函数创建一个渐变角度为 45deg 的条纹,然后设置第一对渐变颜色为yellow, 第二对渐变颜色为black。

    <style>
    
      div{ 
        border-radius: 20px;
        width: 70%;
        height: 400px;
        margin:  50 auto;
        background: repeating-linear-gradient(
          45deg,
          yellow 0px,
          yellow 40px,
          black 40px,
          black 80px
          /* blue 40px,
          green 40px,
          red 80px */
        );
      }
    
    </style>
    
    <div></div>
    

    在这里插入图片描述

    通过添加细微图案作为背景图像来创建纹理

    添加一个精致的背景图,可以增加页面的质感,让页面更美观。关键是要找到一个平衡点,抢了内容的风头,喧宾夺主可就不妙了。background属性支持使用url()函数通过链接的方式引入一个指定纹理或样式的图片。图片链接地址在括号内,一般会用引号包起来。

    在这里插入图片描述

    用body选择器设置整个页面的background为 urlhttps://i.imgur.com/MJAkxbh.png指定的图片。

    <style>
      body {
        background: url("https://i.imgur.com/MJAkxbh.png");
      }
    </style>
    
    

    使用 CSS Transform scale 属性可以更改元素的大小

    CSS 属性transform里面的scale()函数,可以用来改变元素的显示比例。下面的例子把页面的段落元素放大了 2 倍:

    p {
    transform:scale(2);
    }

    在这里插入图片描述

    把 id 为ball2的元素放大到原始大小的 1.5 倍。

    <style>
      .ball { 
        width: 40px;
        height: 40px;
        margin: 50 auto;
        position: fixed;
        background: linear-gradient(
          35deg,
          #ccffff,
          #ffcccc
        );
        border-radius: 50%;
      }
      #ball1 {
        left: 20%;
      }
      #ball2 {
        left: 65%;
        transform:scale(1.5);
      }
    
    
    </style>
    
    <div class="ball" id= "ball1"></div>
    <div class="ball" id= "ball2"></div>
    

    在这里插入图片描述

    使用CSS Transform scale 属性在悬停时缩放元素

    transform属性有很多函数,可以对元素进行调整大小、移动、旋转、翻转等操作。当使用伪类描述元素的指定状态如:hover时,transform属性可以方便的给元素添加交互。

    下面是当用户悬停段落元素时,段落大小缩放到原始大小 2.1 倍的例子:

    p:hover {
    transform: scale(2.1);
    }

    在这里插入图片描述

    给div伪类hover添加transform属性,使其当鼠标悬停时大小缩放到原始大小的 1.1 倍。

    <style>
      div { 
        width: 70%;
        height: 100px;
        margin:  50px auto;
        background: linear-gradient(
          53deg,
          #ccfffc,
          #ffcccf
        );
      }
      
      div:hover {
      transform: scale(1.1);
    }
      
    </style>
    
    <div></div>
    

    使用 CSS Transform skex 属性沿X轴倾斜元素

    接下来要介绍的transform属性是skewX,skewX使选择的元素沿着 X 轴(横向)翻转指定的角度。

    下面的代码沿着 X 轴翻转段落元素 -32 度。

    p {
    transform: skewX(-32deg);
    }

    在这里插入图片描述

    使用transform属性沿 X 轴翻转 id 为bottom的元素 24 度。

    <style>
      div { 
        width: 70%;
        height: 100px;
        margin:  50px auto;
      }
      #top {
        background-color: red;
      }
      #bottom {
        background-color: blue;
        transform: skewX(24deg);
      }
    </style>
    
    <div id="top"></div>
    <div id="bottom"></div>
    

    在这里插入图片描述

    使用 CSS Transform skex 属性沿Y轴倾斜元素

    skewX函数使指定元素沿 X 轴翻转指定的角度,想必你已经猜到了,skewY属性使指定元素沿 Y 轴(垂直方向)翻转指定角度。

    在这里插入图片描述

    使用transform属性沿 Y 轴翻转 id 为top的元素 -10 度。

    <style>
      div { 
        width: 70%;
        height: 100px;
        margin: 50px auto;
      }
      #top {
        background-color: red;
        transform: skewY(-10deg);
      }
      #bottom {
        background-color: blue;
        transform: skewX(24deg);
      }
    </style>
    
    <div id="top"></div>
    <div id="bottom"></div>
    

    在这里插入图片描述

    使用 CSS 创建一个图形

    术语表:blur-radius => 模糊半径,spread-radius => 辐射半径,transparent => 透明的,border-radius => 圆角边框。

    通过使用选择器选择不同的元素并改变其属性,你可以创造一些有趣的形状。比如新月。你可以使用box-shadow属性来设置元素的阴影,border-radius属性控制元素的圆角边框。

    首先你将会创建一个圆的、透明的对象,它具有模糊阴影并略微向两边递减。如你所见,这个阴影其实就是新月形狀。

    为了创建一个圆形的对象,border-radius应该被设置成 50%。

    你应该还记得之前关卡的box-shadow属性以及它的依次取值offset-x、offset-y、blur-radius、spread-radius和颜色值。其中blur-radius和spread-radius是可选的。

    在这里插入图片描述

    把编辑器里的正方形元素变成新月形状。首先,把background-color改为 transparent,接着把border-radius属性设置成 50%,以创建一个圆形。最后,更改box-shadow属性,使其offset-x为 25px,offset-y为 10px,blur-radius为 0,spread-radius为 0,color为 blue。

    <style>
    .center
    {
      position: absolute;
      margin: auto;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100px;
      height: 100px;
      
      background-color: transparent;
      border-radius: 50%;
      box-shadow: 25px 10px 0 0 blue; 
    }
    
    </style>
    <div class="center"></div>
    

    在这里插入图片描述

    使用 CSS 和 HTML 创建更复杂的形状

    世界上最流行的形状非心形莫属了,在本关里你将用纯 CSS 创建一个心形。但是首先你需要了解:before和:after伪类。这些伪类用来在选择元素之前和之后添加一些内容。在下面的例子里,:before伪类元素用来给 class 为heart的元素添加一个正方形。

    .heart:before {
    content: “”;
    background-color: yellow;
    border-radius: 25%;
    position: absolute;
    height: 50px;
    width: 70px;
    top: -50px;
    left: 5px;
    }
    :before和:after必须配合content来使用。这个属性通常用来给元素添加内容诸如图片或者文字。当:before和:after伪类用来添加某些形状而不是图片或文字时,content属性仍然是必需的,但是它的值可以是空字符串。

    在上面的例子里,class 为heart元素的:before伪类添加了一个黄色的长方形,长方形的height和width分别为 50px 和 70px。由于设置了其边框半径为 25%,所以长方形为圆角长方形,同时其相对位置为距离left5px,以及向top偏移 50px。

    在这里插入图片描述

    把屏幕里的元素变成心形。在heart:after选择器里面,把background-color改成粉色(pink),把border-radius改成 50%。
    接下来,在heartclass 选择器(单纯的heart元素)里面,完善transform属性。使用rotate()函数并赋参 -45 度。(rotate()用法和skewX以及skewY类似)。
    最后,在heart:before选择器里面,设置content属性为空字符串。

    <style>
    .heart {
      position: absolute;
      margin: auto;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: pink;
      height: 50px;
      width: 50px;
      transform: rotate(-45deg);
    }
    .heart:after {
      background-color: pink;
      content: "";
      border-radius: 50%;
      position: absolute;
      width: 50px;
      height: 50px;
      top: 0px;
      left: 25px;
    }
    .heart:before {
      content: "";
      background-color: pink;
      border-radius: 50%;
      position: absolute;
      width: 50px;
      height: 50px;
      top: -25px;
      left: 0px;
    }
    </style>
    <div class = "heart"></div>
    

    在这里插入图片描述

    了解 CSS 的关键帧和动画是如何工作的

    如果要给元素添加动画,你需要了解animation属性以及@keyframes规则。animation属性控制动画的外观,@keyframes规则控制动画中各阶段的变化。总共有 8 个animation属性。为了便于理解,本关暂时只涉及到两个最常用的属性。

    animation-name设置动画的名称, 也就是要绑定的选择器的@keyframes的名称。

    animation-duration设置动画所花费的时间。

    @keyframes能够创建动画。 创建动画的原理是将一套 CSS 样式逐渐变化为另一套样式。具体是通过设置动画期间对应的“frames”的 CSS 的属性,以百分比来规定改变的时间,或者通过关键词“from”和“to”,等价于 0% 和 100%。打个比方,CSS 里面的 0% 属性就像是电影里面的开场镜头。CSS 里面的 100% 属性就是元素最后的样子,相当于电影里的演职员表或者鸣谢镜头。CSS 在对应的时间内给元素过渡添加效果。下面举例说明@keyframes和动画属性的用法:

    #anim {
    animation-name: colorful;
    animation-duration: 3s;
    }
    @keyframes colorful {
    0% {
    background-color: blue;
    }
    100% {
    background-color: yellow;
    }
    }
    id 为anim的元素,代码设置animation-name为colorful,设置animation-duration为 3 秒。然后把@keyframes引用到名为colorful的动画属性上。colorful在动画开始时(0%)设置颜色为蓝色,在动画结束时(100%)设置颜色为黄色。注意不是只有开始和结束的过渡可以设置,0% 到 100% 间的任意百分比你都可以设置。

    在这里插入图片描述

    给 id 为rect 的元素添加动画,设置其animation-name为 rainbow,设置其animation-duration为 4 秒。然后声明@keyframes规则,设置动画开始时(0%)的background-color为蓝色,动画中间时(50%)为绿色,动画结束时(100%)为为黄色。

    <style>
      div {
        height: 40px;
        width: 70%;
        background: black;
        margin: 50px auto;
        border-radius: 5px;
      }
    
      #rect {
        animation-name:  rainbow;
        animation-duration: 4s;
      }
      @keyframes rainbow{
        0% {
          background-color: blue;
        }
        50% {
          background-color: green;
        }
        100% {
          background-color: yellow;
        }    
      }
      
      
      
      
    </style>
    <div id="rect"></div>
    

    使用CSS动画更改按钮的悬停状态

    你可以在按钮悬停时使用@keyframes改变按钮的颜色。

    下面是在图片悬停时改变图片宽度的例子:

    <style>
      img:hover {
        animation-name: width;
        animation-duration: 500ms;
      }
    
      @keyframes width {
        100% {
          width: 40px;
        }
      }
    </style>
    
    <img src="https://bit.ly/smallgooglelogo" alt="Google's Logo" />
    

    在这里插入图片描述

    注意ms代表毫秒,1000ms 等于 1s。
    使用@keyframes来改变button元素的background-color,使其当悬停时变成#4791d0。@keyframes规则应该只有一个100%条目。

    <style>
      button {
        border-radius: 5px;
        color: white;
        background-color: #0F5897;
        padding: 5px 10px 8px 10px;
      }
      
      button:hover {
        animation-name: background-color;
        animation-duration: 500ms;
      }
      
      @keyframes background-color {
        100%{
          background-color: #4791d0;
        }
      }
    </style>
      
    <button>注册</button>
    

    修改动画的填充模式

    太棒了,但是现在还不完美。注意动画在500ms之后重置了,所以按钮又变成了之前的颜色。而我们想要的效果是按钮在悬停时始终高亮。

    这可以通过把animation-fill-mode设置成forwards来实现。animation-fill-mode指定了在动画结束时元素的样式。你可以向这样设置它:

    animation-fill-mode: forwards;

    设置button:hover的animation-fill-mode,使按钮悬停时保持高亮。

    <style>
      button {
        border-radius: 5px;
        color: white;
        background-color: #0F5897;
        padding: 5px 10px 8px 10px;
      }
      button:hover {
        animation-name: background-color;
        animation-duration: 500ms;
        /* add your code below this line */
        animation-fill-mode: forwards;
        /* add your code above this line */
      }
      @keyframes background-color {
        100% {
          background-color: #4791d0;
        }
      }
    </style>
    <button>注册</button>
    

    在这里插入图片描述

    使用 CSS 动画创建运动

    当元素的position被指定,如fixed或者relative时,CSS 偏移属性right、left、top和bottom可以用在动画规则里创建动作。

    就像下面的例子展示的那样,你可以在50%keyframe 处设置top属性为 50px, 在开始(0%)和最后(100%)keframe 处设置为 0px,以产生项目向下运动,然后返回的动作效果。

    @keyframes rainbow {
    0% {
    background-color: blue;
    top: 0px;
    }
    50% {
    background-color: green;
    top: 50px;
    }
    100% {
    background-color: yellow;
    top: 0px;
    }
    }

    让div水平运动。使用left偏移属性,添加@keyframes规则,让 rainbow 在0%的 0 像素开始,在50%时移动到 25 像素,在100%时时移动到 -25 像素。不要替换编辑器里的top属性,动画应该同时向水平和竖直方向运动。

    <style>
      div {
        height: 40px;
        width: 70%;
        background: black;
        margin: 50px auto;
        border-radius: 5px;
        position: relative;
      }
    
    #rect {
      animation-name: rainbow;
      animation-duration: 4s;
    }
    
    @keyframes rainbow {
      0% {
        background-color: blue;
        top: 0px;
        left: 0px;
      }
      50% {
        background-color: green;
        top: 50px;
        left: 25px;
      }
      100% {
        background-color: yellow;
        top: 0px;
        left: -25px;
      }
    }
    </style>
    
    <div id="rect"></div>
    

    通过从左到右淡化元素来创建视觉方向

    在本关里,你将要改变动画元素的opacity,使其在到达屏幕右侧时渐隐。

    在展示的动画里,具有渐变背景的圆形元素在 50% 标记的@keyframes规则处向右移动。

    使用 id 选择器选择 id 为ball的元素,在50%里添加opacity属性并赋值 0.1,使其在向右移动时渐隐。

    <style>
    
      #ball {
        width: 70px;
        height: 70px;
        margin: 50px auto;
        position: fixed;
        left: 20%;
        border-radius: 50%;
        background: linear-gradient(
          35deg,
          #ccffff,
          #ffcccc
        );
        animation-name: fade;
        animation-duration: 3s;
      }
    
      @keyframes fade {
        50% {
          left: 60%;
          opacity: 0.1;
        }
      }
    
    </style>
    
    <div id="ball"></div>
    

    使用无限的动画计数制作永不停止的动画

    之前的关卡里介绍了一些动画属性以及@keyframes规则的用法。还有一个常用的动画属性是animation-iteration-count,这个属性允许你控制动画循环的次数。下面是一个例子:

    animation-iteration-count: 3;

    在这里动画会在运行 3 次后停止,如果想让动画一直运行,可以把值设置成 infinite。

    把animation-iteration-count属性改成 infinite,以使右边的球持续跳跃。

    <style>
    
      #ball {
        width: 100px;
        height: 100px;
        margin: 50px auto;
        position: relative;
        border-radius: 50%;
        background: linear-gradient(
          35deg,
          #ccffff,
          #ffcccc
        );
        animation-name: bounce;
        animation-duration: 1s;
        animation-iteration-count: infinite;
      }
    
      @keyframes bounce{
        0% {
          top: 0px;
        }
        50% {
          top: 249px;
          width: 130px;
          height: 70px;
        }
        100% {
          top: 0px;
        }
      }
    </style>
    <div id="ball"></div>
    

    使用无限的动画计数制作 CSS 心跳

    这也是一个用animation-iteration-count属性创造持续动画的例子,它基于前面关卡创建的心形。

    心跳动画的每一秒包含两个部分。heart元素(包括:before和:after)使用transform属性改变其大小,背景div使用background属性改变其颜色。

    给backclass和heartclass添加值为 infinite 的animation-iteration-count属性,使心脏持续跳动。heart:before和heart:after选择器不需要添加动画属性。

    <style>
      .back {
        position: fixed;
        padding: 0;
        margin: 0;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: white;
        animation-name: backdiv;
        animation-duration: 1s; 
        animation-iteration-count: infinite;
      }
    
      .heart {
        position: absolute;
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: pink;
        height: 50px;
        width: 50px;
        transform: rotate(-45deg);
        animation-name: beat;
        animation-duration: 1s;
        animation-iteration-count: infinite;
      }
      .heart:after {
        background-color: pink;
        content: "";
        border-radius: 50%;
        position: absolute;
        width: 50px;
        height: 50px;
        top: 0px;
        left: 25px;
      }
      .heart:before {
        background-color: pink;
        content: "";
        border-radius: 50%;
        position: absolute;
        width: 50px;
        height: 50px;
        top: -25px;
        left: 0px;
      }
    
      @keyframes backdiv {
        50% {
          background: #ffe6f2;
        }
      }
    
      @keyframes beat {
        0% {
          transform: scale(1) rotate(-45deg);
        }
        50% {
          transform: scale(0.6) rotate(-45deg);
        }
      }
    
    </style>
    <div class="back"></div>
    <div class="heart"></div>
    

    以可变速率来给元素添加动画

    改变相似元素的动画频率的方法有很多。目前接触到的就有animation-iteration-count和@keyframes。

    举例说明,右边的动画包含了两个小星星,每个小星星都在 20%@keyframes处变小并且 opacity 变为 20%,也就是一闪一闪的动画效果。你可以通过改变其中一个星星的@keyframes规则以使两个小星星以不同的频率闪烁。

    通过改变 class 为star-1的元素的@keyframes为 50% 以改变其动画频率。

    <style>
      .stars {
        background-color: white;
        height: 30px;
        width: 30px;
        border-radius: 50%;
        animation-iteration-count: infinite;
      }
    
      .star-1 {
        margin-top: 15%; 
        margin-left: 60%;
        animation-name: twinkle-1;
        animation-duration: 1s;
      }
    
      .star-2 {
        margin-top: 25%;
        margin-left: 25%;
        animation-name: twinkle-2;
        animation-duration: 1s;
      }
    
      @keyframes twinkle-1 {
        50% {
          transform: scale(0.5);
          opacity: 0.5;
        }
      }
    
      @keyframes twinkle-2 {
        20% {
          transform: scale(0.5);
          opacity: 0.5;
        }
      }
    
      #back {
        position: fixed;
        padding: 0;
        margin: 0;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
      }
    </style>
    
    <div id="back"></div>
    <div class="star-1 stars"></div>
    <div class="star-2 stars"></div>
    

    以可变速率来给多个元素添加动画

    在前面的关卡里,你通过改变@keyframes改变了两个相似动画元素的频率。你也可以通过改变多个元素的animation-duration来达到同样的效果。

    在编辑器代码运行的动画里,天空中有三个以同样频率不停的闪烁的星星。你可以设置每一个星星的animation-duration属性为不同的值来使其具有不同的闪烁频率。

    依次设置 class 为star-1、star-2、star-3的animation-duration为 1s、0.9s、1.1s。

    <style>
      .stars {
        background-color: white;
        height: 30px;
        width: 30px;
        border-radius: 50%;
        animation-iteration-count: infinite;
      }
    
      .star-1 {
        margin-top: 15%; 
        margin-left: 60%;
        animation-duration: 1s;
        animation-name: twinkle;
      }
    
      .star-2 {
        margin-top: 25%;
        margin-left: 25%;
        animation-duration: 0.9s;
        animation-name: twinkle;
      }
    
      .star-3 {
        margin-top: 10%;
        margin-left: 50%;
        animation-duration: 1.1s;
        animation-name: twinkle;
      }
    
      @keyframes twinkle {
        20% {
          transform: scale(0.5);
          opacity: 0.5;
        }
      }
    
      #back {
        position: fixed;
        padding: 0;
        margin: 0;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
      }
    </style>
    
    <div id="back"></div>
    <div class="star-1 stars"></div>
    <div class="star-2 stars"></div>
    <div class="star-3 stars"></div>
    

    使用关键字更改动画定时器

    在 CSS 动画里,animation-timing-function规定动画的速度曲线。速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。如果要描述的动画是一辆车在指定时间内(animation-duration)从 A 运动到 B,那么animation-timing-function表述的就是车在运动中的加速和减速等过程。

    已经有了很多预定义的值可以直接使用于大部分场景。比如,默认的值是ease,动画以低速开始,然后加快,在结束前变慢。其它常用的值包括ease-out,动画以高速开始,以低速结束;ease-in,动画以低速开始,以高速结束;linear,动画从头到尾的速度是相同的。

    给 id 为ball1和ball2的元素添加animation-timing-function,ball1赋值为linear,ball2赋值为ease-out。它们的animation-duration都为 2 秒,注意观察它们在开始和结束时的不同。

    <style>
    
      .balls {
        border-radius: 50%;
        background: linear-gradient(
          35deg,
          #ccffff,
          #ffcccc
        );
        position: fixed;  
        width: 50px;
        height: 50px;
        margin-top: 50px;
        animation-name: bounce;
        animation-duration: 2s;
        animation-iteration-count: infinite;
      }
      #ball1 { 
        left:27%;
        animation-timing-function: linear;
      }
      #ball2 { 
        left:56%;
        animation-timing-function: ease-out;
      }
    
    @keyframes bounce {
      0% {
        top: 0px;
      } 
      100% {
        top: 249px;
      }
    } 
    
    </style>
    
    <div class="balls" id="ball1"></div>
    <div class="balls" id="ball2"></div>
    

    学习贝塞尔曲线的原理

    上一关卡介绍了animation-timing-function以及它的一些预定义的值。这些值定义了不同时间内的动画速度。除了预定义值之外,CSS 还提供了贝塞尔曲线(Bezier curves)来更出色的控制动画的速度曲线。

    在 CSS 动画里,用cubic-bezier来定义贝塞尔曲线。曲线的形状代表了动画的速度。曲线在 1*1 的坐标系统内,曲线的 X 轴代表动画的时间间隔(类似于时间比例尺),Y 轴代表动画的改变。

    cubic-bezier函数包含了 1 * 1 网格里的4个点:p0、p1、p2和p3。其中p0和p3是固定值,代表曲线的起始点和结束点,坐标值依次为 (0, 0) 和 (1, 1)。你只需设置另外两点的 x 值和 y 值,设置的这两点确定了曲线的形状从而确定了动画的速度曲线。在 CSS 里面通过(x1, y1, x2, y2)来确定p1和p2。综上,下面就是 CSS 贝塞尔曲线的例子:

    animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);

    在上面的例子里,两个点的 x 和 y 值相等(x1 = 0.25 = y1 和 x2 = 0.75 = y2),如果你还记得初中几何,结果是从原点到点 (1, 1) 的一条直线。动画速度呈线性,效果和linear一致。换言之,元素匀速运动。

    对于 id 为ball1的元素,把animation-timing-function属性值从linear变成等价的cubic-bezier函数值。也就是说使用上面例子给的值。

    <style>
    
      .balls{
        border-radius: 50%;
        background: linear-gradient(
          35deg,
          #ccffff,
          #ffcccc
        );
        position: fixed;  
        width: 50px;
        height: 50px;
        margin-top: 50px;
        animation-name: bounce;
        animation-duration: 2s;
        animation-iteration-count: infinite;
      }
      #ball1 { 
        left: 27%;
        animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
      }
      #ball2 { 
        left: 56%;
        animation-timing-function: ease-out;
      }
    
    @keyframes bounce {
      0% {
        top: 0px;
      } 
      100% {
        top: 249px;
      }
    } 
    
    </style>
    
    <div class="balls" id="ball1"></div>
    <div class="balls" id="ball2"></div>
    

    使用贝塞尔曲线移动图形

    前面的关卡涉及的ease-out预定义值描述了动画以高速开始低速结束。右边的动画展示了ease-out预定义值(蓝色的元素)和linear预定义值(红色的元素)的区别。同样的,ease-out预定义值也可以用贝塞尔曲线函数实现。

    通俗的讲,将一条直线放在范围只有 1 的坐标轴中,并从中间拿p1和p2两个点来拉扯(X 轴的取值区间是 [0, 1],Y 轴任意),最后形成的曲线就是动画的贝塞尔速度曲线。下面是贝塞尔曲线模仿 ease-out 预定义值的例子:

    animation-timing-function: cubic-bezier(0, 0, 0.58, 1);

    记住所有的cubic-bezier函数都是从坐标为 (0, 0) 的p0开始,在坐标为 (1, 1) 的p3结束。在这个例子里,曲线在 y 轴(从 0 开始,运动到p1的 0,然后运动到p2的 1)上移动的比在 x 轴(从 0 开始,运动到p1的 0,到p2的 0.58)上移动的快。结果是,在这一段动画内元素运动的快。到曲线的结尾,x 和 y 之间的关系反过来了,y 值保持为1,没有变化,x 值从 0.58 变为 1,元素运动的慢。

    为了看贝塞尔曲线的运动效果,把 id 为red的元素的animation-timing-function属性赋为cubic-bezier函数,其中 x1,y1,x2,y2 值分别为 0,0,0.58,1。这会使两个元素运动过程类似。

    <style>
      .balls{
        border-radius: 50%;
        position: fixed;
        width: 50px;
        height: 50px;
        margin-top: 50px;
        animation-name: bounce;
        animation-duration: 2s;
        animation-iteration-count: infinite;
      }
      #red {
        background: red;
        left: 27%;
        animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
      }
      #blue {
        background: blue;
        left: 56%;
        animation-timing-function: ease-out;
      }
      @keyframes bounce {
        0% {
          top: 0px;
        }
        100% {
          top: 249px;
        }
      }
    </style>
    <div class="balls" id= "red"></div>
    <div class="balls" id= "blue"></div>
    

    使用贝塞尔曲线让运动更加自然

    本关的元素模拟的是杂技抛接球。之前的关卡涉及了linear和ease-out的贝塞尔曲线描述,如你所见,这两个都无法完美的描述杂耍球的运动。在本关里你需要定制贝塞尔曲线。

    当animation-iteration-count值为 infinite 时animation-timing-function会自动循环 keyframe。由于是在动画周期中间(50%处)设置的 keyframe 规则,最终的结果是球向上和球向下是两个同样的动画过程。

    下面的例子模拟了杂耍球运动:

    cubic-bezier(0.3, 0.4, 0.5, 1.6);

    注意 y2 的值是大于 1 的。虽然贝塞尔曲线是在 1*1 的坐标系统内 x 值只能在 0 到 1,但是 y 值是可以大于 1 的。这样才能模拟杂耍球运动。

    把 id 为green的元素的animation-timing-function值改成cubic-bezier函数,函数的参数 x1,y1,x2,y2 值依次为 0.311、0.441、0.444、1.649。

    <style>
      .balls {
        border-radius: 50%;
        top: 249px;
        position: fixed;  
        width: 50px;
        height: 50px;
        top: 60%;
        animation-name: jump;
        animation-duration: 2s;
        animation-iteration-count: infinite;
      }
      #red {
        background: red;
        left: 25%;
        animation-timing-function: linear;
      }
      #blue {
        background: blue;
        left: 50%;
        animation-timing-function: ease-out;
      }
      #green {
        background: green;
        left: 75%;
        animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
      }
    
      @keyframes jump {
        50% {
          top: 10%;
        }
      }
    </style>
    <div class="balls" id="red"></div>
    <div class="balls" id="blue"></div>
    <div class="balls" id="green"></div>
    
    展开全文
  • 视觉设计教程分享

    2020-11-17 10:44:48
    一、视觉设计学习线路图 二、视觉设计分阶段知识点归纳总结 1.第一阶段 2.第二阶段 3.第三阶段 4.第四阶段 5.第五阶段 三、课程资源分享 视觉设计学习各阶段配套视频推荐 所处...

    一、视觉设计学习线路图

    二、视觉设计分阶段知识点归纳总结

    1.第一阶段

    2.第二阶段

    3.第三阶段

    4.第四阶段

    5.第五阶段

    三、课程资源分享

    视觉设计学习各阶段配套视频推荐

    所处阶段

    配套教程

    网盘链接

    第一阶段:Photoshop综合应用 130集学会炫酷photoshop(上) https://pan.baidu.com/s/1o9z35ai
    130集学会炫酷photoshop(中) https://pan.baidu.com/s/1ggX7KxP
    130集学会炫酷photoshop(下) https://pan.baidu.com/s/1dSYnc6
    第二阶段:纸媒视觉设计 选框+绘图+抠图系统强化训练 https://pan.baidu.com/s/1S2JV9guwHjkqwH-UmAm8Vg
    钢笔+文字排版设计训练视频 https://pan.baidu.com/s/1rjD0ftF5RsjpINPQxw_SWA
    绘图及渐变教程精讲 https://pan.baidu.com/s/1E1Bv-P4aShQVvOCNYbxWgA
    icon及LOGO&宣传物料&企业形象 https://pan.baidu.com/s/1c389xgW
    第三阶段:屏媒视觉设计 APP快速设计 待更新......
    EUI电商设计 https://pan.baidu.com/s/1EczslRdKBvT9rW1NWPCqmg
    宝马H5网站项目设计 https://pan.baidu.com/s/1T4qAM5EOHkvT2KMS2AcomA
    APP快速设计 待更新......
    微信端公共号设计 待更新......
    智能屏幕界面设计 待更新......
    第四阶段:多媒体视觉设计 视频编辑合成 待更新......
    图像动画特效 待更新......
    第五阶段:工作实训
    (项目提案&企业实训)
    品牌形象主视觉项目实训 待更新......
    屏媒及多媒体项目实训 待更新......
    快速案例制作“新年促销海报” 待更新......

    以上就是今天要分享的视觉设计教程了,祝学习愉快~

    更多学习资源分享,记得点个关注哦~

    展开全文
  • 课程目标本教程为【吴刚大讲堂】电商系列课程的高级课程,围绕平台级电商案例实战开讲,是不可多得的实战分析资源适用人群视觉设计从业者,学生,电商设计师,电商运营,希望在电商设计领域拔提高的朋友课程简介 本...
  • 极简高端视觉设计小团队介绍宣传ppt模板,本模板共13P,目录:团队定位、服务项目、案例分析、明星设计师、联系我们,商务蓝折纸风背景,极简高端设计版式内容页,适合ppt设计、平面设计、视觉设计团队介绍宣传等...
  • 随着时代的进步,视觉设计从传统行业走向互联网时代,环境的变迁使视觉设计的流行趋势经历了从商业美术、工艺美术、印刷美术设计、装潢设计、平面设计、界面设计等几大阶段,从关注数觉表现到关注视觉传达,生死点从...
  • 视觉设计

    2014-09-09 16:06:38
    岗位职责: 1.参与产品原型讨论,搭建基础UI框架. 2.参与产品前期界面视觉用户研究、设计流行趋势分析作品 3.产品的整体视觉风格和VI设计 ...5.负责视觉设计相关技能在部门内外的交流和教育,提高团队的设计水平
  • 用户体验交互视觉设计方法论
  • 这是一篇在zcool上看到的文章,作者从视觉设计师的角度,来聊了聊与各个环节之间的关系:这是自己从别的网站摘得一点资料:希望大家喜欢我是一个初入互联网的视觉设计师,和以往做设计感受最大的不同就是:一个设计...
  • 视觉设计师在不同阶段需要认真的思考自己。现在做视觉设计门槛很低,“多数设计师不会从反思中提高”,这是我职业生涯中第一个主管给我留下印象最深的一句话,我也把它奉送给大家。
  • 我是一个初入互联网的视觉设计师,和以往做设计感受最大的不同就是:一个设计的最终定稿会受到多方面的挑战,有来自产品经理的,来自开发的,来自测试的…等等。那如何在其他团队成员的面前不卑不亢,游刃有余地应对...
  • 视觉设计—布局ppt

    2014-01-07 20:27:05
    视觉设计原则 上课用的ppt,14种排列方式,布局规则。
  • 视觉设计师的进化

    2018-08-28 14:15:24
    本文来自网易云社区视觉设计师面临修饰者的困境,如何提升全链路认知和体系化思维成为区分者和驱动者?本文在网易易盾"图片在线检测"功能改版中引入设计冲刺进行尝试。设计冲刺让设计师拥有全局性视野和...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,028
精华内容 8,011
关键字:

视觉设计