css3 笔记02

目录

01 过渡

02 rotate旋转

03 translate函数

04 真正的3D

05 动画

06 阴影

07 自定义字体库

08 自定义动画库

---

01 过渡

        过渡属性的使用:

                transition-property:要过渡的css属性名 多个属性用逗号隔开

                        过渡所有属性就写all

                transition-duration: 过渡的持续时间    s秒 ms毫秒

                transition-timing-function: 过滤动画的速率

                        linear 规定以相同速度开始至结束的过渡效果

                        ease 规定慢速开始，然后变快，然后慢速结束的过渡效果

                        ease-in 规定以慢速开始的过渡效果

                        ease-out 规定以慢速结束的过渡效果

                        ease-in-out 规定以慢速开始和结束的过渡效果

                        cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。

                                可能的值是 0 至 1 之间的数值。

                transition-delay: s秒 ms毫秒   延迟多久开始过渡

        属性连写:

        transition:property duration timing-function delay;

02 rotate旋转

        透视  perspective: 600px;

                通过透视我们可以看到近大远小的效果 有空间感

                透视的值越小效果越明显

                透视的本质： 设置的是用户的眼睛(虚拟)和屏幕的距离  距离越小效果越明显

        rotateX:

                transform: rotateX(360deg); 根据X轴旋转360度

         rotateY:

                transform: rotateY(360deg); 根据Y轴旋转360度

                transform-origin: 50px 0; 修改转换属性的圆心:

        rotateZ:

                transform: rotateZ(360deg);  根据Z轴旋转360度

03 translate函数

        transform:translateX(px值) 定义 3D 转化，仅使用用于 X 轴的值

        transform:translateY(px值) 定义 3D 转化，仅使用用于 Y 轴的值

        transform: translateZ(px值);  定义 3D 转化，仅使用用于 Z 轴的值

04 真正的3D

        让盒子保持真正的3D效果 

            transform-style: preserve-3d;

05 动画

        调用：

                animation: 动画名称  执行时间 延迟 执行次数 方向 运动方式 结束状态 ； 

                animation: move 2s 1s infinite alternate forwards;

                steps(n) 让动画分n步完成  变成帧动画 

        动画的播放状态:

               running: 运行

                paused:暂停

                animation-play-state: paused;

        在css3中提供了监听动画和过渡结束的事件

                animationend 该事件在 CSS 动画结束播放时触发

                transitionend 该事件在 CSS 完成过渡后触发

        

06 阴影

        盒子阴影:

                box-shadow: h-shadow v-shadow blur spread color inset;

                        h-shadow : 必需的。水平阴影的位置。允许负值

                        v-shadow :  必需的。垂直阴影的位置。允许负值

                        blur : 可选。模糊距离

                        spread : 可选。阴影的大小

                        color : 可选。阴影的颜色

                        inset :  可选。从外层的阴影（开始时）改变阴影内侧阴影

                  例:  box-shadow: 10px 10px 10px #ccc inset;

        文本阴影:

                text-shadow: h-shadow v-shadow blur color;

                        h-shadow : 必需的。水平阴影的位置。允许负值

                        v-shadow :  必需的。垂直阴影的位置。允许负值

                        blur : 可选。模糊距离

                        color : 可选。阴影的颜色

            例 : text-shadow: 10px 10px 10px red;

07 自定义字体库

        使用@font-face属性引入

        @font-face{

                font-family:自定义字体名字;

                src:url(.ttf字体库文件的路径)

        }

08 自定义动画库

       https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css

        将动画库中药添加的动画名字 以类名的形式写在标签元素上面就可以使用这个动画了