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

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

相关推荐
神秘的猪头1 分钟前
html5与js今日笔记
前端
Zyx20073 分钟前
🎹用 HTML5 打造“敲击乐”钢琴:前端三剑客的第一次交响曲
前端
小时前端3 分钟前
面试官:我为什么总在浏览器存储问题上追问IndexedDB?
前端·浏览器
前端小菜哇3 分钟前
前端如何优雅的写一个记忆化函数?
前端
今禾5 分钟前
Git完全指南(下篇):Git高级技巧与问题解决
前端·git·github
llq_3508 分钟前
为什么 JS 代码执行了,但页面没马上变?
前端·javascript
trsoliu15 分钟前
Tailwind CSS 类名管理工具实战指南
前端·css
汤姆Tom21 分钟前
CSS 预处理器深入应用:提升开发效率的利器
前端·css·面试
练习前端两年半21 分钟前
Vue3组件二次封装终极指南:动态组件+h函数的优雅实现
前端·vue.js
再睡一夏就好26 分钟前
【C++闯关笔记】STL:deque与priority_queue的学习和使用
java·数据结构·c++·笔记·学习·