![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js+html+css的小练习
在学习三剑客过程中做的一些有趣的东西
品 风 ₯ 未 醉
东莞理工学院
时间流逝,我能留下什么?或许也只有我学习路上的一些点滴,以前有些扫帚自珍了,以后决定更加注重知识的总结
展开
-
利用translate()完成一个动态表单效果:
视频效果:思路: 使用颜色渐变创建出一个颜色盒子,然后使用translate将其移动形成动态效果代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dev原创 2021-10-29 16:28:46 · 183 阅读 · 0 评论 -
利用skew()和scale()来实现一个炫酷的按钮
视频效果思路: 大致实录就是将盒子里边的before倾斜变形,使其变成一个平行四边形的效果,然后将其缩小隐藏,在放大,添加过渡时间就会出现如图所示的效果代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="原创 2021-10-29 16:24:51 · 161 阅读 · 0 评论 -
利用scale()来制作一个图集
视频效果:思路: 当鼠标放到外层盒子上面时,所有的都盒子缩小,,但当鼠标停在某一具体的图片上时,将该具体盒子放大,,并加上滤镜效果,根据层叠的规则改样式的级别更高,所以会先呈现放大的效果代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2021-10-29 16:17:25 · 168 阅读 · 0 评论 -
使用rotate()来做一个3d贺卡
视频效果:思路: 简单的讲一讲吧,好像也没什么好说的,首先就是要将盒子旋转一定的角度,然后结合透视和3d效果,使盒子呈现出一个立体的效果,注意透视和3d书写的位置,然后就是改变盒子的变形原点使其呈现出一个翻盖的效果代码及细节:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content原创 2021-10-29 15:15:34 · 127 阅读 · 0 评论 -
利用transrate()完成手机客户端页面切换效果:
视频效果:思路讲解: 首先我们可以每个a元素创建一个对应的div,并且使用transrate()属性使其漂浮到页面之外,当div的targrt被触发后,再将对应的div漂浮回来代码及细节:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2021-10-29 15:01:29 · 177 阅读 · 0 评论 -
利用scale()与rotate()生成一个环形菜单
视频效果:思路讲解 :首先我们创建一定数量的li同时使用定位改变其位置,当鼠标悬浮上去的时候,将不同的li旋转不同的角度从而形成一个旋转菜单的效果,scale主要是为了将所有的li都隐藏起,这个效果可以直接加在ul上,且要发生在li旋转之前,不然可能会出现,li已经旋转完毕再浮现出来的效果代码及细节:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <met原创 2021-10-29 14:43:47 · 104 阅读 · 0 评论 -
利用css的rotate()做一个3d旋转图集
视频效果:思路:1.要完成这个作品我们一定要理解变形原点的概念,因为要将4张图片形成图中所示的效果,我们一定要改变变形在z轴上的位置,然后使用rotate()形成一个类似于旋转木马一样的效果2.旋转后,其实它已经形成了图中的效果,但我们在平视它时是无法看到效果的我们可以,将包含图片的盒子旋转一个角度,然后为该盒子使用透视效果和3d效果,形成立体的效果,这里要注意透视和3d要写在倾斜的前面,这样透视效果和3d效果才会生效,我也不知道为什么3.好了经过上面的处理,一个静止的3d图集就出来了,但无法旋转,原创 2021-10-29 14:27:36 · 900 阅读 · 0 评论 -
通过js任意拖动html元素
视频效果: 通过js实现在网页中任意拖拽html元素的功能 js及html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2021-10-24 22:44:52 · 1537 阅读 · 0 评论 -
动态轮播图(html+css+js实现)
目录:作品视频效果:思路讲解:知识点讲解:本人使用js+css+html实现了一个动态轮播图,打算写个博文记录一下,下面我会放上:作品视频效果+思路讲解+知识点讲解+如何获取作品视频效果: js+html+css实现动态轮播图 - Google Chrome 2021-10-22 20-02-35 思路讲解:首先是html+js部分,我就直接将代码放上来了:<!DOCTYP原创 2021-10-22 20:49:55 · 3372 阅读 · 0 评论