CSS transform 2D位移与旋转

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜

定义2D转换中的移动,沿着 X 和 Y 轴移动元素;transform 的位移不会影响其他元素的位置

// transform 中的 translate 百分比单位长宽 是对于自身元素单位长宽;
// transform 对行内标签没有效果

向上移
向下移
向左移
向右移
向右转
向左转

该CSS样式常搭配 :hover 与 transition 一起使用

transform: none|transform-functions; //不进行转换 或 设置转换的方式函数

继续阅读

<iframe> 标签

iframe 将实现另一个HTML页面的嵌入

iframe 元素会创建包含另外一个文档的内联框架(即行内框架)

// 仅用了短短几行代码 就能引入另外一个网页的样式

继续阅读

CSS 的 transition 实现效果过渡

transition 属性设置元素当过渡效果,四个简写属性为:

属性 描述
transition-property all,height,width… 规定设置过渡效果的 CSS 属性的名称。
transition-duration 0s+ (单位s) 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function linear,ease,ease-in,ease-out,ease-in-out 规定速度效果的速度曲线。
transition-delay 0s+ (单位s) 定义过渡效果何时开始。

手机展柜动画过渡案例

继续阅读

利用 JS 替换标签的CSS类实现界面交互案例

JS实现鼠标经过某处后内容切换

原理:利用JS的 document.getElementsByClassName() 获取类对应的标签对象。并用Dom对象属性中的 onmouseover 捕获鼠标划过状态时 执行 替换CSS样式 方法,并让其他标签元素隐藏,实现界面交互效果

::栏目A呈现的内容::

我是SMM,其实不瞒你说。我已经继承了百万遗产

::栏目B呈现的内容::

我是Aipo,一个喜欢画画的中二少女

::栏目C呈现的内容::

我是叫夜夜,是群里的一个姬器人…

继续阅读

HTMl的表单标签

input输入表单元素

<form> 标签定义及用法 在html中, <form> 标签是使用来创建供用户输入的 html表单,在网页中很常见,比如:注册和登录页面就是用表单实现的。

form的常用属性分别有<form action=”提交地址” method=”提交方式”>表单内容</form>

<form> 标签中通常会有很多子元素,用来定义各种交互控件(文本字段、复选框、单选框、提交按钮等等),比如< input>< button>< select>< textarea> 等标签

继续阅读

JS 的Date对象

Date 对象用于处理日期和时间

创建 Date 对象的语法 (实例化):

// 实例化 Date类 并赋值给 nowTime
let nowTime = new Date();
console.log(nowTime);//Thu Jul 29 2021 11:45:55 GMT+0800 (中国标准时间);
// 返回时间戳
let nowTime = +new Date();
Date方法 解释说明
getDate() 返回月中的第几天(从 1 到 31)
getDay() 返回星期几(0-6)
getFullYear() 返回年份
getHours() 返回小时(从 0-23)
getMinutes() 返回分钟(从 0-59)
getMonth() 返回月份(从 0-11)
getSeconds() 返回秒数(从 0-59)。
继续阅读

js的for in遍历对象

for in可用于遍历对象
let obj={
    '名字':'smm',
    '性别':'男',
    '工作':'程序员'
}
for(var key in obj){
    //遍历属性名
    console.log('::'+key+'::');
     //遍历属性值
    console.log(obj[key]);
    console.log('-------------');
}

结果

%title插图%num