Web前端
文章平均质量分 63
黑夜中的潜行者
赢家不是那些从不失败的人,而是属于那些从不放弃的人
展开
-
CSS3逐帧动画与补帧动画实现图片轮播效果
动画是使元素从一种样式逐渐变化为另一种样式的效果录制GIF帧率受限,实际效果以真机环境运行为主原创 2022-06-05 11:32:17 · 457 阅读 · 0 评论 -
原生JavaScript实现可自定义缩放轮播图效果
原生JavaScript实现可自定义缩放轮播图效果轮播效果的应用轮播原理效果轮播的实现HTML 部分CSS 部分JS 部分轮播效果的应用网站中使用轮播效果,在如今的各大企业门户网站中可谓是重头戏啊,尤其是电子产品厂商。良好的轮播效果,给消费者带来视觉上的冲击,是非常有效的营销手段。这里最具代表性的要属华为、小米的网站,他们对于轮播的使用可以说是刻进基因里的。轮播原理轮播效果的原理其实并不神秘,就是替换,后者替换前者效果录制效果,改动了切换时间轮播的实现这里的实现方式便是 HTML原创 2022-04-16 11:14:25 · 1192 阅读 · 0 评论 -
常用且容易遗忘的 CSS 样式整理
1、文字超出部分显示省略号单行文本的溢出显示省略号(一定要有宽度) p{ width: 200rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}多行文本溢出显示省略号p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: h原创 2021-07-24 12:14:57 · 190 阅读 · 0 评论 -
Web前端H5项目适配暗黑模式
Web前端H5项目适配暗黑模式背景H5项目适配深色模式方案声明 color-schememetaCSS通过 CSS 媒体查询图片适配JavaScript中判断当前模式&监听模式变化matchMediaaddListener()JavaScript监听判断背景 近年来随着 iOS 13 的发布,深色模式(Dark Mode)越来越多地出现在大众的视野中,支持深色模式已经成为现代移动应用和网站的一个潮流,前段时间更是因为微信的适配再度引起热议。 深色模式不仅可以大幅减少电量的消耗,减弱强光对原创 2021-06-28 18:10:07 · 2142 阅读 · 0 评论 -
CSS z-index 重叠排序
CSS z-index 重叠排序一、z-index语法与结构二、z-index使用条件三、案例1. z-index重叠顺序案例2. 案例说明原创 2020-12-30 13:25:34 · 519 阅读 · 0 评论 -
CSS垂直居中的常用方法
CSS垂直居中的常用方法设定行高(line-height)添加伪元素(::before、::after)calc动态计算使用表格或假装表格transform绝对定位使用Flexbox设定行高(line-height)添加伪元素calc动态计算使用表格或假装表格transform绝对定位使用Flexbox设定行高(line-height) 定行高是垂直居中最简单的方式,适用于“单行”的“行内元素”(inline、inline-block),例如单行的标题,或是已经设为inline原创 2020-12-24 15:50:03 · 909 阅读 · 6 评论 -
HTML中SVG转化
HTML中SVG转化;一、转换简单示例;二、哪些元素可以转换?三、转换函数;1. 移动 translate();2. 旋转 rotate();3. 缩放 scale();4. 偏斜 skew()原创 2020-12-03 11:43:25 · 1400 阅读 · 0 评论 -
CSS3设置按钮的样式
平面按钮样式——现主流在实际开发中,按钮的应用是必不可少使用 CSS 来制作按钮,可以更有新意,更有趣,也可以自定义自己想要的样式平面样式按钮的使用现在非常流行,并且符合无处不在的平面设计趋势实现方式.button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-dec原创 2020-09-07 10:32:03 · 37497 阅读 · 0 评论 -
浏览器是如何运行的
浏览器是如何运行的浏览器的发展史1991年Berners Lee(互联网发明者之一)font>建立了第一代网络浏览器 WorldWideWeb —— 只支持显示文本图片1993年 Mosaic —— 可以同时显示文本和图像的浏览器1994年 网景浏览器 —— 只能显示简单的 html 没有css、js 获得世界范围内的成功、占领了绝大多数的市场份额同年出现了 opera 浏览器1995年 Microsoft 发布了万恶的 IE1.0、IE2.0 自此第一次浏览器大战正式打响199原创 2020-08-24 13:52:55 · 700 阅读 · 0 评论 -
制作 input 动画(前端动画)
前端动画(无废话)html 主体 <div class="wrapper"> <div class="input-data"> <input type="text" required> <div class="underline"></div> <label>输入</label> </div> &原创 2020-08-09 08:57:26 · 587 阅读 · 0 评论 -
JS每日自动换图_周图&月图——纯JS
纯JS做每日换图,是非常简单的换图的常规频率为周轮和月轮思路是相同的当然也可以使用定时器来做自定义时间段的轮播式每日换图可以认为是轮播的衍生或者它衍生了轮播,都可以为便于理解,不展示body标签以外的代码????????你没看错就是这么一丢丢 ????划重点<body> <img id="img" width="80%"> <script> //只找了7张图 //每周轮换 var imgS原创 2020-07-27 10:07:09 · 482 阅读 · 1 评论 -
Bootstrap4 — 表单非空验证、图片占位符、图片响应式、工具类
Bootstrap4 常用布局;表单非空验证图片占位符图片响应式工具类隐藏和显示 display浮动原创 2020-05-05 08:37:39 · 1408 阅读 · 0 评论 -
ES6(ECMAScript 6)部分语法—简化语法的使用
ES6 简化语法的使用1、let 关键字2、模板字符串3、对象的简化赋值4、箭头函数5、箭头函数的 `this`关键字原创 2020-04-30 20:43:19 · 257 阅读 · 0 评论 -
css3+js实现按钮水纹涟漪效果
css3+js实现按钮水纹涟漪效果HTML首先我们用<a>标签定义两个按钮<a href="#">button</a><a href="#">button</a>CSS3调整布局样式色彩范围* { margin: 0; padding: 0; font-family: 'Poppins',...原创 2020-04-15 11:19:01 · 1051 阅读 · 0 评论 -
CSS3实现打勾(✔)效果
CSS3实现打勾效果 看效果图原创 2020-04-05 17:59:13 · 6804 阅读 · 6 评论 -
Bootstrap 栅格系统(适合于各阶段学者)
栅格系统定义:运用固定的格子遵循一定规则,进行页面布局,使我们布局更加规范简洁原创 2020-04-02 17:21:07 · 836 阅读 · 1 评论 -
为什么要学Vue,Vue.js是什么,开始学Vue,Vue的基础指令,自定义指令
Vue.js原创 2020-04-24 17:01:26 · 352 阅读 · 0 评论 -
ASP.NETWeb弹出式登录
闲来无事,想起之前项目答辩的时候,登录页无法定夺唉????于是便撸了个通用型的登录页原理非常简单,个人觉得也很实用点击登录按钮弹出登录框,与此同时原来的显示层被遮盖,在上层的login框中输入并登录因为是演示案例不做登陆处理前端布局<form id="form1" runat="server"> <button type="button">登录&...原创 2020-03-02 17:42:31 · 1802 阅读 · 3 评论 -
web前端开发#16进制色彩代码
相信不少前端开发的童鞋门都有这样的苦恼,自己在写效果的时候,对于色彩是很不好把控的同样的我也是,当然我不是专搞前端的啦,不过还是忍不住分享下,虽不至每个色彩都包含,平常使用还是很????的哟。当初刚学前端的时候搞得,不过不是图,后来为了方便就搞成了图片...原创 2020-03-01 15:38:38 · 470 阅读 · 0 评论 -
垂直手风琴导航栏
做项目时第一次做垂直手风琴导航栏便记录下来使用jQuery更简单扩展浏览器支持本例采用jQuery1.12.4版前端HTML:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="./j...原创 2020-02-16 10:15:55 · 470 阅读 · 0 评论