3.04.14渐变、过渡、动画、转换、透视
1.渐变
1.线性渐变
- CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于gradient数据类型，是一种特别的image数据类型。
-
- 语法：linear-gradient(方向,颜色及占比,颜色及占比,颜色及占比…)
//1.默认情况下，线性渐变的方向是从上到下
.simple-linear {
background: linear-gradient(blue, pink);
}
//2.默认情况下，线性渐变的方向是从上到下， 你可以指定一个值来改变渐变的方向。
.horizontal-gradient {
background: linear-gradient(to right, blue, pink);
}
//3.你甚至可以设置渐变方向为从一个对角到另一个对角。s
.diagonal-gradient {
background: linear-gradient(to bottom right, blue, pink);
}
//4.如果你想要更精确地控制渐变的方向，你可以给渐变设置一个具体的角度。
.angled-gradient {
background: linear-gradient(70deg, blue, pink);
}
//5.可以给颜色占比
/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);
//6. 形成条纹：
.box-3 {
background-image: linear-gradient(
to right,
red 10%,/*开始颜色*/
red 20%,/*结束颜色*/
green 20%,/*结束颜色*/
green 30%,/*结束颜色*/
yellow 30%,/*结束颜色*/
yellow 40%,/*结束颜色*/
purple 40% /*结束颜色*/
)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div[class^='box'] {
width: 200px;
height: 200px;
margin: 5px;
}
.box-1 {
/* background-color: #ccc; */
/* background: linear-gradient(参数); */
/* background-image: linear-gradient(参数); */
/* 线性渐变（背景颜色从元素的一侧往另一侧逐渐改变） */
background-image: linear-gradient(
to right,
red,/*开始颜色*/
green ,/*结束颜色*/
yellow,/*结束颜色*/
purple/*结束颜色*/
)
}
.box-2 {
background-image: linear-gradient(
to right,
red 10%,/*开始颜色*/
green 20%,/*结束颜色*/
yellow 30%,/*结束颜色*/
purple 40% /*结束颜色*/
)
}
.box-3 {
background-image: linear-gradient(
to right,
red 10%,/*开始颜色*/
red 20%,/*结束颜色*/
green 20%,/*结束颜色*/
green 30%,/*结束颜色*/
yellow 30%,/*结束颜色*/
yellow 40%,/*结束颜色*/
purple 40% /*结束颜色*/
)
}
.box-3 {
background-image: linear-gradient(
135deg,
red 10%,/*开始颜色*/
red 20%,/*结束颜色*/
green 20%,/*结束颜色*/
green 30%,/*结束颜色*/
yellow 30%,/*结束颜色*/
yellow 40%,/*结束颜色*/
purple 40% /*结束颜色*/
)
}
/* 线性渐变（to left top right bottom） 角度 0 ~ 360deg */
</style>
</head>
<body>
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
</body>
</html>
2.径向渐变
- radial-gradient() CSS函数创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成。它的形状可以是圆形（circle）或椭圆形（ellipse）。这个方法得到的是一个CSS gradient数据类型的对象，其是 image的一种。
- 径向渐变(Radial gradients)由其中心点、边缘形状轮廓、两个或多个色值结束点（color stops）定义而成。
- 语法：background-image: radial-gradient(shape ||size, at position, start-color, …, last-color);
- 在参数中shape与size只取一个
- shape 确定圆的类型:
- ellipse (默认): 指定椭圆形的径向渐变。
- circle ：指定圆形的径向渐变
- size 定义渐变的大小，可能值：
- farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
- closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
- closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
- farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
- position 定义渐变的位置。可能值：
- center（默认）：设置中间为径向渐变圆心的纵坐标值。
- top：设置顶部为径向渐变圆心的纵坐标值。
- bottom：设置底部为径向渐变圆心的纵坐标值。
- start-color, …, last-color 用于指定渐变的起止颜色。
- 例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
[class^='box'] {
width: 200px;
height: 200px;
margin: 10px;
}
/*
径向渐变： 背景色从中心往四周辐射发生改变。
中心坐标 四周
*/
.box-1 {
background-image: radial-gradient(at center center,
red,
green,
yellow,
purple);
}
.box-2 {
background-image: radial-gradient(at left center,
red,
green,
yellow,
purple);
}
.box-3 {
background-image: radial-gradient(at center center,
red 10%,
red 30%,
green 30%,
green 60%,
yellow 60%);
}
.box-4 {
background-image: radial-gradient(
closest-side at 50px 50px,
red,
yellow,
green);
}
/*
https://www.runoob.com/css3/css3-gradients.html
*/
</style>
</head>
<body>
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
<div class="box-4"></div>
</body>
</html>
2.过渡
1.过渡
- CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。
- transition-property 需要过渡的属性
- transition-delay 过渡延迟执行的时间
- transition-duration 完成过渡的时间
- transition-timing-function 过渡时的效果
- linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
- ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。默认值。
- ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
- ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
- ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
- cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
- transition 简写属性 transition：property duration delay timing-function
- 例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
/* 过渡属性名称 */
/* transition-property: width,height; */
transition-property: all;
-webkit-transition-property: all;
/* 过渡持续的时间 s：秒 ms：毫秒 */
transition-duration: 2s;
/* 贝塞尔曲线（有两个控制点）控制运动的状态 cubic-bezier(x0, y0, x1, y1) */
/* 可以找线上的工具找出贝塞尔曲线的控制点 */
/* linear 匀速 */
/* ease-in 先慢后快 , ease-out 先快后慢*/
transition-timing-function: linear;
/* 延迟执行过渡 */
transition-delay: 0s;
/*
-webkit- 谷歌 safari
-moz- 火狐
-o- 欧鹏浏览
-ms- IE
*/
}
.box:hover {
width: 500px;
height: 300px;
}
/* 结论：
采用css3制作一些动画效果，可以减少dom操作，也是说不用编写animate.js工具。
*/
.demo {
height: 100px;
margin-top: 10px;
background-color: #ccc;
}
.demo .bar {
width: 100px;
height: 100px;
background-color: green;
/* 简写 */
transition: margin-left 1s 0s linear ;
}
.demo:hover .bar {
margin-left: 500px;
}
</style>
</head>
<body>
<!-- 100px 可以看见这个过程变化 500px -->
<div class="box"></div>
<div class="demo">
<div class="bar"></div>
</div>
</body>
</html>
2.监听过渡结束的事件
- transitionend事件是过渡结束时触发的
- 例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
/* 过渡属性 */
transition: width .5s;
}
.box:hover {
width: 500px;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
// 编码：
var box = document.querySelector(".box");
// console.log(box);// dom对象（标签）
// 监听过渡结束的事件（行为）
box.addEventListener("transitionend",function(){
console.log("过渡结束了");
})
// 兼容写法
box.addEventListener("webkitTransitionend",function(){
console.log("过渡结束了");
})
// 元素到达目标值移除过渡 ，延迟2秒重新设置过渡
// var d = null;
// box.addEventListener("transitionend",function(){
// console.log("过渡结束了");
// // 移除过渡属性
// box.style.transition = "none";
// // 判断变量d是否有之 有就清除掉
// if(d) clearTimeout(d);
// d= setTimeout(function(){
// // 设置元素的过渡
// box.style.transition = "width .5s";
// clearTimeout(d);
// },2000)
// })
</script>
</body>
</html>
3.动画
- CSS animations 使得可以将从一个CSS样式配置转换到另一个CSS样式配置。动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。
1. 使用步骤：
- 定义动画
/*写法1：*/
@keyframes 动画名A{
from{
属性1：值
}
to{
属性1：值
}
}
/*写法2：*/
@keyframes 动画名A{
0%{
属性1：值
}
40%{
属性1：值
}
100%{
属性1：值
}
}
/*
因为动画的时间设置是通过CSS样式定义的，关键帧使用percentage来指定动画发生的时间点。0%表示动画的第一时刻，100%表示动画的最终时刻。因为这两个时间点十分重要，所以还有特殊的别名：from和to。这两个都是可选的，若from/0%或to/100%未指定，则浏览器使用计算值开始或结束动画。
*/
- 使用动画
.box{
animation-name:动画名A /*必须有，不然没有效果*/
/*动画持续的时间*/
anination-duration:2s ;
/*还可以添加其他很多的动画属性*/
}
/*简写*/
.box{
animation: name,duration, timing-function,delay,iteration-count,direction,fill-mode, play-state
}
- animation的子属性有:
- animation-delay
- 设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。
- animation-direction
- 设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。
- normal 每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。
- alternate 动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为 ease-out。计数取决于开始时是奇数迭代还是偶数迭代
- reverse 反向运行动画，每周期结束动画由尾到头运行。
- alternate-reverse 反向交替， 反向开始交替。动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。
- animation-duration
- animation-iteration-count
- 设置动画重复次数， 可以指定infinite无限次重复动画
- infinite 无限循环播放动画.
- number 实际数字
- animation-name
- animation-play-state
- 允许暂停和恢复动画。
- running 当前动画正在运行。
- paused 当前动画已被停止。
- animation-timing-function
- 设置动画速度， 即通过建立加速度曲线，设置动画在关键帧之间是如何变化。类似于transition-timing-function
- linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
- ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。默认值。
- ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
- ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
- ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
- cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
- animation-fill-mode
- 指定动画执行前后如何为目标元素应用样式。
- none 当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值。
- forwards 目标将保留由执行期间遇到的最后一个关键帧计算值。最后一个关键帧取决于animation-direction和animation-iteration-count的值
- animation-direction：normal; animation-iteration-count：even or odd; last keyframe encountered：100% or to
- animation-direction：reverse; animation-iteration-count：even or odd; last keyframe encountered：0% or from
- animation-direction：alternate; animation-iteration-count：even; last keyframe encountered：0% or from
- animation-direction：alternate; animation-iteration-count： odd;last keyframe encountered：100% or to
- animation-direction：alternate-reverse; animation-iteration-count：even; last keyframe encountered：100% or to
- animation-direction：alternate-reverse; animation-iteration-count：odd; last keyframe encountered：0% or from
- backwards 动画将在应用于目标时立即应用第一个关键帧中定义的值，并在animation-delay期间保留此值。 第一个关键帧取决于animation-direction的值：
- animation-direction:normal or alternate ;first relevant keyframe:0% or from
- animation-direction:reverse or alternate-reverse ;first relevant keyframe:100% or to
- both
- 动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。
2. 用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
/* 外边距 */
margin-left: 0;
}
/* 1.0 定义动画 */
@keyframes move {
0% {
margin-left: 0;
}
100% {
margin-left: 500px;
}
}
/* 2.0 使用动画 */
.demo-box{
/* 使用动画 s:秒 ms：毫秒*/
animation-name: move;
/* 动画持续时间 */
animation-duration: 2s;
/* linear 匀速 */
/* animation-timing-function: steps(10); */
/* 运动状态 */
animation-timing-function:linear;
/* 停留的位置 */
animation-fill-mode: forwards;
/* 运动的方向 reverse: 反向运行 ，alternate: 正常 */
animation-direction: normal;
margin-bottom: 20px;
}
.example-box {
/* 简写属性 */
animation: move 2s linear 0s 2 alternate forwards;
}
</style>
</head>
<body>
<div class="box demo-box"></div>
<div class="box example-box"></div>
</body>
</html>
4.转换
- 转换可以使得元素：位移、旋转、缩放、变形
- 转换的元素不会脱离正常文档流
- 位移：
- 在某个轴上移动
- 语法：
- transform: translate3d(x轴移动距离, y轴移动距离, z轴移动距离);
- transform: translateX(2em) translateY(2em) translateZ(2em);
- 旋转
- 围绕某个轴旋转
- 语法：
- transform:rotateX(10deg) rotateY(10deg) rotateZ(10deg);
- transform:rotate3d(1,1,1,60deg);
- 围绕着(0,0,0)到(1,1,1)这根轴线旋转60度
- 缩放
- 在某个轴上缩放
- 语法：
- transform:scaleX(2) scaleY(.5) scaleZ(2);
- transform:scale3d(2,2,2);
- 变形
- 某个轴角度倾斜
- 语法：
- transform: skewX(30deg) skewY(30deg);
- transform: skew(30deg, 20deg);
- 用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 50px;
}
.box {
width: 100px;
height: 100px;
background-color: red;
margin-top: 20px;
/* border: 1px solid #fff; */
}
/*
transform : 是转换
参数:
transform : 位移 旋转 缩放 变形；
*/
/*
位移： 设置元素的位置（元素不会不会脱离正常文档流。）
*/
.box-1 {
/* transform: translate(100px,0px); */
/* transform: translateX(200px) translateY(0px) translateZ(200px); */
transform: translate3d(100px,0px,0px);
}
/* 旋转：单位：deg 360 到 -360 */
.box-2 {
/* 围绕X轴旋转 视觉效果是改变了高度*/
/* transform: rotateX(80deg); */
/* 围绕Y轴旋转 视觉效果是改变了宽度*/
/* transform: rotateY(80deg); */
/* 围绕Z轴旋转 */
/* transform: rotateZ(45deg); */
/* 围绕X和Y和Z所形成的对角线旋转 */
transform: rotate3d(1,1,0,60deg);
}
/* 缩放
值：倍数 ； 1是正常的值 >1 放大了 ； 小于1 缩小了
*/
.box-3 {
/* X轴方向缩小0.5倍 */
/* transform: scaleX(.5); */
/* Y轴方向放大1.5倍 */
/* transform: scaleY(1.5); */
/* Z轴放大 */
/* transform: scaleZ(1.5); */
/* X轴和Y轴都放大 */
/* transform: scale(1.5); */
/* X和Y和Z轴放大1.2倍 */
transform: scale3d(1.2,1.2,1.2);
}
/* 变形
X 和 Y 轴角度倾斜
*/
.box-4 {
/* transform: skewX(-30deg); */
/* transform: skewY(-30deg); */
transform: skew(30deg);
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box box-1">1</div>
<div class="box"></div>
<div class="box box-2">2</div>
<div class="box"></div>
<div class="box box-3">3</div>
<div class="box"></div>
<div class="box box-4">4</div>
</body>
</html>
- 设置转换原点
- transform-origin CSS属性让你更改一个元素变形的原点。
- 默认的转换原点是 center
- 设置原点后，旋转就不用参考XYZ轴了，直接参考原点，可以用rotate（）的方法进行旋转，rotate（）就是围绕原点旋转的方法
- 语法：
- transform-origin:
- 一个值：
- 必须是实际长度,或者left, center, right, top, bottom关键字中的一个。
- 两个值：
- 其中一个必须是实际长度,或left, center, right关键字中的一个。
- 另一个一个必须是实际长度,或top, center, bottom关键字中的一个。
- 三个值：
- 前两个值和只有两个值时的用法相同。
- 第三个值必须是实际长度,。它始终代表Z轴偏移量。
- 例如：
- transform-origin:100px 100px //距离容器左上角的距离
- transform-origin:center
- 例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
padding: 0;
margin: 0;
list-style: none;
width: 400px;
height: 400px;
border: 3px solid #000;
/* border-radius: 50%; */
position: relative;
}
ul li {
width: 20px;
height: 400px;
background-color: red;
position: absolute;
left: 50%;
margin-left: -10px;
top: 0;
/* 设置旋转中心（x,y） */
/* 设置转换原点 left right center bottom top */
transform-origin: center bottom;
}
ul:hover li {
transform: rotate(30deg);
}
</style>
</head>
<body>
<ul>
<li></li>
</ul>
</body>
</html>
5.perspective属性
- CSS 属性 perspective指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。 z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。
- 语法：perspective: 实际的数||none
- 数值越小，离得近的视觉越强
- 例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1
{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
perspective:150px;
-webkit-perspective:150px; /* Safari and Chrome */
}
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">HELLO</div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
