CSS自用学习笔记（四）

明芫
239 阅读5分钟

动画相关属性2

  • div大小

  1. width
  2. height
  3. max-height 最大高
  4. min-height 最小高
  5. max-width 最大宽
  6. min-width 最小宽
  7. margin
  8. margin-left (top,bottom,right同理)
  9. padding
  10. padding-left (top,bottom,right同理)

  • img，video坐标定位

  1. object-fit 居中自动剪裁图片的功能
  • fill { object-fit: fill; } 覆盖，不保持长宽比
  • contain { object-fit: contain; } 缩放替换后的内容以保持纵横比
  • cover { object-fit: cover; } 填充保其长宽比
  • none { object-fit: none; } 不对替换的内容调整大小
  • scale-down { object-fit: scale-down; } 不调整大小
  1. object-position 内容框内位置
object-fit: none
object-position: 5px 10%;  内容框内的位置从左侧移动 5px，从顶部移动 10％：

  • 字体相关

  1. font
  • font-style 字体样式大小
  • font-variant 字体异体
  • font-weight 字体粗细
  • font-size/line-height 字体尺寸和行高
  • font-family 字体系列`
  1. font-stretch 对当前的 font-family 进行伸缩变形
  2. text-decoration
  • overline 上划线
  • line-through 字中线
  • underline 下划线
  • blink 闪烁的文本
  • none 无线
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration:blink}
a {text-decoration: none}

image.png

  1. text-decoration-color 定义下划线颜色
  2. text-indent; 第一行缩进
text-indent:50px   //第一行缩进 50 像素：
  1. text-shadow 文本阴影效果
text-shadow: 5px 5px 5px #FF0000;

image.png

  1. word-spacing:25px; 规定段落中的字间距是 25像素
  2. text-overflow 属性规定当文本溢出包含元素时发生的事情。
text-overflow: clip|ellipsis|string; //修剪文本/省略符号来代表/给定字符串来代表

image.png image.png

  • 透视效果

  1. perspective 被查看位置的视图,透视效果
perspective:150
-webkit-perspective:100; /* Safari and Chrome */
  1. perspective-origin 设置 3D 元素的基点位置
div {
perspective:150;
perspective-origin: 10% 10%;
-webkit-perspective:150;	/* Safari 和 Chrome */
-webkit-perspective-origin: 10% 10%;	/* Safari 和 Chrome */
}

  • 2D和3D

  1. transform
  • none 定义不进行转换
  • matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵
  • matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 3D 转换，使用16个值的4x4 矩阵
  • translate(x,y) 定义 2D 转换。 （平移）
transform:translate(20px,20px);

image.png

  • translate3d(x,y,z) 定义 3D 转换 （平移）
  • translateX(x) 定义转换，只是用 X 轴的值 （平移）
  • translateY(y) 定义转换，只是用 Y 轴的值 （平移）
  • translateZ(z) 定义 3D 转换，只是用 Z 轴的值 （平移） 缩放
  • scale(x,y) 定义 2D 缩放转换
transform:scale(2,3);

image.png

  • scale3d(x,y,z) 定义 3D 缩放转换
  • scaleX(x) 通过设置 X 轴的值来定义缩放转换
  • scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
  • scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换 旋转
  • rotate(angle) 定义 2D 旋转，在参数中规定角度。
  • rotate3d(x,y,z,angle) 定义 3D 旋转。
  • rotateX(angle) 定义沿着 X 轴的 3D 旋转
  • rotateY(angle) 定义沿着 Y 轴的 3D 旋转
  • rotateZ(angle) 定义沿着 Z 轴的 3D 旋转 倾斜
  • skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换
  • skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
  • skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
  • perspective(n) 为 3D 转换元素定义透视视图。 2.transform-origin 属性允许您改变被转换元素的位置
div{
transform: rotate(45deg);
transform-origin:20% 40%;

-ms-transform: rotate(45deg); 		/* IE 9 */
-ms-transform-origin:20% 40%; 		/* IE 9 */

-webkit-transform: rotate(45deg);	/* Safari 和 Chrome */
-webkit-transform-origin:20% 40%;	/* Safari 和 Chrome */

-moz-transform: rotate(45deg);		/* Firefox */
-moz-transform-origin:20% 40%;		/* Firefox */

-o-transform: rotate(45deg);		/* Opera */
-o-transform-origin:20% 40%;		/* Opera */
}

image.png

  • 过渡

  1. transition
transition: property duration timing-function delay;

transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
  1. transition-delay 过渡效果何时开始
  2. transition-duration 规定完成过渡效果需要多少秒或毫秒
  3. transition-property 设置过渡效果的 CSS 属性的名称
  4. transition-timing-function 速度效果的速度曲线

  • 动画

  1. @keyframes 创建动画
@keyframes mymove{
from {top:0px;}
to {top:200px;}
}

@keyframes mymove{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}
  1. animation-name 为 @keyframes 动画规定一个名称
p{
animation:mymove 5s infinite;
}

@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
  1. animation-duration
p{
animation:mymove 5s infinite;
animation-duration:2s;   //过渡需时间
}
  1. animation-delay 属性定义动画何时开始
p{
animation:mymove 5s infinite;
animation-duration:2s;   //过渡需时间
animation-delay: 2s
}
  1. animation-iteration-count 定义动画的播放次数
div {
animation-iteration-count:3;
animation-iteration-count:infinite; //无限次播放
-webkit-animation-iteration-count:3; /* Safari 和 Chrome */
}
  1. animation-direction 属性定义是否应该轮流反向播放动画
div
{
animation-direction:alternate;
-webkit-animation-direction:alternate; /* Safari 和 Chrome */
}
  1. animation-timing-function 从开头到结尾以相同的速度来播放动画
div
{
animation-timing-function:2s;
-webkit-animation-timing-function:2s; /* Safari 和 Chrome */
}
  1. animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见
  • forwards 保持最后一个属性值
  • backwards 在动画显示之前，应用开始属性值
  • both 向前和向后填充模式都被应用。
  1. animation 使用简写属性，将动画与 div 元素绑定
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}

@keyframes mymove{
from {left:0px;}
to {left:200px;}
}

  • 溢出

  1. overflow

  • visible 默认。溢出没有被剪裁。内容在元素框外渲染

  • hidden  溢出被剪裁，其余内容将不可见

  • scroll 溢出被剪裁，同时添加滚动条以查看其余内容

  • auto 与 scroll 类似，但仅在必要时添加滚动条

  • 浮动与清除浮动

  1. float 浮动
  • left
  • top
  • right
  • bottom
  1. clear 清除浮动

  • 其他

1.vertical-align 垂直对齐

  vertical-align:text-top;
  vertical-align:text-bottom;

image.png

  1. visibility:hidden; 不可见但存在
  2. dispaly:none 不可见但存在
  3. z-index 堆叠顺序
avatar
文章
阅读
粉丝