CSS 效果
zKing 2019-01-09 CSS
# box-shadow
box-shadow 的作用
- 营造层次感（立体感）
- 充当没有宽度的边框
- 特殊效果，例如可以一个 div 用来画一个机器猫，但是有性能缺陷
div {
/*向右移动距离,向下移动距离,模糊程度*/
box-shadow: yellow 100px 50px 30px;
}
# text-shadow
box-shadow 主要是用来做块级元素的阴影，而文字阴影则是是使用另外一个 css 属性——“text-shadow”
/*指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：*/
body {
text-shadow: 10px 10px 5px grey;
}
# border-radius
配合 border 属性可以用来画“圆角矩形，半圆，扇形，甚至一些奇怪图形”
div {
width: 100px;
height: 100px;
}
.circle {
border-radius: 50%;
}
.half-round {
height: 50px;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
}
.fanshaped {
border-top-left-radius: 50%;
}
# clip-path
clip-path 可以对容器进行裁剪，但是存在兼容性问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.container {
width: 400px;
height: 300px;
border: 1px solid red;
background: url(./panda.jpg) no-repeat center center;
padding: 10px;
clip-path: circle(50px at 100px 100px);
transition: clip-path 0.4s;
}
.container:hover {
clip-path: circle(80px at 100px 100px);
}
</style>
</head>
<body>
<div class="container">
你好，我是熊猫
</div>
</body>
</html>
# 2D 转换
- 2D 转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。
- 主要是使用 CSS3 的
tranform属性- translate()方法，根据左(X 轴)和顶部(Y 轴)位置给定的参数，从当前元素位置移动。
- rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
- scale()方法，该元素增加或减少的大小，取决于宽度（X 轴）和高度（Y 轴）的参数：
- skew()包含两个参数值，分别表示 X 轴和 Y 轴倾斜的角度，如果第二个参数为空，则默认为 0，参数为负表示向相反方向倾斜。
- matrix()方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid black;
}
#div2 {
transform: translate(50px, 100px);
}
#div3 {
margin-top: 150px;
transform: rotate(90deg);
}
#div4 {
margin-left: 200px;
transform: scale(2, 3);
}
#div5 {
margin-left: 400px;
transform: skew(30deg, 20deg);
}
#div6 {
transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
}
</style>
</head>
<body>
<div>
<p>css-2D转换</p>
</div>
<div id="div6">
<p>css-2D matrix</p>
</div>
<div id="div2">
<p>css-2D-translate</p>
</div>
<div id="div3">
<p>css-2D-rotate</p>
</div>
<div id="div4">
<p>css-2D-scale</p>
</div>
<div id="div5">
<p>css-2D-skew</p>
</div>
</body>
</html>
# 3D 变换
- “3D 变换”是基于矩阵运算的
- 主要是使用 CSS3 的
tranform属性- 方法依旧和“2D 变换”的方法一致，只是更完善，多了 z 轴方向上的方法，和 3d 旋转的方法
简单的例子如下：
div {
width: 100px;
height: 100px;
border: 1px solid black;
/* transform: rotateX(120deg); 上下对折 */
/* transform: rotateY(120deg); 左右对折*/
transform: rotateZ(120deg); /* 空间旋转 */
}
另外还有 3 个属性需要注意
- perspective:[number]
- 属性定义 3D 元素距视图的距离，以像素计算。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
- 目前浏览器对 perspective 属性支持性还不够
- transform-style:preserve-3d
- transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。必须与 transform 属性一同使用。
- transform-origin:[percent][percent]，
- 一个是 x 轴的参数，第二个是 y 轴的参数
- transform-origin 允许转换元素的位置。
简单来说
perspective就是 3D 透明度transform-style:preserve-3d则是为了让子元素也可以使用 3D 转换。transform-origin用来定义旋转的“圆心”的位置
关于这部分的例子，请直接看动画的部分
酌情使用"3D 变换"，如果网页上的大部分都是使用 3D 引擎来渲染，会给 GPU 带来太大的负担，酌情使用反而可以做到性能优化
# CSS 动画
关于 CSS 动画，可以在 chrome 开发者工具的 “Animations” 中进行调试
- 原理
- 视觉暂留作用
- 画面逐渐变化
- 作用
- 愉悦感
- 引起注意
- 反馈
- 掩饰
- 性能
- 性能不坏，部分情况下优于 js，但 js 可以做到更好
- IE 兼容性差
- 部分高危属性，box-shadow 等，无论使用哪种方式，性能都会比较差。
# 补间动画（过渡动画）
- 可以使用
transition + transfrom可以用来实现补间动画（过渡动画） - 补间动画需要有状态变化，即需要有触发操作
transition
transition 属性是一个简写属性，用于设置四个过渡属性：
- transition-property 规定设置过渡效果的 CSS 属性的名称。
- transition-duration 规定完成过渡效果需要多少秒或毫秒。
- transition-timing-function 规定速度效果的速度曲线。
- transition-delay 定义过渡效果何时开始。
看一下简单的示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.container {
width: 100px;
height: 100px;
background: red;
transition: all 1s linear 0.5s;
/* https://matthewlein.com/tools/ceaser 这个网站可以做到想要的变换效果*/
/* transition-timing-function: cubic-bezier(0.465, -0.460, 0.525, 1.435); */
}
.container:hover {
width: 800px;
background: blue;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
以下是一个正方体 3D 旋转的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.container {
margin: 50px;
padding: 10px;
border: 1px solid red;
width: 200px;
height: 200px;
position: relative;
perspective: 500px;
}
#cube {
width: 200px;
height: 200px;
transform-style: preserve-3d;
transform-origin: 100% 50%;
transform: translateZ(-100px);
transition: transform 0.4s;
}
#cube div {
width: 200px;
height: 200px;
position: absolute;
line-height: 200px;
font-size: 50px;
text-align: center;
}
#cube:hover {
transform: translateZ(-100px) rotateX(90deg) rotateY(90deg);
}
.front {
transform: translateZ(100px);
background: rgba(255, 0, 0, 0.3);
}
.back {
transform: translateZ(-100px) rotateY(180deg);
background: rgba(0, 255, 0, 0.3);
}
.left {
transform: translateX(-100px) rotateY(-90deg);
background: rgba(0, 0, 255, 0.3);
}
.right {
transform: translateX(100px) rotateY(90deg);
background: rgba(255, 255, 0, 0.3);
}
.top {
transform: translateY(-100px) rotateX(-90deg);
background: rgba(255, 0, 255, 0.3);
}
.bottom {
transform: translateY(100px) rotateX(90deg);
background: rgba(0, 255, 255, 0.3);
}
</style>
</head>
<body>
<div class="container">
<div id="cube">
<div class="front">1</div>
<div class="back">2</div>
<div class="right">3</div>
<div class="left">4</div>
<div class="top">5</div>
<div class="bottom">6</div>
</div>
</div>
</body>
</html>
# 关键帧动画
- 使用
@keyframe + animation可以实现 关键帧动画， - 关键帧动画与元素状态的变化无关，相当于多个补间动画
- 定义更加灵活，能控制更精细，可以使用 js 来进行控制
animation
animation 属性是一个简写属性，用于设置六个动画属性：
- animation-name 规定需要绑定到选择器的 keyframe 名称。。
- animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
- animation-timing-function 规定动画的速度曲线。
- animation-delay 规定在动画开始之前的延迟。
- animation-iteration-count 规定动画应该播放的次数。
- animation-direction 规定是否应该轮流反向播放动画。
- animation 需要与 @keyframe 配合使用
animation-play-state: paused|running;属性不能简写在 animation 中，这个属性用来规定动画正在运行还是暂停。可以在 JavaScript 中使用该属性，这样就能在播放过程中暂停动画。
以下是“关键帧动画”的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.container {
width: 100px;
height: 100px;
background: red;
animation: run 2s linear reverse forwards;
animation-iteration-count: infinite;
/* animation-play-state: paused; */
}
@keyframes run {
0% {
width: 100px;
}
50% {
width: 800px;
}
100% {
width: 100px;
}
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
# 逐帧动画
- 可以使用
@keyframe + animation来做 逐帧动画 - 逐帧动画主要是使用于无法进行补间计算的关键帧动画
- 资源较大，需要控制好大小和时长
以下是“逐帧动画”的例子，是用“逐帧动画”来完成“雪碧图动画”
- 雪碧图是有多张图片混合成的
- 可以使用
background-transiton和@keyframe + animation来让雪碧图中的图片模拟成一个 gif 图。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.container {
width: 100px;
height: 100px;
border: 1px solid red;
background: url(./animal.png) no-repeat;
animation: run 1s infinite;
/* 使用以下属性来控制时长 */
animation-timing-function: steps(1);
}
@keyframes run {
0% {
background-position: 0 0;
}
12.5% {
background-position: -100px 0;
}
25% {
background-position: -200px 0;
}
37.5% {
background-position: -300px 0;
}
50% {
background-position: 0 -100px;
}
62.5% {
background-position: -100px -100px;
}
75% {
background-position: -200px -100px;
}
87.5% {
background-position: -300px -100px;
}
100% {
background-position: 0 0;
}
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>