洛飞 - 博客园

2022年3月23日

摘要：如图所示：显示如下功能：代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi 阅读全文

posted @ 2022-03-23 11:08 洛飞阅读(55) 评论(0) 推荐(0)

animate的属性

摘要： animate具有如下属性阅读全文

posted @ 2022-03-23 08:56 洛飞阅读(222) 评论(0) 推荐(0)

2022年3月22日

动画animate 之动画序列

摘要：实现如上功能，需要分为五个状态，状态如下：代码如下； <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta 阅读全文

posted @ 2022-03-22 17:20 洛飞阅读(84) 评论(0) 推荐(0)

动画 animation

摘要：动画 animation是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。动画的基本使用先定义动画再使用（调用）动画用keyframes定义动画（类似定义类选择器） @key 阅读全文

posted @ 2022-03-22 15:08 洛飞阅读(289) 评论(0) 推荐(0)

scale之图片缩放

摘要：如下效果的实现是通过scale来完成的使用hover配合scale以及transition过渡来实现代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compat 阅读全文

posted @ 2022-03-22 10:11 洛飞阅读(182) 评论(0) 推荐(0)

2022年3月18日

2D转换之缩放scale

摘要： 2D转换之缩放scale 顾明思义，scale可以放大和缩小语法： transform:scale(x,y); 注意： scale中的x和y以逗号分割 transform:scale(1,1) 宽和高都放大一倍 transform:scale(2,2) 宽和高都放大了2倍 transform:sc 阅读全文

posted @ 2022-03-18 16:15 洛飞阅读(143) 评论(0) 推荐(0)

2D转换中心点transform-origin

摘要：可以设置元素转换的中心点语法：transform-origin:x y; 注意后面的参数x和y用空格隔开 x y默认转换的中心点是元素的中心点（50% 50%）还可以给x y 设置像素或则方位名词（top bottom left right center）利用旋转做出如下内容：思路：一个阅读全文

posted @ 2022-03-18 14:35 洛飞阅读(143) 评论(0) 推荐(0)

2022年3月17日

CSS3 2D或者3D转换

摘要： transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果转换（transform）移动：transform 旋转：rotate 缩放：scale 2D转换是改变标签在二位平面上的位置和形状的一种技术 2D转换之移动 translate 2D移动是2D转换里面的一种功阅读全文

posted @ 2022-03-17 11:01 洛飞阅读(57) 评论(0) 推荐(0)

2022年3月15日

css3属性选择器

摘要： HTML5属性选择器阅读全文

posted @ 2022-03-15 22:48 洛飞阅读(36) 评论(0) 推荐(0)

audio和media标签

摘要： audio标签无论访问者使用什么浏览器，它都将自动选择所读取的第一个文件类型，并为您播放声音。视频如下： HTML5新增input表单如下： H5新增表单属性阅读全文

posted @ 2022-03-15 14:11 洛飞阅读(71) 评论(0) 推荐(0)

洛飞

公告