0基础CSS超详细笔记 第七天

过渡:（transitions）——即，延时，让CSS属性根据一定规律进行变化。

要实现这一点，必须规定两项内容： 1.指定要添加效果的CSS属性 2.指定效果的持续时间。

CSS transitions 可以决定哪些属性发生动画效果 (明确地列出这些属性)，何时开始 (设置 delay），持续多久 (设置 duration) 以及如何动画 (定义timing function，比如匀速地或先快后慢)。

                       

        过渡三要素：

                        1. 必须要有属性发生变化。

                        2. 必须说明是哪个属性需要执行过渡。

                        3.必须说明过渡时长。

        过渡触发：

                       1.：hover

                        2. ：active（单机并按住）

                        3.：focus（聚焦时）

                        4.@media触发 符合媒体查询条件时触发

                        5、点击事件 用户点击元素时触发

属性：

                        1. transition-property：确定要过渡的属性，如width，bgc

                        2.transition-duration：持续时间

                        3.transition-timing-function：过渡的时间曲线：取值（linear——匀速，ease——慢头慢尾中间快，ease-in——慢慢的进入，ease-out——慢慢的出，ease-in-out——慢进慢出嘿嘿嘿！，cubic-bezier（n,n,n,n）——自定义）

                        4.transition-delay：何时开始，即延迟几秒开始。

                简写————

        

div {

        transition: property,duration,timing-function,delay
}

                

-过渡连写注意点

2.1和分开写一样, 如果想给多个属性添加过渡效果也是用逗号隔开即可 ​ 2.2连写的时可以省略后面的两个参数, 因为只要编写了前面的两个参数就已经满足了过渡的三要素 ​ 2.3如果多个属性运动的速度/延迟的时间/持续时间都一样, 那么可以简写为 ​ transition:all 0s;

动画：（animation）（C3新增）

                        ————过渡和动画有啥异同？

                        不同:过渡需要人为触发条件。而动画不需要。

                        相同:过渡和动画都是用来给元素添加动画的 过渡和动画都是系统新增的一些属性 过渡和动画都需要满足三要素才会有动画效果

                animation-name        

@keyframes 名字 {

        from {



        }


            to {


        }

}

                2. animation-duration

                3.animation-timing-function

                4.animation-delay

                5.animation-iteration-count（播放次数）————infinity（无限播放）

                6.animation-direction——执行动画的方向，取值:normal（从起点到终点，执行一次，再次从起点到终点。），reverse（从终点到起点，执行一次，再次从终点到起点），alternate （往返，从头到尾，再从尾到头。）

                7.animation-fill-mode（当动画未开始播放或者播放结束有延迟时，用到的元素样式。）

————取值：none（默认），forwards（结束时保持最后一帧的动画），backwards（未开始且有延迟时，显示第一帧动画。both，两者都有。）

                8.animation-play-state（是否需要暂停）————暂停，paused暂停，running执行动画。

                

-动画模块连写格式

animation:动画名称(animation-name) 动画时长(animation-duration) 动画运动速度(animation-timing-function) 延迟时间(animation-delay) 执行次数(animation-iteration-count) 往返动画(animation-direction);

-动画模块连写格式的简写——name+持续时间。

引入。

animate.css————类似于iconfont，前缀是animate

<div class="animate__animated animate__fadeInUpBig">你好 animate</div>

2D转换模板

————-transform

                        取值：1.旋转：rotate（45deg）

                                2.平移：translate（水平，竖直）

                                3.缩放:scale(水平，竖直)——大于1放大，小于1缩小。

形变中心点

transform-origin: ​ 第一个参数:水平方向 ​ 第二个参数:垂直方向

注意点 ​ 取值有三种形式 ​ 具体像素 ​ /transform-origin: 200px 0px;/ ​ 百分比 ​ /transform-origin: 50% 50%;/ ​ /transform-origin: 0% 0%;/ ​ 特殊关键字 ​ /transform-origin: center center;/ ​ 默认情况下所有的元素都是以自己的中心点作为参考来旋转的, 我们可以通过形变中心点属性来修改它的参考点

-旋转轴向

-默认情况下所有元素都是围绕Z轴进行旋转 ​ transform: rotateZ(45deg); ​ 围绕z轴旋转 ​ transform: rotateX(45deg); ​ 围绕x轴旋转 ​ transform: rotateY(45deg); ​ 围绕y轴旋转 ​ -总结: ​ 想围绕哪个轴旋转, 那么只需要在rotate后面加上哪个轴即可

-perspective

属性定义3D元素距视图的距离，以像素计，该属性允许改变3D元素查看3D元素的视图，当为元素定义perspective属性时，其子元素会获得透视效果，而不是元素本身

1.什么是透视 ​ 近大远小 ​ 2.注意点 ​ 一定要注意, 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面