2021-07-03

最新推荐文章于 2023-11-24 22:38:57 发布

In NauHix

最新推荐文章于 2023-11-24 22:38:57 发布

阅读量137

点赞数 1

本文链接：https://blog.csdn.net/weixin_52150928/article/details/118440118

版权

本文详细介绍了CSS3中的变换技巧，包括2D和3D平移、缩放、旋转以及倾斜。还讲解了如何使用`@keyframes`创建动画，以及动画的关键帧和属性。此外，提到了盒子阴影、透明度以及3D效果中的景深属性。内容深入浅出，适合前端开发者学习。

摘要由CSDN通过智能技术生成

笔记

一周
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-whtveMwk-1625295501130)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1624937125254.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dYwZ11W1-1625295501187)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1624946049571.png)]

var a = 10;

div{
	border-left:1px solid red;
}

圆角

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BOsWZ5gf-1625295501212)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1625020081258.png)]

定位

**子绝父相**

结构靠下，默认层次越高

day03

2d平移变形

2d变形：平移缩放旋转倾斜

2d平移

transform:translate(x,y)
x:沿着x轴的平移 +xpx 向右移动了xpx  -xpx 向左移动了xpx
y:沿着y轴的平移 +ypx 向下移动了ypx   -ypx向上移动了ypx

transform:translate(x,0px)
transform:translate(0px,y)
transform:translate(100px,100px) 

transform:translate(x%,y%) 
transform:translate(50%,50%)  %相对单位  此时 相对的是盒子自己 
含义： 向右移动了自身宽度的一半  向下移动了自身高度的一半

2d缩放

transform:scale(w,h); 没有单位 ，倍数
w:宽度的缩放值  w<1缩小  w>1放大  w=0 消失
h:高度的缩放倍数  h<1 h>1  h=0
当你只写一个值的时候 ，那么此时相当于宽高同时缩放相同的倍数


transform:scale(1.2,2);宽度放大1.2  高度放大到原来的2倍
transform:scale(0.5,1);宽度缩小为原来的的一半  高度不变
transform:scale(2);宽度和高度同时放大到原来的2倍

多变形属性

transform:  translate() rotate()...; 空格连接

注意：旋转会旋转坐标系要注意平移和旋转的顺序！！！！

动画属性

css3关键帧动画 :几个关键状态连接起来持续的时间

小车撞树上返回原地案例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TfgU9Dts-1625295501219)(C:/Users/Administrator/Desktop/%E7%AC%94%E8%AE%B0/media/%E5%8A%A8%E7%94%BB%E5%B1%9E%E6%80%A7.png)]

抽象关键状态：

5个

初始原地---》 走到目的站---》水平翻转---》回到最初 ---》水平翻转 10s
         4.8s           0.2s         4.8s        0.2s

定义动画：

@keyframes 动画名字{
    //最初状态
    0% {
        原地 (100px,0px)
    }
    48% {
        右平移 (800px,0px)
    }
    50% {
        旋转180deg
    }
    98% {
        原地(100px,0px)
    }
    100% {
         旋转180deg
    }
   
    
}

使用动画：

animation:动画的名称  持续的时间s  【延时的时间s  运动的曲线   运动的次数   是否往返运动  运动执行的状态  最后一帧的状态 】;

animation:carMove  10s;

延时的时间s 0.5s===500ms

运动的曲线:linear匀速/ease放缓（默认）

运动的次数 1/n/infinite无限次

是否往返运动 alternate往返 /normal不往返

运动执行的状态animation-play-state： running播放/paused暂停

最后一帧的状态animation-fill-mode: forwards停在最后一帧/backwards回到第一帧

盒子阴影

box-shadow:水平阴影的大小px  垂直阴影的大小px 模糊距离px  阴影的大小（四周px)   颜色   内阴影inset/外阴影(默认);

颜色： 16进制  #6个16进制数  0-9 a-f #000黑色 #fff白色 #eeccdd===#ecd  
      rgb(red0-255，green0-255， blue0-255)  rgb(0,0,0)黑色 rgb(255,255,255)白色
      rgba(0,0,0,alpha) alpha透明度 取值[0,1] 值越大越不透明 值越小越透明 0 完全透明 1纯色

透明度属性

功能：设置背景色和内容一起透明

opacity:[0,1] 0完全透明 1完全不透明

day04

3d平移变形

三根轴： x,y,z

3d空间坐标系:左手笔画一下指头尖所对方向为坐标系正方向

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6ipydNJV-1625295501225)(C:/Users/Administrator/Desktop/%E7%AC%94%E8%AE%B0/media/3d%E5%9D%90%E6%A0%87%E7%B3%BB.jpg)]

transform:translate3d(x,y,z)
x:沿着x轴平移 -xpx 左 +xpx右
y
z:沿着z轴平移 -zpx 后 +zpx前

transform:translateX(100px)向右移动了100px

transform:translateZ(100px) 向前移动了100px

transform:translateX(100px)  translateY(100px); ====  transform:translate3d(100px,100px,0px);

景深属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8KC6pZXJ-1625295501236)(C:/Users/Administrator/Desktop/%E7%AC%94%E8%AE%B0/media/3d%E6%95%88%E6%9E%9C%E8%90%A5%E9%80%A0.png)]

该属性，一般设置在父盒子身上，目的就是营造3d空间的效果，而且一般用在事件触发时营造

3D旋转变形

transform:rotate3d(x,y,z,ndeg)
x:绕x轴旋转 x= 0代表没有绕x轴旋转 x=1代表绕x轴旋转
y:绕y轴旋转
z:绕z轴旋转

transform:rotate3d(1,0,0,45deg)===transform:rotateX(45deg); 
transform:rotate3d(0,1,0,45deg)===transform:rotateY(45deg); 
transform:rotate3d(0,0,1,45deg)===transform:rotateZ(45deg); 平面旋转

保留3d变形效果属性

 在没有过度的时候，3d效果不会被保留下来 会默认的回到最初状态
 我们想保留3d效果 ： 那么 transform-style:preserve-3d保留3d效果/flat 2d平面

 一般写在父盒子身上

倒影(-webkit-box-reflect)

通过html5的-webkit-box-reflect来做倒影，代码如下：

box-reflect属性值有：dirrection-方向:above向上，below向下，left向左，right向右。

offset距离：可以是数值，也可以是百分比：

mask-box-image设置倒影的遮罩图像：（1）url（2）linear-gradient线性渐变创建遮罩图像。（3）repeating-linear-gradient重复线性渐变创建遮罩图像。（4）repeating-url重复径向径向渐变创建遮罩图像