HTML5
关注
分享
扫一扫
文章平均质量分 69
John的WEB前端学习日记
这个作者很懒，什么都没留下…
展开
-
使用CSS transition和animation改变渐变状态
特别声明，本文根据@ANA TUDOR的《The State of Changing Gradients with CSS Transitions and Animations》一文所整理。到目前为止，CSS的渐变属性linear-gradient和radial-gradient已经是很成熟的CSS特性了，而且repeating-linear-gradient和conic-gradient也越来越成熟。CSS渐变特性对于我们的帮助已经非常强大了，它们可以帮助我们绘图、创建图片占位符、制作环形进度条等.转载 2020-12-08 16:25:05 · 1130 阅读 · 0 评论 -
CSS伪类选择器nth-child 选择3的倍数个元素写法
CSS伪类选择器nth-child 选择3的倍数个元素写法web开发中，经常有对列表的3倍数列表项单独设置样式的需求。ul li:nth-child(3n+3) {color: #ccc;}上面的css是干什么用的，它就是在无序列表里面选择是3倍数的列。也就是第3个，第6个，第9个等等。...原创 2019-12-24 18:31:23 · 3313 阅读 · 0 评论 -
手机端弹出遮罩层时禁止底层滚动
手机端按用户体验来说，有弹出窗的出现的话底层应该禁止滚动，但手机端默认是滚动的；后来找到个简单的方法：动态修改html,body的overflow，注意：必须同时设置height：100%html,body{ height:100%, overflow:hidden }原创 2017-12-07 10:26:47 · 6609 阅读 · 0 评论 -
如何将页脚固定在页面底部
作为一个Web的前端攻城师，在制作页面效果时肯定有碰到下面这种现象：当一个HTML页面中含有较少的内容时，Web页面的“footer”部分随着飘上来，处在页面的半腰中间，给视觉效果带来极大的影响，让你的页面看上去很不好看，特别是现在宽屏越来越多，这种现象更是常见。那么如何将Web页面的“footer”部分永远固定在页面的底部呢？注意了这里所说的是页脚footer永远固定在页面的底部，而不是永远固定转载 2017-12-25 14:10:01 · 704 阅读 · 0 评论 -
aos.css——页面滚动动效库
AOS 是一个用于在页面滚动的时候呈现元素动画的工具库，你可能会觉得它和WOWJS一样，的确他们效果是类似的。但是AOS是 css3动画驱动的库，当你滚动页面的时候能让元素动起来，当页面滚回顶部的时候，元素能够回到前一个状态，如此达到循环动画的效果。demo地址：https://michalsnik.github.io/aos/...原创 2018-02-23 11:17:16 · 1856 阅读 · 0 评论 -
javascript history对象详解
前面的话history对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。由于安全方面的考虑，开发人员无法得到用户浏览器的URL，但借由用户访问过的页面列表，可以在不知道实际URL的情况下实现后退和前进。本文将详细介绍BOM中的history对象lengthhistory.length属性保存着历史记录的URL数量。初始时，该值为1。如果当前窗口先后访问了三个网址，history.length...转载 2018-02-24 11:13:48 · 2378 阅读 · 0 评论 -
ios微信浏览器-div设置滚动-不出现滚动条的解决办法
<style type="text/css">.scrolldiv{height: 85%;overflow: hidden;overflow-y: scroll;}.scrolldiv::-webkit-scrollbar-track-piece { background-color: #FFF; border-left: 1px solid #FFF;}.s...转载 2018-04-24 14:56:09 · 3174 阅读 · 1 评论 -
移动端常见bug汇总
本文是摘录整理了移动端常见的一些bug以及解决方案，第一篇，后面还会有持续的文章更新整理。点击样式闪动Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。A:根本原因是-webkit-tap-highlight-color，这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。建议写在样式初始化中以...转载 2018-05-15 17:01:48 · 1659 阅读 · 0 评论 -
利用CSS3实现的文字定时向上滚动
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>moveUp</title><style>ul,li{ margin:0; padding:0; }li{ list-style:转载 2018-07-03 11:33:36 · 7297 阅读 · 0 评论 -
grid网格布局
前言现在我们大家在实际的开发中，可能用的最多的就是flex布局，当然还有浮动和定位，除此之外，这两年一直听到网格布局是趋势，即grid布局，但是项目中没有太多的应用，所以特此总结一下，希望对大家也对我自己有帮助。给大家一个直接的效果体验一下：网格布局：就是一个容器内部由一个个的项目组成，是一个二维布局，接下来，我们就会围绕 容器 和项目 来介绍网格布局，目录...转载 2019-07-29 09:48:15 · 738 阅读 · 0 评论 -
打造丝般顺滑的 H5 翻页库
转自：http://fex.baidu.com/blog/2017/10/build-a-silky-smooth-slide-library/背景随着近几年移动营销页的火爆，催生了一个中国式的名词「H5」。而 H5 最常见的形态就是类似幻灯片翻页效果。我们需要制作 H5 的时候，最快的办法就是使用一些滑动插件库，如 iDangero.us 出品的 Swiper，百转载 2017-11-30 10:49:08 · 3702 阅读 · 0 评论 -
Vivify动画库
Vivify 是由纯 CSS 写的动画库，该库提供了超过 50 种动画效果供你选择。你只需要将 Vivify 的类添加到相应的元素，即可使其产生动画效果，并且添加 infinite 类后，动画就可以循环播放了。项目地址：【传送门】预览地址：http://vivify.mkcreative.cz/原创 2017-09-21 12:15:43 · 859 阅读 · 0 评论 -
使用CSS修改HTML5 input placeholder颜色
本文选自StackOverflow（简称：SOF）精选问答汇总系列文章之一，本系列文章将为读者分享国外最优质的精彩问与答，供读者学习和了解国外最新技术。本文将为读者讲解HTML5 Input Placeholder Color的个性化设定，需要针对不同浏览器内核来编程。问题：David Murdoch：Chrome支持input=[type=text]占位文本属性，但下列CSS转载 2016-04-08 11:28:17 · 771 阅读 · 0 评论 -
移动端H5页面之iphone6的适配
iphone6 及 iphone 6 plus 已经出来一段时间了。很多移动端网站，以前写死body 为320px的，现在估计也忙着做适配了。大屏幕手机其实一直有，只是以前大家没怎么重视，移动端的H5页面大部分都以320px为基准宽度进行布局，那些大屏屌丝android用户也懒得去理，而现在iphone也搞起多屏幕，老板们重视程度就不一样了。回归正题，兼容iphone各版本机型最佳的方式就转载 2016-05-13 17:33:28 · 3844 阅读 · 0 评论 -
浅谈session,cookie,sessionStorage,localStorage的区别及应用场景
浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式，可以利用cookie,session等跟服务端进行数据交互。一、cookie和sessioncookie和session都是用来跟踪浏览器用户身份的会话方式。区别：1、保持状态：cookie保存在浏览器端，session保存在服务器端2、使用方式：（1）cookie机制：如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏...转载 2017-01-22 11:36:53 · 7906 阅读 · 0 评论 -
动画学习之Animate.css的使用与解析
转自：http://blog.youkuaiyun.com/code_for_free/article/details/52075129animate.css的主页简单明了，能演示各个动画的效果，目的也很简单，“just-add-water css animations”。那天好奇去搜索了一下作者Daniel Eden，真是酷到不行。不多说，直接上学习资料：官方github转载 2017-05-10 16:15:42 · 462 阅读 · 0 评论 -
用原生HTML5控件实现输入框自动提示（下拉列表补全）功能
转自：http://www.cnblogs.com/Chen-XiaoJun/articles/5839335.html元素介绍想象一下我们想要用户输入一个字符串，例如他们的名字，我们可能会用到元素，这样子用户就可以随意的输入他们的内容。想象一下假如我们需要用户输入的是他们的国家居住地，我们更喜欢使用元素，这个将会限制可选的结果（有时候也许是好的），并且还存在着一个潜在的巨大用户选转载 2017-06-05 16:00:48 · 26167 阅读 · 1 评论 -
H5消除transition闪屏
消除transition闪屏，在动画css中加入以下代码：.css { -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; }转载 2017-09-05 14:35:30 · 5772 阅读 · 0 评论 -
移动端调试神器（eruda）
在日常的移动端开发时，一般都是试用chrome浏览器的移动端模式进行开发和调试，只有在chrome调试完成，没有问题了才会上到真机测试，移动端开发的一大问题就在于此，各种品牌各种型号手机，手机中各种类型的浏览器APP........还好移动端的相对一致点，但是往往都会有一些各种各样的坑，这时候就蛋疼了，明明chrome调试工具中是正常的，一到某个浏览器中就炸了，怎么办，又无法像在c转载 2017-09-13 15:27:37 · 934 阅读 · 0 评论 -
页面加载自动生成meta标签，做屏幕自适应功能
/** * * viewport scale根据设备像素比自动生成 * Html根元素font-size根据设备像素比自动生成 * by MC */(document.DOMContentLoaded = function () { var meta = document.createElement("meta"), scale = 1.0 / window转载 2017-09-22 17:43:18 · 1050 阅读 · 0 评论 -
移动 Web 开发问题和优化小结
1.前言到目前为止，互联网行业里，手机越来越智能化，移动端占有的比例越来越高，尤其实在电商，新闻，广告，游戏领域。用户要求越来越高，网站功能越来越好，效果越来越炫酷，这就要求我们产品质量越来越高，web前端开发而言是一个挑战，是一个难题，也是一个机遇。如何让我们所开发的手机页面能有更好的交互体验，就是这篇文章的主旨：移动web开发问题和优化小结。这个只是我自己在开发的时候知道的坑，如果大家有遇转载 2017-09-26 11:49:02 · 314 阅读 · 0 评论 -
HTML5 video 事件
使用 HTML5 video 事件HTML5 video 事件提供簡化網頁與增加網頁效率的方法。為什麼使用事件？我的網頁是否已準備就緒？目前的播放進度？該按鈕現在執行什麼動作？是否完成了？相關主題為什麼使用事件？HTML5 video 物件提供數種可以簡化和增強網頁內容的事件。 下列範例是關於使用事件查看內容是否可用、視訊转载 2014-04-22 11:38:54 · 2491 阅读 · 0 评论