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

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

相关推荐
杭州杭州杭州3 分钟前
MySQL超全笔记
数据库·笔记·mysql
XH2766 分钟前
Android Bitmap.createBitmap() 用法全解析
前端·设计
XH2766 分钟前
Android ContentResolver地点增删改查详解
前端·后端
uhakadotcom7 分钟前
🎭 Playwright:跨浏览器自动化测试框架
前端·javascript·面试
打野赵怀真8 分钟前
react父子组件如何通信?
前端·javascript
Jalor10 分钟前
Flutter 与 HarmonyOS NEXT | IAPKit(应用内支付服务)避坑指南
前端·flutter·harmonyos
市民中心的蟋蟀10 分钟前
第六章 :介绍全局状态管理库
前端·javascript·react.js
uhakadotcom13 分钟前
Figma入门指南:协作设计的新时代
前端·javascript·面试
欲儿15 分钟前
在线记事本——支持Markdown
前端·javascript·程序人生·sqlite·php·轻量级在线记事本
艾克马斯奎普特18 分钟前
Vue.js 3 渐进式实现之响应式系统——第六节:嵌套的 effect 与 effect 栈
前端·vue.js