端盒日记Day03

vocal!!拖了这么久我才来写,我好Dior。刚刚吃了四根冰淇淋我好Dior。。。

CSS

平面转换——transform

作用:为元素添加动态效果,一般与过渡配合使用

概念:改变盒子在平面内的形态(位移、旋转、缩放、倾斜)

平移——translate()

属性:transform: translate( X轴移动的距离, Y轴移动的距离)

取值:px、%(参照自身盒子计算结果) 正负均可

技巧:tanslate() 只写一个值,表示沿着X轴移动

           单独设置X或Y轴移动距离:translateX() 或 translateY()

平移实现居中效果

  • 方法一

position: absolute;

left: 50%;

top: 50%;

margin-left: -100px;

margin-top: -50px;

width: 200px;

height: 100px;

  • 方法二:百分比参照自身盒子尺寸计算结果

postion: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%) 

 旋转——rotate()

属性:transform: rotate(旋转角度)

旋转角度单位:deg 正顺逆负

改变转换原点:

正常情况下,转换原点是盒子中心点

属性:transform-origin: 水平原点 垂直原点位置

取值:方位名词(left, top, right, bottom, center)、px、%

多重转换

以第一种转换形态的坐标轴为准

技巧:先平移后旋转 (因为这样它的坐标轴才不会变,才可以达到轮胎那样滚着走的效果

属性:transform: translate() rotate() // 要写在一起,因为它是复合属性 具有层叠性

缩放——scale()

属性:transform: scale(缩放倍数)

           transform(X轴缩放倍数, Y轴缩放倍数)

技巧:通常只为scale设置一个值,表X轴Y轴等比例缩放

          取值大于1表放大,取值小于1表缩小

倾斜——skew()

属性:transform: skew(xxdeg) 正左右负

渐变———background-image
1. 线性渐变——linear-gradient

         background-image: linear-gradient(

                渐变方向,

                颜色1 终点位置,

                颜色2 终点位置,

                ...

        };

取值:

渐变方向:to 方位名词 角度度数

终点位置:%

2. 径向渐变——radial-gradient

作用:给按钮添加高光效果

属性:background-image: radial-gradient(

                        半径 at 圆心位置,

                        颜色1 终点位置,

                );

取值:

半径可以是两条,则为椭圆

圆心位置取值:px、%、方位名词

空间转换(3D转换 ——transform

Z轴位置与视线方向相同

属性:transform

平移

transform: translate3d(x, y, z)

transform: translateX()  transform: translateY()  transform: translateZ()

取值:px、%(正负均可

视距 perspective

作用:制定了观察者与Z=0平面的距离,为元素添加透视效果

透视效果:近大远小 近实远虚

属性:perspective: 视距;

添加给父级,取值范围:800-1200

旋转

transform: rotateZ(值) 跟平面旋转效果一样

transform: rotateX(值) 正:往里走 负:电脑关上那样

transform: rotateY(值) 正:从左往右 负:从右往左走

左手法则——根据旋转方向确定取值正负

        左手握住旋转轴,拇指指向正值方向,其他四个手指弯曲方向为正值方向

自定义旋转轴位置及旋转角度

rotate3d(x y z 角度度数)

x y z取值为0-1之间的数字

立体呈现——transform-style

作用: 设置元素的子元素是位于3D空间中还是平面中

属性名:transform-style

属性值:

flat: 子级处于子平面中

preserved-3d: 子级处于3D空间中

呈现立体图形——步骤
  1. 父元素添加transform-style: preserved-3d;
       // 父级就会变成一个立方体,子级位于立方体空间
  2. 子级定位
       // 子级是立方体的每个面,所以子级要基于父级去定位 子绝父相
  3. 调整盒子的位置(位移或旋转)|
       // 子级一前一后,产生立体空间(translate)
       // 可以用hover{ rotatey() } 和 .cube{ transition: }去体验一下
缩放

属性:transform: scale3d(x, y, z)

           transform: scaleX(); transform: scaleY(); transform: scaleZ()

动画——animation 

过渡:实现两个状态间的变化过程 (transition

动画:实现多个状态间的变化过程,动画过程可控(重复播放、最终画面、是否暂停

实现步骤

        1.定义动画

  • 两个状态变化

@keyframes 动画名称{

        form { 当前状态CSS} //如果动画开始状态样式跟盒子默认样式相同 可省略开始状态代码

        to { 当前状态CSS }

}

  • 多个状态

@keyframe 动画名称 {

        0% { } //如果动画开始状态样式跟盒子默认样式相同 可省略开始状态代码

        10% { }

         .....

        100% { }

}

// 百分比的含义:这个状态占动画时长的百分比              

                

        2. 使用动画

animation: 动画名称 动画花费时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时的状态

 !! 注意 !! :

  1. 动画名称和动画时长必须写
  2. 取值不分先后顺序
  3. 如果有两个时间值,第一个表达动画时长 第二个表延迟时间

七个属性:

  1. animation-name: 动画名称
  2. animation-duration: 动画时长
  3. animation-delay: 延迟时长
  4. animation-fill-mode: 动画执行完毕时的状态 
        forwards: 最后一帧
        backwards: 第一帧
  5. animation-timing-function: 速度曲线
        steps() 逐帧动画
  6. animation-iteration-count: 重复次数
         infinite 无限循环
  7. animation-direction: 动画执行方向
         alternation 反方向
  8. animation-play-state: 暂停动画
         pause为暂停 通常配合hover
 无缝动画原理

复制开头图片到结尾位置(图片宽度 = 区域宽度) 

 走马灯案例

精灵动画  

  核心原理:1. steps() 逐帧动画        2. CSS精灵图

  制作步骤:1. 准备显示区域:盒子尺寸与一张精灵小图尺寸相同

                     2. 定义动画:移动背景图 移动距离=精灵图宽度

                     3. 使用动画:step(N) N与精灵小图的个数相同

多组动画

        animation:

                动画1,

                动画2,

                ...

                动画N

        ;   

JS
正则表达式

    用于匹配字符串中字符的组合模式,在JS中,也是对象。通常用来查找替换那些符合正则表达式的文本。

语法:

        1.定于正则表达式语法

const 变量名 = /表达式/

 其中/ / 是正则表达式字面量

        2.判断是否有符合规则的字符串

regObj.test(被检测的字符串)

test()方法:用来查看正则表达式与指定的字符串是否匹配

        3.检索(查找)符合规则的字符串

regObj.exec(被检测的字符串)

exec()方法:在一个指定的字符串中执行一个搜索匹配

元字符

普通字符:仅仅只能够描述它们本身 (abcdefg...xyz

元字符:具有特殊含义 ( [a-z]     

分类:

  • 边界符:表位置、开头和结尾 必须用什么开头,用什么结尾
  • 量词:表重复次数
  • 字符类:比如 \d 表 0-9 
1.边界符 

        正则表达式中的边界符(位置符)用来提示字符所处的位置,主要有两个字符

 

 

 

  • 20
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值