应用视觉设计:创建一个 CSS 线性渐变

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

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

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

例子:

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

应用视觉设计:使用 CSS 线性渐变创建条纹元素

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

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

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

repeating-linear-gradient( 45deg, yellow 0px, blue 40px, green 80px)

repeating-linear-gradient(45deg, yellow 0px, yellow 40px, black 40px, black 80px )

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

应用视觉设计:通过添加细微图案作为背景图像来创建纹理

添加一个精致的背景图,可以增加页面的质感,让页面更美观。关键是要找到一个平衡点,抢了内容的风头,宣兵夺主可就不妙了。

background属性支持使用url()函数通过链接的方式引入一个指定纹理或样式的图片。图片链接地址在括号内,一般会用引号抱起来

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

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

应用视觉设计:使用 CSS Transform scale 属性可以更改元素的大小

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

p{
transform:scale(); //scale() 调整元素的缩放比例
}

应用视觉设计:使用CSS Transform scale 属性在悬停时缩放元素

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

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

p:hover{
transform:scale(2.1); //缩放比例为2.1
}

应用视觉设计:使用 CSS Transform skex 属性沿X轴倾斜元素

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

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

p{
transform:skewX(-32deg);//沿着X轴旋转-32度
}

应用视觉设计:使用 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是可选的。

box-shadow:offset-x offset-y blur-radius spread-radius color;
box-shadow:25px 10px 0px 0px yellow;
<style>
.content{
position:absolute;
top:;
right:;
bottom:;
left:;
margin:auto;
height:100px;
width:100px; background-color:transparent; //原图形透明
border-radius:%;盒子的圆滑度
box-shadow:25px 10px 0px 0px blue;
} </style>
<div class="content"></div>

应用视觉设计:使用 CSS 和 HTML 创建更复杂的形状

世界上最流行的形状非心形莫属,用纯CSS创建一个心形。需要先了解 :before和 :after伪类。

这些伪类用来在选择元素之前和之后添加一些内容。在下面的例子里,:before伪类元素用来给class为heart的元素添加一个正方形

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

:before和:after必须配合content来使用。这个属性通常用来给元素添加内容诸如图片或文字。

当:before和:after伪类用来添加某些形状而不是图片或文字时,content属性仍然是必须的,但是它的值可以是空字符串。

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

class为heart元素的:after伪类添加了一个粉色的正方形,正方形的height和width分别为50px。由于设置了其边框半径为50%,所以正方形为圆形,同时其相对位置为距离left 0px,bottom偏移25px

应用视觉设计:了解 CSS 的关键帧和动画是如何工作的

如果要给元素添加动画,你需要了解animation属性以及@keyframes规则。

animation属性控制动画的外观,@keyframes规则控制动画中各阶段的变化。总共有8个animation属性。

  • animation-name设置动画的名称,也就是要绑定的选择器的@keyframes的名称
  • animation-duration设置动画所花费的时间
  • animation-fill-mode:forwards; 设置动画结束始终高亮
  • animation-iteration-count:infinite;设置动画播放次数,infinite无限循环播放

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

  • opacity:0.1;设置动画元素隐身度
<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:1s;
}
@keyframes width{
100%{
width:40px;
}
}
</style>
<img src="https://bit.ly/smallgooglelog" alt="Google's Logo" />

下面是在按钮悬停时改变按钮颜色的例子

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

应用视觉设计:修改动画的填充模式

注意动画在1s之后重制了,所以按钮又变回了原来的颜色。而我们想要的效果是按钮在悬停时始终高亮。

这可以通过吧animation-fill-mode设置成forwards来实现

animation-fill-mode指定了在动画结束时元素的样式。你可以像这样设置它:

animation-fill-mode:forwards;

应用视觉设计:使用 CSS 动画创建运动

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

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

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

应用视觉设计:通过从左到右淡化元素来创建视觉方向

改变动画元素的opacity,使其在到达屏幕右侧时渐隐。

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

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

应用视觉设计:使用无限的动画计数制作永不停止的动画

animation-iteration-count,这个属性允许你控制动画循环的次数。

animation-iteration-count:3; //动画会播放3次
animation-iteration-count:infinite; //动画会一直运行

应用视觉设计:使用无限的动画计数制作 CSS 心跳

用animation-iteration-count 属性创造持续动画的例子,它基于前面创建的心形。

心跳动画的每一秒包含两个部分。

heart元素(包括:before和:after)使用transform属性改变其大小,背景div使用background属性改变其颜色

<style>
.back{
position:fixed;
padding:;
margin:;
top:;
left:;
width:100%;
height:100%;
background:white;
animation-name:backDiv;
animation-duration:1s;
animation-iteration-count:infinite;
}
.heart{
position:absolute;
margin:auto;
top:;
right:;
bottom:;
left:;
background-color:pink;
height:50px;
width:50px;
transform:rotate(-45deg);
animation-name:beat;
animation-duration:1s;
animation-iteration-count:infinite;
}
.heart:after{
content:"";
background-color:pink;
border-radius:50%;
width:50px;
height:50px;
position:absolute;
top:0px;
left:25px;
}
.heart:before{
content:"";
width:50px;
height:50px;
border-radius:50%;
background-color:pink;
position:absolute;
bottom: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规则以使两个小星星不同的频率闪烁。

应用视觉设计:以可变速率来给多个元素添加动画

通过改变多个元素的animation-duration来达到同样的效果。

每个星星的animation-duration属性为不同值使其具有不同的闪烁频率

应用视觉设计:使用关键字更改动画定时器

在css动画里,animation-timing-function规定动画的速度曲线。

速度曲线定义动画从一套css样式变成另一套所用的时间。

如果要描述的动画是一辆车在指定时间内(animation-duration)从A运动到B,那么animation-timing-function表述的就是车在运动中的加速和减速等过程。

已经有了很多预定义的值可以直接使用于大部分场景。

比如,默认值ease,动画以低速开始,然后加快,以结束前变慢

ease-out,动画以高速开始,以低速结束;

ease-in,动画以低俗开始,以高速结束

linear,动画从头到尾的速度都是相同的

<style>
.balls{
width:50px;
height:50px;
border-radius:50%;
background:linear-gradient(
35deg,
#ccffff,
#ffffcc
);
position:absolute;
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 ball1"></div>
<div class="balls 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一致。换言之,元素匀速运动

应用视觉设计:使用贝塞尔曲线移动图形

前面涉及的ease-out预定义值描述了动画以告诉开始低俗结束。ease-out预定义值可以用贝塞尔曲线函数实现。

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

animation-timing-function:cubic-bezier(0,0,0.58,1); //高速开始,低速结束 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 的。这样才能模拟杂耍球运动。

css应用视觉设计的更多相关文章

  1. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. 应用视觉设计——CSS实现线性渐变效果

    在freeCodeCamp中应用视觉设计的课程中,介绍了一种通过使用CSS属性实现线性渐变效果. 1.线性渐变: background:linear-gredient(gradient-directi ...

  3. HTML和xhtml,CSS

    索引: 初学者入门书籍 高级进阶书籍 W3C官方手册 网站架构 移动平台网站开发 视频资源 开发工具 初学者入门书籍: 中文电子书    深入浅出html pdf中文版 魅丽的网页设计 JAVA WE ...

  4. CSS架构

    CSS架构 有趣的是,我们通常不这样评判其他语言.一个Rails开发者不会因为他写的代码规范就认为他是一个好的开发者.因为这是最基本的.当然它必须是满 足规范,除此以外还要考虑其他方面:代码是否有可读 ...

  5. 有关于CSS的面试题和练习

    如果你处在一个需要面试别人有关于CSS方面技巧和知识,一时想起来还真有点难.我把我能想出来的整理在一起,提供给大家参考. 练习要做 正如他们说的,大家实际工作很重要.当然,大家通过工作练习更为重要.这 ...

  6. CSS中filter滤镜学习笔记

    1.CSS静态滤镜样式 (filter)(只有IE4.0以上支持)  CSS静态滤镜样式的使用方法:{ filter : filtername( parameters1, parameters2, . ...

  7. (转)CSS字体大小: em与px、pt、百分比之间的对比

    CSS样式最混乱的一个方面是应用程序中文本扩展的font-size属性.在CSS中,你可以用四个不同的单位度量来显示在web浏览器中的文本 大小.这四个单位哪一种最适合Web? 这个问题引起了广泛的争 ...

  8. HTML, CSS学习笔记(完整版)

    第一章 div布局 前几课内容 .htm是早期的后缀.由于那时仅仅能支持长度为3的后缀.因此html与htm是一样的. shtml是server先处理然后再交给浏览器处理 #HTML小知识#之#XHT ...

  9. 详解CSS设置默认字体样式

    浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏 ...

随机推荐

  1. cognos服务器性能测试诊断分析优化过程记录

    前段时间客户方一个系统上线后出现性能问题,就是查询报表的时候出现宕机现象,应项目组要求过去帮忙测试优化问题.  该项目的架构相对比较复杂,登录后要先进行认证服务器认证用户然后登录到应用系统A,在跳转到 ...

  2. 新闻实时分析系统-Flume+HBase+Kafka集成与开发

    1.下载Flume源码并导入Idea开发工具 1)将apache-flume-1.7.0-src.tar.gz源码下载到本地解压 2)通过idea导入flume源码 打开idea开发工具,选择File ...

  3. [转载] Docker 实现原理

    目录 Namespaces 进程 网络 libnetwork 挂载点 chroot
 CGroups UnionFS 存储驱动 AUFS 其他存储驱动 总结 原文链接:https://dravenes ...

  4. Linux -- 进程管理之僵尸进程

    UNIX 存在一种机制:在每个进程退出的同时,操作系统释放该进程所有资源,但仍然保留一定的信息(PID / Status / runtime),直到父进程执行 wait() / waitpid(),以 ...

  5. PHP通用分页类

    Page.class.php <?php/** * 分页类 * * 调用方式: * $p=new Page(总条数,显示页数,当前页码,每页显示条数,[链接]); * print_r($p-&g ...

  6. input 输入框 只能输入数字、字母、汉字等

    1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafte ...

  7. 与karma、angular的第一次亲密接触

    首先要了解什么是karma,karma干嘛用的,它的好朋友jasmine又是啥?这些文章可以帮助你: karma干嘛的? angular与karma1 angular与karma2 看了以上几篇文章之 ...

  8. 不给糖果就捣乱,用Python绘制有趣的万圣节南瓜怪【华为云分享】

    关于万圣节 万圣节又叫诸圣节,在每年的11月1日,是西方的传统节日:而万圣节前夜的10月31日是这个节日最热闹的时刻.在中文里,常常把万圣节前夜(Halloween)讹译为万圣节(All Saints ...

  9. 解密国内BAT等大厂前端技术体系-阿里篇(长文建议收藏)

    进入2019年,大前端技术生态似乎进入到了一个相对稳定的环境,React在2013年发布至今已经6年时间了,Vue 1.0在2015年发布,至今也有4年时间了. 整个业界在前端框架不断迭代中,也寻找到 ...

  10. 为什么QQ能帮你找到失散多年的兄弟?----图论

    编程三分钟的第 44 篇原创文章 为什么qq里"可能认识的人"功能推荐的如此精准? 为什么两个没有什么联系的朋友会相互认识? 一切的背后到底是道德的沦丧,还是人性的扭曲 ? 让我们 ...