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

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

相关推荐
用户99045017780097 分钟前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家10 分钟前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
程序员Xu1 小时前
【OD机试题解法笔记】连续出牌数量
笔记·算法·深度优先
袁煦丞1 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆1 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
彤银浦1 小时前
Web学习笔记2
笔记·学习
好奇心笔记1 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆1 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户21411832636021 小时前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端
程序员海军1 小时前
AI领域又新增协议: AG-UI
前端·openai·agent