html5+css3
关注
分享
扫一扫
夏末_阳光依然耀眼
一个人，走在陌生的城市，听伤感的音乐，看陌生的风景。我们都在寻找，人生就是寻找爱的过程，每个人都会遇到三种人，你爱的，爱你的，与你共度一生的。并不是每一对有缘相爱的恋人，都有相守一生的缘分；也许这一场恋爱是情深缘浅，下一场就缘定终生，去爱吧，像不曾受伤一样。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
CSS3 HTML5下雪特效 雪花飘飘
CSS3 HTML5下雪特效 雪花飘飘$(document).ready(function () { makeSnow("christmasSnow", "bg.jpg");});function makeSnow(canvasId, imagePath) { var christmasSnow = new ChristmasSnow(canvasId, imageP转载 2014-11-01 16:59:16 · 3438 阅读 · 1 评论 -
可控制导航下拉方向的jQuery下拉菜单代码
可控制导航下拉方向的jQuery下拉菜单代码：可控制导航下拉方向的jQuery下拉菜单代码*{ margin:0; padding:0; list-style:none;}.nav{ width:700px; height:30px; line-height:30px; margin:200px auto;}.nav li a{ color:#fff; text-decora转载 2016-11-03 10:58:30 · 476 阅读 · 0 评论 -
jquery简单菜单下拉导航
jquery简单菜单下拉导航代码如下：复制运行即可简单导航菜单*{ margin:0; padding:0; list-style:none;}#nav { margin: 0; padding: 0; list-style: none; border-left: 1px solid #d5dce8; border-right: 1px solid #d5原创 2016-11-02 09:22:55 · 600 阅读 · 0 评论 -
解决UC浏览器、微信浏览器使用display:flex;的兼容性问题
在android平台的uc浏览器和微信浏览器中使用display: flex;会出问题。使用display: flex;的时候需要加上display: -webkit-box;使用flex: 1;的时候要加上:-webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; 使用alig转载 2016-11-14 15:58:29 · 4379 阅读 · 0 评论 -
svg英文字母动画代码
无标题文档 html, body, .hello-parent { height: 100%; width: 100%; margin: 0;}.hello-parent { display: flex; background: #fff; background: -webkit-radial-gradient(#fff, #eaeaea); backgro原创 2017-07-19 17:35:29 · 1598 阅读 · 0 评论 -
html5 video视频标签自适应手机样式
css.vid-wrap{ width:100%;background: #000; position:relative; padding-bottom:56.25%; /*需要用padding来维持16:9比例,也就是9除以16*/ height: 0;}.vid-wrap video{ position: absolute; top原创 2017-08-09 11:09:05 · 19080 阅读 · 2 评论 -
纯css3实现的太极八卦并且会转动的css3特效
纯CSS3实现太极图形样式代码 - 代码笔记 .square{ width:400px;height:400px;position:relative; transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); animation:rota转载 2017-09-22 11:23:43 · 1151 阅读 · 0 评论 -
CSS常用 Less 公共样式封装
/------------------------------------- ├ 布局 ┆ └------------------------------------/// 盒子宽高.size(@w, @h) { width: @w; height: @h; }// 最小尺寸, 兼容IE6.min-width(@min-w) { min-width: @min-w; _wi转载 2017-12-14 14:35:39 · 16351 阅读 · 1 评论 -
Web前端NW.js开发桌面应用教程
最近要做个桌面的应用，用起来也方便。找了一圈发现NW.js挺容易上手，分享给大家。NW.js 官网https://nwjs.io/ 1.下载适合当前版本的js 【这里下载的SDK版本，方便后续调试】 2.解压到本地 3.构建自己的project index.html和package.json这两个文件必须要有的。 4.把项目放到n...转载 2019-05-23 17:06:53 · 963 阅读 · 0 评论 -
vue.js实现单选获取选中值
<!DOCTYPE HTML><html lang="zh-cn"><head><meta http-equiv="Content-type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width,initial-sca...转载 2019-07-20 13:44:47 · 882 阅读 · 0 评论 -
vue.js实现复选框选中取消获取选择值
<!DOCTYPE HTML><html lang="zh-cn"><head><meta http-equiv="Content-type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width,initial-sca...转载 2019-07-20 13:47:29 · 1772 阅读 · 0 评论 -
wap手机版css兼容笔记
1、页面头部声明如下，此声明初始化页面不可移动，不可缩放，可以自动重力感应。 2、页面最外层div可以用最大宽度来实现：.main{ background:#fff; margin:0 auto;position:relative; max-width:640px;}尽量不要使用@media only screen and (min-device-width原创 2016-08-15 13:22:17 · 538 阅读 · 0 评论 -
css3 attr和content 属性
比如我们要实现一个悬浮提示的功能。传统方法，使用title属性就能实现，但是现在我们要更美观，可以使用css3提供的attr：能够在css中获取到元素的某个属性值，然后插入到伪元素的content中去。假如我们的html代码如下：hello...我们来看看实现这个插件的css代码：div { position: relative;}div:hover::转载 2016-08-23 10:41:37 · 1649 阅读 · 0 评论 -
html5+CSS3 飘带菜单 超酷3D菜单
http://www.html5tricks.com/css3-3d-ribbon-menu.html转载 2014-11-01 11:17:09 · 1389 阅读 · 0 评论 -
css3 filter图片美化的10种特效（只支持webkit内核）
滤镜.photo{ width:500px; height:658ox; margin:0 auto; border:solid 1px #000; padding:2px;}.filter1{ -webkit-filter:grayscale(1);} /*去色*/.filter2{ -webkit-filter:sepia(1);} /*黄昏色*/转载 2014-12-16 17:12:00 · 1382 阅读 · 0 评论 -
jquery 弹出层垂直居中不动 页面可滚动兼容ie6
弹出层$(function(){ $('.popBox em').click(function(){ $('.popBox').fadeOut(function(){ $('#screen').hide(); }); return false; }); $('.btns').click(function(){ var h = $(document).height();原创 2015-01-27 15:28:49 · 1205 阅读 · 0 评论 -
js+css手机号码提示信息框
telephone number-->*{ margin:0; padding:0;}form{ width:300px; position:relative; margin:10px;}fieldset{ padding:10px; border:1px dashed #原创 2014-12-02 14:05:37 · 1318 阅读 · 0 评论 -
HTML5本地存储之Web Storage篇
HTML5本地存储之Web Storage篇 --> 姓名： 手机： 输入手机号：转载 2014-12-06 16:23:57 · 596 阅读 · 0 评论 -
js实现导航菜单效果
$(document).ready(function(){ var temp; var nva_popitems = $(".nva ul li .nva_pop").hover(function(){ if(temp){window.clearTimeout(temp);} var _self = $(this); var _index = nva_popitems.i原创 2015-03-18 10:10:17 · 2196 阅读 · 0 评论 -
移动wapapp 用rem来做响应式开发
Demo 由于这个项目我设置了最大的宽度限制是640px,最小限制是320px,大家可以改变浏览器的分辨率或者通过手机访问看看效果。基本上在不同分辨率下都是差不多的展示效果，而且在手机移动终端下都是100%的撑开。这种响应式的效果，我想应该是最符合现在移动终端多样化的需求的，如果只是做几个特别适应的尺寸，例如320、480、340、600这种特定的尺寸，那真是要累死前端开发的同学转载 2015-10-08 11:23:06 · 513 阅读 · 0 评论 -
jquery全局hover方法，支持全局调用
jquery全局hover方法，支持全局调用$.fn.obj2hover = function(){ var items = $(this); $.each(items, function(index, item){ $(item).hover(function(){ $(this).addClass("hover");原创 2016-07-13 11:59:33 · 636 阅读 · 0 评论 -
css实现图片垂直居中(兼容IE6/IE7)
图片垂直居中兼容ie系列优劣对比：1.利用table-cell实现居中，font-size做兼容兼容IE6+/FF/Chrome优点：不添加任何多余标签，兼容主流浏览器缺点：需要计算处理font-size2.利用line-height实现居中兼容IE7+/FF/Chrome优点：不需要任何hack，兼容IE7+主流浏览器缺点：此方原创 2016-07-06 17:56:30 · 922 阅读 · 0 评论 -
在ios桌面添加web站点图标及增加启动画面
虽然没有能力开发Native App，但还是可以利用iOS中Safari浏览器的特性小小的折腾一下，做一个伪Web App满足下小小的虚荣心的。既然是在iOS中的Safari折腾的，那么代码中利用到的也基本上都是Safari的私有属性。添加图标到主屏幕是Web App的第一步：添加图标到屏幕里的有两种属性值apple-touch-icon和apple-touch-icon-p转载 2016-08-22 12:04:15 · 6860 阅读 · 4 评论 -
CSS3鼠标悬停图片时镜面白光闪过
闪光图片*{ margin:0; padding:0;}.box{ position: relative; box-shadow: 0 0 10px #FFF;}em{ position: absolute; left: -180px; top: 0; width: 180px; height: 110px; background-image: -moz-linear-g转载 2016-08-23 10:01:50 · 3381 阅读 · 0 评论 -
H5 video播放视频，微信内小窗播放
腾讯对微信尤其是安卓版本的内置浏览器内核做了一点点小处理，在X5内核下，播放会强制全屏，如果需要进行边视频边互动下则无法实现。无论使用百度或者是科学上网google都没有解决办法，就连腾讯开发者论坛内相关帖子也都做了删除处理。后面发现，如果要实现小窗播放，只需要把video转化为html5模式，转化方法如下。<videostyle="object-fit:fill"preloa...转载 2019-09-23 14:46:01 · 2278 阅读 · 0 评论