CSS3新特性学习(2)
时间:2020-04-26
本文章向大家介绍CSS3新特性学习(2),主要包括CSS3新特性学习(2)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1.2D转换之移动translate(类似定位)
1.语法
transform:translate(x,y);
transform:translateX(n);
transform:translateY(n);
2.重点
1.定义2D转换中的移动沿着X和Y移动元素
2.translate最大的优点,不会影响到其他元素位置
3.translate中的百分比单位是相对于自身的translate:(50%,50%)
4.对行内元素没有效果
2.2D转换中心点transform-origin(我们可以设置元素转换的中心点)
1.语法
transform-origin:x y;
2.重点
1.注意后面的参数x和y用空格隔开
2.x和y默认转换的中心点是元素的中心点(50% 50%)
3.还可以给x y设置像素或者方位名词(top bottom left right center)
3.2D转换之缩放scale(可以给元素放大缩小)
1.语法
transform:scale(x,y);
2.重点
1.注意其中的x y 用逗号分隔
2.transform:scale(2,2);宽和高放大了两倍
3.transform:scale(2);宽和高放大了两倍
4.transform:scale(0.5,0.5);缩小0.5倍
5.最大优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子。
4.2D转换综合性写法
注意:
同时使用多个转换,且格式为:transform:translate(),rotate(),scale()等
其顺序会影响转换的效果
当我们同时有位移和其他属性的时候,要把位移放到最前。
5.CSS3动画
5.1.动画的基本使用
制作动画的步骤
1.定义动画
2.调用动画
语法:用keyframed定义动画(类似定义类选择器)
@keyframes 动画名称{
0%{
width:100px;
}
100%{
width:200px;
}
调用:animation-name:动画名称;
animation-during:持续时间;
5.2动画属性
属性 描述
@keyframes 规定动画
animation 所有动画的简写属性,除了animation-play-state属性
animation-name 限定@keyframes动画的名称(必须的)
animation-duration 规定动画完成一个周期所花费的时间或秒默认为0(必须的)
animation-timing-function 规定动画的速度曲线,默认是ease
animation-delay 规定动画何时开始,默认为0
animation-iteration-count 规定动画播放的次数,默认为1,还可以设置infinite
animation-direction 规定动画是否在下一周逆向播放 ,默认normal,还可以设置alternate逆向
animation-play-state 规定动画是否运行或暂停,默认是running ,还有pasued
animation-fill-mode 规定动画结束后状态保持forwards,回到起始位置backwards
5.3动画简写属性
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束状态
5.4速度曲线调节
值 描述
linear 动画从头到尾匀速
ease 默认,动画以低速开始然后加快到结束变慢
ease-in 动画以低速开始
ease-out 动画以低速结束
ease-in-out 动画以低速开始和结束
steps() 指定函数中的间隔数量(步长)
原文地址:https://www.cnblogs.com/xing--/p/12776121.html
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 4. Pandas系列 - 基本功能和统计操作
- 面经手册 · 第8篇《LinkedList插入速度比ArrayList快?你确定吗?》
- 无所不能的Embedding 2. FastText词向量&文本分类
- 5. Pandas系列 - 重建索引
- 6. Pandas系列 - 迭代
- Java 虚拟机基础原理:功能,内存管理,类的加载机制,分析字节码执行过程
- Stack有性能问题?推荐用ArrayDeque队列!队列是什么?什么是双端队列、延迟系列、阻塞队列,全是知识盲区!
- 纯CSS实现照片墙效果
- Tungsten Fabric知识库丨构建、安装与公有云部署
- 7. Pandas系列 - 排序和字符串处理
- JVM调优,程序员必须掌握的知识
- 5分钟Flink - 侧输出流(SideOutput)
- 数据库技术:MySQL 基础和 SQL 入门,单表、约束和事务
- ConcurrentHashMap的size方法是线程安全的吗?
- 数据科学家极力推荐核心计算工具-Numpy的前世今生(上)