应用视觉设计: 创建一个 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));
应用视觉设计: 使用 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(2); //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:0;
- right:0;
- bottom:0;
- left:0;
- margin:auto;
- height:100px;
- width:100px;
- background-color:transparent; // 原图形透明
border-radius:50%; 盒子的圆滑度
- 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:0;
- bottom:0;
- right:0;
- left:0;
- 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: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{
- 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 的. 这样才能模拟杂耍球运动.
来源: http://www.bubuko.com/infodetail-3342148.html