css3
关注
分享
扫一扫
文章平均质量分 76
开心大表哥
高级前端开发进阶版
展开
-
h5开发通用sass基础配置文件
h5开发通用sass基础配置文件：a, abbr, acronym, address, applet, article, aside, audio,b, blockquote, big, body,center, canvas, caption, cite, code, command,datalist, dd, del, details, dfn, dl, div, dt,em, emb原创 2017-09-23 12:27:34 · 16887 阅读 · 0 评论 -
css3 calc()方法详解
平时在制作页面的时候，总会碰到有的元素是100%的宽度。众所周知，如果元素宽度为100%时，其自身不带其他盒模型属性设置还好，要是有别的，那将导致盒子撑破。比如说，有一个边框，或者说有margin和padding，这些都会让你的盒子撑破。我们换句话来说，如果你的元素宽度是100%时，只要你在元素中添加了border,padding,margin任何一值，都将会把元素盒子撑破（标准模式下，除IE怪异...原创 2018-03-13 10:39:03 · 3308 阅读 · 3 评论 -
操作animate.css的一些小技巧
animate.css是一个不错的css3动态样式文件，它利用keyframes封装了很多动态样式。具体的可以到官网查看 由于内容少而且方便操作，所以官网上竟然连教程都没有写；咋一看会有一种丈二和尚摸不着头脑。 编哥我也是摸索了一阵才领悟到的，所以我写个文章把一些操作和巧妙都记录下来，方便以后回顾！ 1.用别人的东西肯定要拿过来嘛！所以第一步就是先把animate.css这个文件，拿到本...原创 2018-04-22 23:30:51 · 5360 阅读 · 1 评论 -
css实现多列高度不同的div等高
利用padding-bottom|margin-bottom正负值相抵；设置父容器设置超出隐藏（overflow:hidden），这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任 一列高度增加了，则父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。 <!DOCTYPE HTML&...原创 2018-04-30 20:43:02 · 8336 阅读 · 2 评论 -
css清除浮动的最好的方式和原因
清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。 不清浮动： 清浮动： 原理： （1） display:block使生成的元素以块级元素显示,占满剩余空间 （2）height:0避免生成内容破坏原有布局的高度 （3）visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和...原创 2018-04-30 21:02:10 · 5904 阅读 · 2 评论 -
一秒入门：不定宽高的水平垂直居中简单方式
<html> <meta charset="UTF-8"> <body> <div class="container"> <div class="wrap"> <p>铺设大量智能设备，使用原创 2018-04-24 18:07:51 · 8465 阅读 · 3 评论 -
移动端1px误差的原因以及解决方案
移动端1px问题在面试和工作中会经常遇到，系统地理解它是一个优秀前端的必修课！为什么移动端css里面写了1px, 实际看起来比1px粗. 其实原因很好理解:这2个’px’的含义是不一样的. 移动端html的header总会有一句<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum...原创 2018-05-06 19:32:38 · 5480 阅读 · 0 评论 -
js防止安卓手机软键盘弹出挤压页面导致变形的方法
h5防止安卓手机软键盘弹出挤压页面导致变形的方法 先看看问题： 1.原来是这样的： 2.在苹果手机里面是正常的： 3.到了安卓就是这样： 4.原因就是在安卓中被软键盘顶上来了，而苹果的软键盘是覆盖的（分层） 5.后来用的解决方法是，把当前页面的body固定好，即在当然页面加上这段js：$('body').height($('body')[0].clientHeight);6.原创 2017-10-12 14:25:07 · 25758 阅读 · 3 评论 -
css3鼠标点击出现波浪动态效果案例现场
(function() { let x, y; let index = 0; let screenSizeWidth = (′body′).width();letscreenSizeHeight=(′body′).width();letscre...原创 2018-09-13 10:51:50 · 4185 阅读 · 6 评论 -
多个贝塞尔曲线在同一个animate动画中的实践
贝塞尔曲线(Bézier curve)：又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。贝塞尔曲线是计算机图形学中相当重要的参数曲线，在一些比较成熟的位图软件中也有贝塞尔曲线工具，如PhotoShop等。在Flash4中还没...原创 2018-09-19 10:59:49 · 1536 阅读 · 0 评论 -
移动端h5页面弹窗出来后，禁止底层的背景页滚动
先看图： 再需求和解决方法： 1.需求：在一个可上下滑动的h5-index.html中，弹出一个固定于设备高度的奖励层。当奖励层弹出来之后：1.index页面不能出现滚动条，2.index不能自动置顶，要停留在触发事件的位置。 2.解决方法： a.初始的css设置：html,body { width: 100%; height:100%; o...原创 2018-02-08 11:38:54 · 7599 阅读 · 1 评论 -
解决微信浏览器video全屏的问题及黑边问题
这是苹果和安卓在微信上的效果图： <video src="./mp4/v1.mp4" x5-video-player-type="h5" id="player" height="100%" width="100%" webkit-playsinline playsinline x5-playsinline x5-video-player-fullscreen="true&q原创 2018-02-12 17:25:01 · 22961 阅读 · 2 评论 -
h5按钮css3动态特效,让页面静不下来
h5按钮css3动态特效,让页面静不下来 在写一些h5页面的时候，难免会需要增加一些动态的效果。今天我来介绍一种，在按钮上添加动态效果的做法。保证让你瞒住，嘻嘻。 先看看效果图： 由于是动态而且颜色不是很明显，所以可能一下子看不出来，但它确实存在。现在我们通过代码来看看它的存在吧。<img src="images/btn_play.png" id='btn-play'/><div id=原创 2017-09-25 14:27:48 · 22212 阅读 · 0 评论 -
h5头像图片旋转css3精确控制每个图片的位置
h5头像图片旋转css3精确控制每个图片的位置： 1.下面是需要的效果图： 2.用到的图片有： <div id="box1Kuang1"> <div class="con-show01 mar-top1 mar-left1"> <div class="con-show02"> <div class="con-show03">原创 2017-09-27 10:01:07 · 3787 阅读 · 0 评论 -
html css3不拉伸图片显示效果,类似淘宝的
1.利用transform属性不拉伸显示图片,(路径问题需要按需求修改）； html:<div id="surface-div1"><img :src="pic1" class="surface-img"></div>CSS:#surface-div1{ position: relative; width: 372px; height: 175px; float原创 2017-09-12 17:16:07 · 41007 阅读 · 0 评论 -
h5让图片转圈的动效，让页面动起来
h5让图片转圈的动效，让页面动起来 1.先瞧瞧效果： 2.代码是这样的：<img src="images/circle.png" alt="" id="circle"/>@mixin ani-btnRotate{ @keyframes btnRotate{ from{transform: rotateZ(0);} to{tra原创 2017-10-12 15:19:41 · 72259 阅读 · 2 评论 -
html5星星评分组件，sass双循环写法
h5星星评分组件，sass双循环写法 1.效果图： 2.html<span class="star-span-4"> <i></i> <i></i> <i></i> <i></i> <i></i></span>3.功能需求：star-span-4,中的4可以变成0-5的任意一个数字，红色的星星的对应数量要等于star-span-n中的n。 4.sa原创 2017-10-25 09:57:45 · 16824 阅读 · 1 评论 -
h5、select下拉框右边加图标，深度美化页面增进用户体验
h5、select下拉框右边加图标 1.那么我们先来看一下效果吧！ 2.再看看h5的结构：<div id="login-div"> <div class="select-wrapper"> <select id="selector1"> <option value=""原创 2017-10-16 10:20:19 · 12079 阅读 · 0 评论 -
h5绚丽的边框-border渐变和字体颜色渐变
1.先看效果图： 2.代码上部分注稀：<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"></head><body><style>body{原创 2017-12-01 10:10:33 · 18754 阅读 · 0 评论 -
web前端面试水平垂直居中详解
1.行内元素的水平垂直居中；通过在父元素中设置text-align，让子元素的文本进行居中；然后通过line-height属性让子元素的行高等于父元素的高度。<div id="div1"> <label id='divSpan'>行内元素水平垂直居中</label></div> #div1{ background: #ccc; height: 200原创 2017-06-26 12:31:25 · 6666 阅读 · 0 评论 -
移动端h5不支持font-family里面的微软雅黑等等字体
首先我们来理解一下pc端为什么可以看到网站上设置的微软雅黑字体：微软在2006年12月发布微软雅黑随简体中文版Windows Vista一起发布，是Windows Vista默认字体。意思就是window7以上的微软系统都有默认的微软雅黑字体，都可以看到网站上设置的微软雅黑字体。（电脑上没有装网站上设置对应的字体，就看不到该字体的效果） 对于其他的一些基本字体也差不多是这样的原理。 另外一点原创 2017-12-26 18:00:30 · 38497 阅读 · 3 评论 -
grunt中的autoprefixer，自动一键补充css3兼容前缀
先检查一下你的grunt版本。 没有的话就要装（请自行百度安装，本文主要讲配置文件和运用）。 安装autoprefixernpm install grunt-autoprefixer --save-dev这是我安装成功的文件目录： newcss和oldcss这里个文件夹是我手动建的，方便以后放新旧css文件。 先看看gruntfile.js这文件的配置（比较重要）：module.ex原创 2017-12-20 17:34:08 · 11757 阅读 · 0 评论 -
7款漂亮的纯css字体样式
简单粗暴，直接上马：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1 class="vintage1">美丽的中国语</h1> <h1 class="vintage2">美丽的中国语</h原创 2018-01-03 15:58:46 · 84522 阅读 · 10 评论 -
animation控制图片从左飞入、右飞入、顶飞入等动态
先看从左边和右边飞入的效果： 图片的html代码是：div class="travelType"> class="page5-tu1" src="./images/p5_tu1.png" name="travel1"/> class="page5-tu2" src="./images/p5_tu2.png" name原创 2018-01-24 15:18:43 · 19081 阅读 · 1 评论 -
移动web开发之像素和DPR详解
前话： 像素在web开发中几乎天天用到，但到底什么是像素，移动端和桌面端的像素有区别吗，缩放对像素有影响吗，视网膜屏幕和像素有什么关系？关于这些问题，可能就不清楚了。本文将介绍关于像素的相关知识 什么是像素： 像素，又称画素，是图像显示的基本单位，译自英文“pixel”，pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel，故“像素”...原创 2018-02-09 10:17:50 · 42696 阅读 · 0 评论