css3---

2024-08-25 23:08:42 前端知识 前端哥 943 825 我要收藏

1.CSS3新增长度单位

1.ch        1.ch,字符0的宽度

        2.rem,是一个相对单位,主要是相对于根元素字体的大小,使用rem,我们需要参考指定的根 元素。

        3.vw,viewpoint width,视窗宽度,1vw=视窗宽度的1%

        4.vh,viewpoint height,视窗高度,1vh=视窗高度的1%

        5.vmin,vmax

2.CSS3新增颜色设置方式

  1. rgba模式

  2. transparen

3.CSS3-新增选择器

 

4.CSS3新增盒模型相关属性 

  1. box-sizing属性:设置盒模型的两种类型

  2. resize调整盒子大小

  3. box-shadow盒子阴影

  4. opacity不透明度

5.CSS3新增背景属性

  1. background-origin

  2. background-clip

  3. background-size

  4. 多背景图CSS3允许元素设置多个背景图片

6.CSS3新增边框属性

  1. border-radius边框圆角

  2. outline边框外轮廓(了解)

7.CSS3新增文本属性

  1. text-shadow属性:给文本添加阴影。

  2. text-overflow属性:设置文本内容溢出时的呈现模式

  3. text-stroke文字描边

8.web字体

通过 @font-face 指定字体的具体地址,浏览器会自动下载该字体,这样就不依赖用户电脑上的字体了。

9.CSS3-圆角

div{
    border-radius:10px;     /* 所有角都使用半径为10px的圆角 */
    border-radius:10px 5px;   /*左上,右下10px,   右上,左下5px */
    border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */ 
}

10.CSS3-阴影

  1. 盒子阴影box-shadow

<style>
  div{
    width: 100px;
    height: 100px;
    border: 6px solid orange;
    box-shadow: 0px 0px 20px 8px #999;
    margin: 100px auto;
  }
</style>
<div></div>

2.文字阴影text-shadow

<style>
 .p1{
   font-size: 24px;
   text-shadow: 2px 2px 3px #000;
   color:red;
  }
</style>
<p class="p1">单层阴影效果</p>

11.CSS3-背景操作

  1. 背景图片的大小

<style>
div{
  width: 100%;
  height: 2000px;
  background: url(banner.jpg) no-repeat;
  background-size:contain; /* 按照内容来进行覆盖 */
  background-size: 100%;/* 适应宽度为100% */
}
</style>
<div></div>

 2.背景渐变

  • 线性渐变

        1.方向表示法

to right to top  to left  to bottom  表示方向 向哪 可有很多颜色 中间用逗号隔开

background: linear-gradient(direction[方向] / angle[角度], color-stop1[颜色], color-stop2[颜色], ...);

方向表示法时前面加-webkit-时,不能使用to xxx 只能直接写方向 但此时方向是相反(互补)的

background: -webkit-linear-gradient( right,red,green,blue );

2.度数表示法

0deg表示从下到上,45deg表示从左下到右上,90deg表示从左到右,180deg表示从上到下

background: linear-gradient(45deg,red,green,blue ); 

度数表示法时前面加-webkit-时,此时方向是互余的()扭转90-xx度

 background: -webkit-linear-gradient(45deg,red,green,blue );
重复渐变

%表示在这个长度中的10%是green最深的地方 20%是blue最深的地方

 background:repeating-linear-gradient(90deg,red,green 10% ,blue 20% );

参考颜色:https://webgradients.com/

  • 径向渐变
<style>
  #grad {
    width: 200px;
    height: 200px;
    background: -webkit-radial-gradient(red, yellow, blue); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(red, yellow, blue); /*Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(red, yellow, blue); /*Firefox 3.6 - 15 */
    background: radial-gradient(red, yellow, blue); /*标准的语法 */
  }
</style>
<div id='grad'></div>

3.光斑效果

<style>
div{
    width: 1000px;
    height: 600px;
    margin:0 auto;
    background: 
    -webkit-linear-gradient(left,
        rgba(255,0,0,0),
        rgba(255,0,0,1),
        rgba(255,0,0,0)
    );
}
</style>
<div></div>

        光斑与背景图片结合

 background-image:linear-gradient(to right, rgba(255,0,0,0) 0,#fff 2%,#fff 4% ,rgba(255,0,0,0) 6% ),url(./img/nailong.png);

12.CSS3-过渡

  /*鼠标离开时缓缓恢复*/
    transition:width 3s ease 0.12s;

 1.transition-property过渡的css属性名称

  transition-property: width;

2. transition-duration 过渡花费的时间

 transition-duration: 2s;

3. transition-timing-function过渡效果的运动曲线

  •  linear匀速 
 transition-timing-function: linear;
  •  ease默认  由慢到快
 transition-timing-function: ease;
  • ease-in 由慢到快
 transition-timing-function: ease-in;
  •  ease-out 由快到慢
 transition-timing-function: ease-out;
  • ease-in-out 慢快慢
 transition-timing-function: ease-in-out;
  •   cubic-bezier(n,n,n,n) 贝塞尔曲线
 transition-timing-function: cubic-bezier(n,n,n,n);

4.transition-delay 延迟执行

transition-delay: 3s;

5.合成:

 /* all代表所有过渡属性名称 1s代表过渡花费时间 linear代表过渡效果运动曲线匀速 2s代表延迟时间内*/
     transition: all 1s linear 2s;

13.flex弹性盒子

Flex布局(即弹性伸缩布局),它可以简便、完整、响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解了。 伸缩布局 = 弹性布局 = flex布局

  • 容器: 采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器

  • 项目 容器的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目“

 1.容器属性

1.flex-direction 决定主轴方向(即项目排列方向) 

2.flex-wrap 设置项目换行方式

                       :nowrap 不换行

                        :wrap 换行

                        :wrap-reverse 换行且翻转

3.flex-flow 主轴方向和换行方式的简写
4.justify-content 定义项目在主轴上的对齐方式

                                :center 居中

                               :flex-start 左对齐(主轴起点)

                                :flex-end 右对齐(主轴终点)

                                :flex-between 两端对齐,其他平分

                                :flex-around 左右平均环绕

                                :flex-evenly 弹性盒子与容器之间间隔相等

5.align-content属性起作用的条件【针对多行主轴】

                                   :stretch 默认值

                                     :center 居中

                                    :flex-start 垂直最上(向上对齐)

                                    :flex-end 向上对齐

                                    :flex-between 垂直方向两端对齐

                                    :flex-around 上下平均环绕

                                    :flex-evenly 弹性盒子与容器之间间隔相等

6.align-items 项目在交叉轴上对齐方式【针对单个主轴】

                                   :stretch 默认值

                                     :center 居中

                                    :flex-start 垂直最上(向上对齐)

                                    :flex-end 向上对齐

                                    :flex-between 垂直方向两端对齐

                                    :flex-around 上下平均环绕

                                    :flex-evenly 弹性盒子与容器之间间隔相等

  2.项目属性

1.order 控制伸缩项目出现的顺序       

        默认为 0  ,数值越小,排列越靠近主轴   

2. flex-grow 放大比例 / flex-shrink 缩小比例

定义项目的放大比例。默认为0,即如果存在剩余空间,也不放大。 

3.:flex:0 1 auto 是什么意思

flex:是flex-grow,flex-shrink和flex-basis的简写 flex-grow:定义项目的的放大比例; flex-shrink:定义项目的缩小比例; flex-basis: 定义在分配多余空间之前,项目占据的主轴空间(main size),浏览器根据此属性计算主轴是否有多余空间,

  • 默认值为auto,即 项目原本大小;

  • tranform:rotate3D( 0/1 ,y,z,deg);

  • 数据类型:布尔值(true 1/false 0)

所以flex属性的默认值为:0 1 auto (不放大会缩小) flex为none:0 0 auto (不放大也不缩小) flex为auto:1 1 auto (放大且缩小)

14.2D效果

1.平移transform: translate

 这里的10px表示X轴偏移量 100px表示Y轴的偏移量

 transform: translate(10px,100px);
  • 元素水平垂直居中

  position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-宽一半px,-高一半px);

2. 旋转 transform: rotate

  • 正值为顺时针旋转,负值为逆时针旋转
  • 行元素不能设置旋转,默认的中心点在X轴与Y轴的交叉点
 transform: rotate(180deg);
  • 更改旋转中心点

第一个单词表示X轴的位置 第二个单词表示Y轴的位置

transform:origin(center top);

3.缩放  transform: scale

 第一个数表示X轴的位置 第二个数表示Y轴的位置 没有单位

  •  >1放大
  • <1缩小
  • =1不变
  • =0消失不见
  • =-1(0.几)出现镜像翻转
  • =小于-1 在镜像+放大
  transform: scale(1.2);
transform合并时中间用空格隔开
 transform:rotate(45deg) scale(1.2);

4.倾斜 transform: skew

第一个数表示X轴的位置 第二个数表示Y轴的位置

transform: skew(10deg,10deg);

15.动画

过渡需要事件触发才可执行,动画有无事件触发均可执行

1.创建动画keyframe(关键帧) 这里的move是动画名字

如果不定义0%默认0%(原始样式),如果不定义100% 默认原始样式

 @-webkit-keyframes move{
            /* 这里的25%是表示从0到25%发生的动画*/
            25%{
                width: 500px;
            }
            50%{
                width: 500px;
                height: 500px;
            }
            100%{
                width: 500px;
                height: 500px;
            }
          
        }

2.调用动画 animation

这里的move表示动画名字 1s表示动画时间 linear表示匀速

animation: move 1s linear; 

3.animation属性值有哪些

  • name表示规定@keyframes动画的名称

 animation-name: move;
  • duration表示规定一个动画所花费的时间

  animation-duration: 1s;
  • timing-function表示规定动画的运动曲线

 animation-timing-function: linear;
  • delay表示规定动画的延迟时间(何时开始)

animation-delay: 1s;
  • -iteration-count表示动画旋转(实现)次数   infinite 表示无限 一直不停
  animation-iteration-count: infinite;
  •  fill-mode表示动画执行完最后显示的状态 backwards表示默认值 forwards表示停!

   animation-fill-mode: backwards;
   animation-fill-mode: forwards;
  •  steps()表示一张图平均分为几份(一步多少)第一个数字表示一步多少 第二个单词表示从哪个位置开始

 animation: two steps(8,start)  1s infinite;
 animation: two steps(8,end)  1s infinite;

16.多列布局 column

  •  column-width列宽(每一列的宽度)
  column-width: 50px;
  • column-gap列和列之间的缝隙

  column-gap: 120px;
  • column-count列数

 column-count: 3;
  •  column-rule表示列和列之间的边框样式

 column-rule: 1px solid #f00;
  •  column-span 横跨多少列 只有两个值1表示默认 all表示横跨全部

 column-span: all;

17.滤镜filter

  • none 默认值,没有效果

 fill: none;
  • blur(px)模糊度(不可写百分比值)  默认为0,值越大,越模糊

 filter: blur(50px);
  •  contrast(%)  调整图像对比度  默认值为 1     0%图像全黑    100%图像不变     >100%更低的对比

 filter: contrast(150%); 
  • brightness(%) 图像变亮或变暗

 filter: brightness(150%);
  •  drop-shadow(h-shadow v-shadow blur spread color) 图像阴影效果

h-shadow表示水平方向偏移量 v-shadow 垂直方向偏移量 blur模糊程度  spread模糊半径(×) color 表示颜色

-webkit-filter: drop-shadow(50px 30px 50px  red);
  • grayscale(%)图像转换为灰度图像

filter: grayscale(50%);
  •  hue-rotate(deg)图像应用色相旋转   0deg图像无变化 360deg图形无变化  超过360deg的值相当于又绕了一圈

filter: hue-rotate(100deg); 
  • invert(%)反转输入图像,0%无变化 100%完全反转

filter:  invert(100%); 
  • opacity(%)图像透明度 0%完全透明 100%完全不透明 (无变化)

 filter: opacity(80%);
  • saturate(%)图像饱和度    0%完全不饱和 100%无变化 >100% 更高的饱和度

 filter: saturate(800%); 
  •  sepia(%) 图像转换为深褐色 100%完全褐色 0%图像无变化
filter:  sepia(0%);

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16904.html
标签
评论
发布的文章

LoopBack组件JSONAPI使用指南

2024-09-04 23:09:43

编译JSONCPP源码

2024-09-04 23:09:49

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!