css3 笔记02

目录

[01 过渡](#01 过渡)

[02 rotate旋转](#02 rotate旋转)

[03 translate函数](#03 translate函数)

[04 真正的3D](#04 真正的3D)

[05 动画](#05 动画)

[06 阴影](#06 阴影)

[07 自定义字体库](#07 自定义字体库)

[08 自定义动画库](#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

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

相关推荐
姑苏洛言8 分钟前
在开发扫码小程序中,遇到胡坑“require() 默认不支持绝对路径”及其解决方案
前端
Passerby_K9 分钟前
vue3+dhtmlx 甘特图真是案例
前端·vue·甘特图
佳腾_15 分钟前
【Web应用服务器_Tomcat】二、Tomcat 核心配置与集群搭建
java·前端·中间件·tomcat·web应用服务器
一点.点32 分钟前
李沐动手深度学习(pycharm中运行笔记)——04.数据操作
pytorch·笔记·python·深度学习·pycharm·动手深度学习
brzhang1 小时前
代码即图表:dbdiagram.io让数据库建模变得简单高效
前端·后端·架构
SummerGao.1 小时前
【解决】layui layer的提示框,弹出框一闪而过的问题
前端·layui
天天扭码1 小时前
从数组到对象:JavaScript 遍历语法全解析(ES5 到 ES6 + 超详细指南)
前端·javascript·面试
拉不动的猪1 小时前
前端开发中常见的数据结构优化问题
前端·javascript·面试
街尾杂货店&1 小时前
css word
前端·css
Мартин.1 小时前
[Meachines] [Hard] CrimeStoppers LFI+ZIP-Shell+Firefox-Dec+DLINK+rootme-0.5
前端·firefox