背景属性、transform

其他 2021-03-03 20:18:17 阅读次数: 0

背景属性

线性渐变

background-image:linear-gradient(颜色1，颜色2…)

颜色节点均匀分布的渐变

  • 至少两个颜色

    linear-gradient(颜色1，颜色2…)

.box:nth-child(2){
    background-image:linear-gradient(#ff0000,blue,rgba(0,255,0,0.5),transparent,yellow);
}

控制颜色节点

linear-gradient(red 颜色节点1,red 颜色节点2,blue 颜色节点3);

  • 百分比
  • px
.box:nth-child(3){
	background-image:linear-gradient(red 0,red 50%,blue);
}
.box:nth-child(4){
     background-image:linear-gradient(red 0,red 20px,blue 30px,blue 40px);
 }

渐变重复

repeating-linear-gradient( ) ;

.box:nth-child(5){
   background-image:repeating-linear-gradient(red 0,red 20px,blue 20px,blue 40px);
 }

渐变方向

linear-gradient(方向,red,blue);

  • 关键字
    • to right / to left
    • to top / to bottom (默认)
    • to right top / to left top /to right bottom / to left bottom
 .box:nth-child(3){
	background-image:linear-gradient(to top,red,blue);
 }
 .box:nth-child(4){
 	background-image:linear-gradient(to right bottom,red,blue);
 }
  • 角度(deg)
    • 0deg == to top
    • 90deg = to right
.box:nth-child(6){
     background-image:linear-gradient(90deg,red,blue);
}

径向渐变

background-image:radial-gradient(颜色1，颜色2…)

颜色节点均匀分布的渐变

 .box:nth-child(1){
     background-image:radial-gradient(red,blue);
 }

控制颜色节点

 .box:nth-child(3){
    background-image:radial-gradient(red 0, red 20px,blue 20px,blue 40px);
}
.box:nth-child(2){
	background-image:radial-gradient(red 0, red 30%,blue);
}

渐变重复

.box:nth-child(4){
	background-image:repeating-radial-gradient(red 0, red 20px,blue 20px,blue 40px);
}

渐变形状

radial-gradient(形状,red,blue);

 background-image:radial-gradient(ellipse,red,blue);
  • ellipse 椭圆（默认）—— 容器如果是宽高1：1显示为正圆
  • circle正圆

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FRyLWzJt-1605793580401)(…/AppData/Roaming/Typora/typora-user-images/image-20201118094207706.png)]

image-20201118094225591

用户界面

resize是否允许用户重置元素大小

  • none不允许
  • horizontal 允许调整【水平方向】大小
  • vertical 允许调整【垂直方向】大小
  • both 允许调整【水平和垂直】方向大小

注：配合overflow属性不为visible的值实现（auto\scroll\hidden)

box-sizing 盒子的组成模式

  • border-box 边框盒
    • 定义宽、高包含padding和border
    • 总占位——》宽、高+margin
    • 怪异盒模型
  • content-box 内容盒
    • 定义宽、高【不】包含padding和border
    • 总占位——》宽、高+padding+border+margin
    • 标准盒模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F0kDfYVO-1605793580403)(…/AppData/Roaming/Typora/typora-user-images/image-20201118104656235.png)]

多栏布局

column-count栏目个数

  • 数值
  • auto( 由column-width控制)

column-width栏目宽度

  • 长度值
  • auto( 由column-count控制)

column-gap 栏目间距

  • 长度值 （默认1em）

column-rule栏目边框

  • column-rule-width栏目边框的宽度

  • column-rule-style栏目边框的样式

    • solid
    • dashed
    • dotted…

  • column-rule-color栏目边框的颜色

  • 简写：样式 宽度 颜色（空格隔开）

column-span 跨栏合并

  • 1默认值
  • all 所有

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gQd2fk8M-1605793580406)(…/AppData/Roaming/Typora/typora-user-images/image-20201118105853681.png)]

transition过渡

为一个元素的一种状态向另一种状态变化添加效果

参与过渡的属性transition-property

  • all 所有
  • 某一个属性名称

过渡持续的时间transition-duration

  • 0 （不会产生过渡效果）
  • s秒/ms毫秒 1s = 1000毫秒

过渡时间函数(动画类型)transition-timing-function

  • ease 缓动（默认）
  • linear 均速
  • ease-in 加速
  • ease-out 减速
  • ease-in-out 先加速后减速

过渡延迟的时间transition-delay

  • 0 （不会产生延迟）
  • s秒/ms毫秒 1s = 1000毫秒

简写：

transition:参与过渡的属性 过渡持续时间 动画类型 延迟时间;

多重过渡

单个属性：

​ transition-property:多个值【逗号】隔开

transition-property: width,height;
transition-duration: 1s,0.5s;
transition-timing-function: ease-in,linear;
transition-delay:2s,0s;

简写：

​ transition：多组值 【逗号】隔开

transition:width 1s ease-in 2s,height 0.5s linear;

生成工具

https://cubic-bezier.com/#.17,.67,.83,.67

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OJU0BR0A-1605793580410)(…/AppData/Roaming/Typora/typora-user-images/image-20201118142608546.png)]

animation动画(帧动画)

定义动画

@keyframes 动画名字{
    from{}
    to{}
}

@keyframes 动画名字{
   0%{}
   100%{}
}

加浏览器前缀写法

@-webkit-keyframes changecolor {
  0%{background-color: red;}
  100%{background-color:pink;}
}
@-moz-keyframes changecolor {
  0%{background-color: red;}
  100%{background-color:pink;}
}

调用动画

animation-name动画名称

  • none 默认 无动画效果

  • 动画名称@keyframes定义的

animation-duration动画持续的时间

  • 0 默认 无动画效果
  • s/ms

animation-timing-function动画时间函数

  • ease 缓动（默认）
  • linear 匀速
  • ease-in 加速
  • ease-out 减速
  • ease-in-out 先加速后减速

animation-delay 动画延迟时间

  • 0 默认 不延迟
  • s/ms

animation-iteration-count动画执行的次数

  • 1 默认
  • 数值
  • infinite无限循环

animation-direction动画执行的方向

  • normal 正向 默认
  • reverse反向
  • alternate 正向反向交替进行
  • alternate-revese 反向正向交替进行

animation-play-state动画的播放状态

  • running播放 默认
  • paused暂停

animation-fill-mode动画的填充模式

控制动画在运动时间之外（进场之前和动画结束之后）的状态

  • none默认
  • forwards 动画在结束之后，停在结束状态
  • backwards 动画在等待进场时，停在第一帧状态
  • both 以上两者

简写

animation：动画名称 动画持续的时间 动画时间函数 动画延迟时间 动画执行的次数 方向 播放状态 填充模式;

  • 空格隔开

多组值

  • 【逗号】隔开
/* animation-name:move,changecolor;
animation-duration:1s,2s;
animation-delay:2s;
animation-fill-mode: both;  */

animation:move 1s 2s both,changecolor 2s 2s both;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HuwoB7fb-1605793580413)(…/AppData/Roaming/Typora/typora-user-images/image-20201118142544566.png)]

transform

2d转换的方法

translate(x,y)平移

  • 2个值，分别沿X轴、Y轴移动

  • 1个值，沿X轴平移

  • 取值

    • 长度值 （px）
    • 百分比( 相对于元素本身大小计算 )

  • translateX() 只沿x轴的平移

  • translateY() 只沿Y轴的平移

rotate(角度)旋转

  • 取值：角度（deg）
    • 正值：顺时针旋转 （向右）
    • 负值：逆时针旋转（向左）
  • 默认绕着元素中心旋转

scale(缩放倍率)缩放

  • scale(x,y)

    • 1个值 沿X轴和Y轴同时缩放
    • 2个值 分别沿X轴、Y轴缩放

  • 取值

    • 0-1之间缩小
    • 大于1放大
    • 负值，先反转再缩放

  • scaleX() 只沿x轴的缩放

  • scaleY() 只沿Y轴的缩放

skew(角度) 斜切

skew(x,y)

  • 1个值 沿X轴斜切
  • 2个值 分别沿X轴、Y轴斜切

取值

  • 正值

  • 负值 （方向相反）

  • skew() 只沿x轴的缩放

  • skew() 只沿Y轴的缩放

transform-origin变换基点

  • 2个值 水平方向位置 垂直方向的位置
  • 1个值 另一个值 center
  • 取值
    • 关键字
      • left center right 水平
      • top center bottom 垂直
    • px
      • 相对于元素左上角为0.0点的坐标值
    • 百分比
      • 相对于元素本身大小分别计算

3d转换方法

transform

旋转

  • rotateX(deg)
    • 正值 顺时针旋转(向上)
    • 负值 逆时针旋转(向下)
  • rotateY()
    • 正值 顺时针旋转(向右)
    • 负值 逆时针旋转(向左)
  • rotateZ()
    • 正值 顺时针旋转(向右)
    • 负值 逆时针旋转(向左)

平移

  • translateZ(长度值)
    • 正值 向前（越近）
    • 负值 向后（越远）

缩放

  • scaleZ(缩放比率)
    • 0-1 缩小
    • 大于1放大

简写（3d函数）

  • 平移：transform:translate3d(X,Y,Z)

    translate3d(100px,200px,300px)
||
transalteX(100px) translateY(200px) transalteZ(300PX)

  • 缩放：transform:scale3d(x,y,z)

    scale3d(1,2,3)
||
scaleX(1) scaleY(2) scaleZ(3)

  • 旋转

    rotate3d(tx,ty,tz,angle)

    • 通常tx,ty,tz取值0-1之间

    其中两个为0

    rotate3d(0,0,1，30deg)
||
rotateZ(30deg)

    rotate3d(1,0,0，30deg)
||
rotateX(30deg)

    rotate3d(0,1,0，30deg)
||
rotateY(30deg)

    其中两个值 不为0

    rotate3d(0.5,0.2,1，30deg)

rotateX  0.5*30 =  15deg
rotateY  0.2*30 =  6deg
rotateZ  1*30   =  30deg

perspective

视距

  • none(0)
  • 长度值
    • 值越大，透视效果越不明显
    • 值越小，透视效果越明显
  • 作用：使3d变换的子元素产生近大远小的透视效果

tansform-style

使3d变换的嵌套子元素是否以3d空间显示

  • flat 默认值 2d平面显示

  • preserve-3d 3d空间显示

  • 加给父盒子，只对3d变换元素有效

transform多组值

  • 空格隔开
.box{
    width: 100px;
    height:100px;
    background-color: red;
    transition:0.5s;

    margin:100px auto;
}
.box:hover{
	transform:rotate(30deg) scale(2);
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hl5LYoDJ-1605793580415)(…/AppData/Roaming/Typora/typora-user-images/image-20201119090910281.png)]

animate.css动画库

animate.css 是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。

借助 animate.css 能够很方便、快速的制作 CSS3 动画效果

参考说明：https://animate.style/

下载地址：https://github.com/animate-css/animate.css

兼容：只支持 CSS3 animate 属性的浏览器，他们分别是：IE10+、Firefox、Chrome、Opera、Safari。

使用方法

1）、引入文件

<link rel="stylesheet" href="animate.min.css">

2）、添加类名

<div class="animated bounce" id=”ani”></div>

给元素加上 class 后，刷新页面，就能看到动画效果了。

animated 类似于全局变量，它定义了动画的持续时间；bounce 是动画具体的动画效果的名称，你可以选择任意的效果。
如果动画是无限播放的，可以添加类名 infinite。

新版

<div class="animate__animated animate__bounce animate__delay-2s">Example</div>

定义延迟 animate__delay-2s

Class name	Default delay time
animate__delay-2s	2s
animate__delay-3s	3s
animate__delay-4s	4s
animate__delay-5s	5s

定义速度 animate__slow

animate__slow	2s
animate__slower	3s
animate__fast	800ms
animate__faster	500ms

重复次数 animate__repeat-1

animate__repeat-1	1
animate__repeat-2	2
animate__repeat-3	3
animate__infinite	infinite

mated 类似于全局变量，它定义了动画的持续时间；bounce 是动画具体的动画效果的名称，你可以选择任意的效果。
如果动画是无限播放的，可以添加类名 infinite。

新版

<div class="animate__animated animate__bounce animate__delay-2s">Example</div>

定义延迟 animate__delay-2s

Class name	Default delay time
animate__delay-2s	2s
animate__delay-3s	3s
animate__delay-4s	4s
animate__delay-5s	5s

定义速度 animate__slow

animate__slow	2s
animate__slower	3s
animate__fast	800ms
animate__faster	500ms

重复次数 animate__repeat-1

animate__repeat-1	1
animate__repeat-2	2
animate__repeat-3	3
animate__infinite	infinite

猜你喜欢

转载自blog.csdn.net/yangyanqin2545/article/details/109826924
今日推荐
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
最强开源大模型 Llama 3 上架 Gitee AI
虽然老乡鸡开源的不是代码，但背后的原因却让人很暖心
周排行
决策树的部分理解
STM32软件IIC的实现
RocketMQ原理解析-HA
vue-动态路由（路由的传参和接参）
利用python对Excel中的特定数据提取并写入新表
【Ubuntu】 Ubuntu16.04搭建NFS服务
Elasticsearch基础操作与对应的curl命令行，python对接实现
JVM数据存储结构 & Java的值传递和址传递
yum命令使用指南
java基础（一）：java语法基础
每日归档
更多
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)
2024-04-16(70)
2024-04-15(42)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022