前端笔记
文章平均质量分 58
前端学习开发笔记
SoloTravelerHQ
想向大佬学习
展开
-
纯css实现旋转正方体
纯css实现旋转正方体思路:1、建一个父div作为正方体容器,在div里面建六个子div作为正方体六个面。2、创建关键帧,让父div旋转起来。效果:代码:<style> /* 设置正方体容器 */ .fu { margin: 150px auto; height: 200px; width: 200px; /* 设置3d转换效果 */ transform-style: preserve-3d; animation: cube原创 2021-11-10 15:30:10 · 644 阅读 · 0 评论 -
纯CSS实现钟表
纯CSS实现钟表思路:1、先创建一个表盘div。2、再在表盘div里设置三个子div,分别作为秒针、分针、时针的旋转载体3、最后在三个子div里分别再设置一个div,作为秒针、分针、时针4、表盘可以用背景图片,也可以用css写,我这里直接百度了一张表盘的图片效果:图片:代码:<style> /* 表盘 */ .biao-pan { width: 300px; height: 300px; margin: 150px auto; bor原创 2021-11-09 17:09:20 · 1674 阅读 · 3 评论 -
盒子模型——margin
盒子模型——margin文章目录盒子模型——margin1、水平布局2、margin水平居中3、外边距重叠4、父子元素外边距重叠问题及解决方案1、水平布局margin在块状元素中设置时,上下左右都可设置,在设置margin-left,margin-top时,是移动当前盒子的位置。而设置margin-bottom时是移动下方盒子的位置。但是设置元素的margin-right时,是没有变化的。这主要是因为盒子的水平布局的总宽度是必须等于其父元素的总宽度。假设父元素的宽是800px,则子元素的margi原创 2021-09-22 22:46:58 · 1553 阅读 · 0 评论 -
子元素左右垂直居中
子元素左右垂直居中1、子元素设置了高度和宽度通过position设置子元素相对于父元素定位,然后将子元素的top、right、bottom、left设置成0再将margin设置成auto,就实现了左右垂直居中原理记住这个公式就行水平布局:margin-left + left + width + right + margin-right = 父元素宽度垂直:margin-top + top + height + bottom + margin-bottom = 父元素高度在子元素高度确定的情况下原创 2021-11-05 13:08:08 · 248 阅读 · 0 评论 -
纯CSS实现图片动画
纯CSS实现图片动画1、先网上下载一张sprites动画图片,直接百度搜sprites图片就可。2、用css设置一个关键帧,确定好起始位置和终止位置,通过background-position调整背景图片在div框中显示的位置。图片可以用ps查看像素大小,便于定位起始位置和结束位置。3、通过animation: test 1s steps(3) infinite;设置动画效果test:关键帧的名称;1s:动画从开始到结束的时间steps(3):步进式播放动画,简言之就是将图片分成了3块原创 2021-11-03 13:14:12 · 4271 阅读 · 0 评论 -
css实现过渡效果
css实现过渡效果主要是通过transition属性来设置。代码如下/* 设置下载app的二维码下拉效果 */.topbar .app .qr-code { width: 124px; /*将过渡元素的高度设置为0,元素内容设置隐藏*/ height: 0px; overflow: hidden; /*transition的第一个值监听高度的变化(其他css属性同样可以监听)第二值设置过渡时间*/ transition: height 1s; /*--------原创 2021-09-30 11:16:18 · 1249 阅读 · 0 评论 -
纯css制作三角形
纯css制作三角形纯css制作三角形的原理是通过设置元素border的属性来达到的。我们先将一个div的border上下左右设置不同的颜色,可以看到border其实是一个梯形。div { width: 100px; height: 100px; border: 10px solid red; border-color: red orange blue yellow;}现在我们将div的宽度和高度设置成0,可以看到现在是四个小三角形div { width:原创 2021-09-26 20:58:31 · 217 阅读 · 0 评论 -
字体图标的下载及使用
图标字体引用文章目录图标字体引用1、Font Awesome下载用法2、IconFont下载用法1、Font Awesome下载打开官网fontawesome我这里选择免费版点击下载下载解压后,将里面的css文件夹和webfonts文件夹移到项目中注:这两个文件夹必须在同一级目录再引入css文件夹里的all.css或all.min.css用法1、通过类名来使用字体图标,类名对应的图标可到官网或百度搜索<span class="fas fa-bell"></spa原创 2021-09-24 23:22:26 · 604 阅读 · 0 评论 -
父元素高度塌陷问题的解决方案
父元素高度塌陷问题的解决方案在界面开发中,我们在布局的时候,很多情况下会给父元素的高度设置auto值,来自适应子元素高度。但是在子元素设置了浮动的情况下,就会出现父元素高度塌陷的问题。解决高度塌陷的方法有很多,但不同的方法多多少少都有一些副作用影响布局,现在介绍一种比较常用的副作用相对较少的解决方案。代码如下css代码//显示父元素.box1{ border: 10px red solid;}.box2{ width:100px; height:100px; ba原创 2021-09-23 18:59:29 · 774 阅读 · 0 评论 -
前端开发笔记
前端开发笔记文章目录前端开发笔记1、判断对象和数组是否为空2、js 分割字符串3、js 指定小数位数4、vue中使用input监听事件5、楼层跳转时,设置滚动条跳转距离6、vue添加监听和消除滚动条事件7、正则身份证验证8、vue中数组更新后,不能及时响应9、uniapp解决input设置高度后文字不垂直剧中10、uniapp文本输入限制为正整数11、uniapp用globalData定义全局变量1、判断对象和数组是否为空1.判断空对象let obj = {}Object.keys(obj).le原创 2021-07-18 23:33:28 · 503 阅读 · 3 评论