![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端小案例
rufeike
努力上游,力争大虾
展开
-
js 實現僞數組轉成真數組Array.prototype.slice.call(僞數組).forEach(()=>{})
實現僞數組轉成真數組實現方法:Array.prototype.slice.call(僞數組).forEach(()=>{})示例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content=...原创 2020-02-13 11:41:30 · 298 阅读 · 0 评论 -
VUE實現購物車數量編輯頁面小案例
VUE實現購物車數量編輯頁面小案例效果如下代碼<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...原创 2020-02-02 11:30:29 · 222 阅读 · 0 评论 -
css3实现无缝滚动的轮播图
css3实现无缝滚动的轮播图效果图css3动画知识应用指定动画名称:animation-name: moveTest;定义动画@keyframes moveTest { 0% { transform: translate(100px); } 50% { ...原创 2019-10-22 21:50:57 · 4243 阅读 · 0 评论 -
css3实现正方体和旋转效果
css3实现正方体和旋转效果实现效果图涉及知识点3D移动方法:translate3d(x,y,z)单独设置:translateX(length),translateY(length),translateZ(length)3D旋转方法:rotate3d(x,y,z,angle)3D动画结果保留设置transform-style:preserve-3d;子元素将保留其3d位置 -...原创 2019-10-22 17:29:50 · 3901 阅读 · 0 评论 -
css3实现任意元素居中
css3实现任意元素居中实现效果实现方式方式一:position定位和margin边距实现,该方式受定位元素大小影响,不同宽高的元素,需要计算margin的值。方式二:position定位+transform:translate(-50%,-50%)移动实现,推荐使用,无需考虑定位元素的宽和高代码实现<!DOCTYPE html><html lang="en"...原创 2019-10-22 14:52:37 · 442 阅读 · 0 评论 -
h5+css3实现手风琴菜单效果
h5+css3实现手风琴菜单效果实现效果图实现原理通过控制二级菜单的高度过渡属性,实现菜单展开和收起。过渡动画知识简写语法:transition:property duration timing-function delay;或按以下属性单独设置transition-property:规定设置过渡效果的css属性名称transition-duration:规定完成过度效果需要多...原创 2019-10-22 11:25:56 · 1765 阅读 · 0 评论 -
提升移动端小图标的用户点击体验区域小技巧
提升移动端小图标的用户点击体验区域问题描述移动端如果使用精灵图作为背景图标素材排版时,为了只显示对应的图标,会把显示图标的容器元素宽高设置成图标大小,方便显示对应的图标。但由于图标尺寸比较小,需要在对应位置增加点击事件时,经常会无法准确点击或误触碰相邻的元素,这样会造成用户体验效果极差(如下图的)。最近在学习css3时,发现设置背景裁剪属性(background-clip:content-bo...原创 2019-10-22 01:02:44 · 831 阅读 · 0 评论 -
使用CSS3伪类和圆角实现安卓图标
使用CSS3伪类和圆角实现安卓图标效果图知识点伪类E::before和E::after圆角border-radius代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> ...原创 2019-10-21 23:47:47 · 534 阅读 · 0 评论 -
原生h5+css3 实现简单视频播放器组件
视频播放器组件案例实现效果实现功能全屏切换进度条点击跳播音量点击设置大小涉及知识点video对象属性.duration 获取视频总长度(秒).currentTime 当前播放时间(秒).volume 获取音量或设置音量 (值0-1).paused 是否暂停状态 (true/false)video 对象方法.play() 播放.pause() 暂停...原创 2019-10-20 23:14:38 · 4429 阅读 · 2 评论 -
h5+css3简单实现网页端五子棋游戏1.0版
H5+css3简单实现五子棋游戏原理主要使用H5的拖拽接口功能,通过拖拽移动棋子,目标位置通过接收拖拽棋子的拷贝元素,实现棋子摆放。效果图如下步骤第一步:简单排版五子棋游戏页面,设定好棋盘排放区域,并把事先准备一张棋盘背景图片作为棋盘区域的背景图,使用background-size:contain平铺。并在棋盘上方画表格,让表格中的td内容位置刚好处于背景图片放置棋子的位置,红色虚...原创 2019-10-20 15:28:36 · 2750 阅读 · 0 评论