大师网-带你快速走向大师之路 解决你在学习过程中的疑惑，带你快速进入大师之门。节省时间，提升效率

首页 > relative

Relative（position的一个属性）

Relative是position的一个属性，指相对定位。

css实现边框动画

css实现边框动画 1、css实现边框动画 效果如图： body,div{ margin: 0; padding: 0; box-sizing: border-box; } .box{ width: 300px; height: 200px; padding: 20px; margin: 50px auto; color: #fff; background-color: #f60; } .border-box{ position: relative; width: 100%; height: 100%; padding: 20px; } .border-box::before

又一个css3 loading 打转的圆

又一个css3 loading 打转的圆 前端入坑纪 52 上回写过一篇《一直打转的圆圈》的css3 loading 效果，用的是障眼法. 今天来分享真正的环形圆圈来做, 其实是border啦,哈哈 好，详解如下！ OK，first things first！ github项目地址 你就是个圆 HTML 结构 就是只用一个div, 任性不, O(∩_∩)O哈哈~ CSS 结构 body{ background-color: aliceblue;circle{ border: 8px solid rgba(218, 141, 218, 0.5); width: 100%; left: -8px;

CSS画心形、蛋形、菱形、八卦、三角、圆形、对话框、平行四边形

CSS画心形、蛋形、菱形、八卦、三角、圆形、对话框、平行四边形 各图形的html代码均为 ，替换class名称即可 圆形 .circle { width: 100px; height: 100px; border: 1px solid #ccc; border-radius: 50%; background: coral; } 蛋形 .egg { width: 126px; height: 180px; background-color: #eee; box-shadow: 0px 2px 5px #ccc; display: block; border-radius: 50% 50% 50% 50%/60% 60% 40% 40%; } 心形 .heart { width: 100px; height: 90px; position: relative; } .heart:

2018-09-04画太极

2018-09-04画太极 第一种方法：笨方法 不停画圆即可实现。 HTML部分 JS Bin Css部分 body{ background-color: #444; } #YinYang{ width:200px; height: 200px; border: 1px solid black; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(0,0,0,1) 51%, rgba(0,0,0

给网页的input输入框添加炫酷打字特效

// 火花各种颜色 POWERMODE.shake = false; // 关闭打字屏幕颤抖效果 document.body.addEventListener('input', POWERMODE);食用注意事项： 注意js引入路径是否正确 只要有js的input事件都会触发(试过改成click，只有鼠标点击的时候会触发) 浏览器打开效果： image 是不是很简单，这篇教程就到这里啦。 关注公众号回复demo004获取资源23333 image

【CSS】带边框的三角形

【CSS】带边框的三角形 34840-106.jpg image.png 思路是将2个三角形叠加起来，外层的三角形稍微大一些。 思路和《【CSS】内圆角》这个笔记的 “方法一” 类似。http://www.jianshu.com/p/6e61856cf143 这个笔记最后会补充《【CSS】画三角形》这个笔记里记漏的一点。http://www.jianshu.com/p/2c04549a8aae HTML代码： CSS代码： . left: -90px; 对应：上下 左右 如果只设置三个值，如：border-width: 1px 2px 3px;

【CSS】平行四边形

【CSS】平行四边形 微信订阅号：rabbit_svip 先上效果图 image.png 平行四边形可以用做导航栏部分。 原理：利用transform属性拉伸矩形。 CSS代码 transform: skewX(-45deg);）。 此时，用伪元素生成的方块是重叠在内容之上的，一旦给它设置背景，就会遮住内容。所以要为伪元素设置 z-index: -1 。这样它的堆叠层次就会被推到宿主元素之后。 HTML与CSS 目录：HTML与CSS 下一篇：【CSS】八边形

Retina屏的移动设备实现真正1px的线的解决方案

width: 100%; transform: scaleY(0.5); margin-bottom: 20px; border: 1px solid #000; width: 200%; -webkit-transform: scale(0.5); transform-origin: left top; } 第二种有点小缺陷是 用不了，第二种使用会比较简单方便， 第一种使用起来比较会比较费劲。所以用第二种做了一个简单Demo。 效果： 1px.png 是不是瞬间看起来感觉棒棒哒！ 真正手机看效果更好！ 参考链接：http://jinlong.github.io/2015/05/24/css-retina-hairlines/

2018-06-02 CSS堆叠上下文

2018-06-02 CSS堆叠上下文 前言：设置了z-index:9999; border: 10px solid rgba(255,0,0, 1); margin: 12px; background: #000; } 正常情况下，绿色的a1的z-index比蓝色的b1高，所以a1能盖住b1 出现了层叠上下文后，即使a1的z-index:9999;

HTML蒙版--带过渡效果

HTML蒙版--带过渡效果 HTML: How is it going? 2018 CSS: .container { width: 555px; height: 200px; position: relative;mask { /*使mask层级高于content*/ z-index: 2; background-color: #E8921F; -webkit-transition: opacity . width: 100%; top: 50%; font-size: 40px; text-align: center; /*使content文字部分层级低于mask*/ z-index: 1;mask span { color: white; font-size: 48px;

【CSS】波纹效果

} @keyframes pulse { 0% { transform: translate(-50%, -50%) scale(1); margin: 10px auto 0; background-image: linear-gradient( 135deg, #52E5E7 10%, #130CB7 100%); letter-spacing: 4px; } @keyframes： 定义动画用的。后面跟着动画名，大括号里设置要改变的属性。 animation： 会用动画。后面跟着动画名。 animation里面的 infinite 说明重复执行动画。 opacity： 设置不透明度。 animation-delay： 延迟执行。 display: flex 弹性盒布局

鼠标经过时边框样式左上角右上角动画

鼠标经过时边框样式左上角右上角动画 html: css: .industry . width: 270px; z-index: 99; top: 0px;stry-bottom { position: absolute; right: 0px;stry-left { height: 0;industryList li").mouseenter(function () { $(this).animate({ "width": "100%", }, 500).css("background", "#ff0000");children("div:odd").mouseleave(function () { $(this).

CSS学习笔记一——盒子模型，定位，z-index

CSS学习笔记一——盒子模型，定位，z-index 盒子模型 结构：content + padding + border + margin 基本分类 标准盒子 width / height = content（即width 和height只等于内容的宽高） 标准盒子模型.jpeg IE盒子 width / height = content + padding + border （即width 和height包括了content + padding + border） ie盒子模型. 　　box-sizing: border-box; /* 阈值 */ } 但是兼容性非常不乐观 position: -webkit-sticky;

纯CSS实现朋友圈评论按钮

纯CSS实现朋友圈评论按钮 如果使用前端技术来实现微信朋友圈页面的话，其中朋友圈的评论按钮相信很多人会选择使用切图来实现，但使用纯CSS实现也不难。 使用纯CSS实现，则需要使用伪类、定位以及CSS3中的一些新属性。 首先，先构建评论按钮的HTML布局： 然后便是CSS样式，首先我们设置包裹span标签的容器的属性，假设它是一个100×100的盒子，其样式如下： . margin: 0 auto;

css圣杯布局和双飞翼布局

css圣杯布局和双飞翼布局 双飞翼布局和圣杯布局其实是一样的，只不过在写法上有些不同，其布局都是左右固定宽度，中间宽度自适应。 圣杯布局 html结构 center left right css 先写出大概的样式 .article{ height: 300px;left{ width: 200px; height: 100px; background: blue; float: left; } 现在的布局是这样的 image.png 在.left中添加 margin-left: -100%; position: relative; overflow: hidden; margin-bottom: -9999px;

HTML中的居中方法

HTML中的居中方法 之前我们就总结过很多剧中的方法，但是时间长不用，就会慢慢遗忘，所以我们从头来复习一次，变想边敲代码.. 文本居中 height + line-height：两者配合使用，垂直方向居中 text-align：父级的text-align，水平方向居中注意：text-align：center ；只是将子元素里的内联元素居中 如果不是内联元素就要用到 margin： 0 auto； 写个简单的代码来理解 . top: 50%;wrap{ display: flex;

微信小程序仿微信运动步数排行-交互

png wxml: {{item.name}} {{item.steps}} wxss： /* pages/leftSwiperDel/index.wxss */ view{ box-sizing: border-box;inner.del{ background-color: #e64340;text-align: center; height: 64rpx; margin-right: 16rpx;item-data{ float: right;rankpace{ color: #fa7e04; //加载数据 wx.request({ url: "https://pig.intmote.com/bison_xc/wx/sort.do", method: 'GET', header: { 'Content-type': 'application/json' }, success: function (res) { console.log(res.data) that.setData({ list: res.data });

filter导致列表加载时会发生抖动的BUG

filter导致列表加载时会发生抖动的BUG BUG现象 当列表加载时,整个列表结构会发生抖动问题。 BUG原因 当列表加载时，会给列表的内容加上一个遮罩层。 表现在代码上就是会给列表内容所在div加上一个.ant-spin-blur{ overflow: hidden; opacity: 0.7; filter: blur(0.5px); -webkit-transform: translateZ(0);ant-spin-container{ transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); position: relative;

Oozie 报错的解决方法

The wildcard '*' configuration is used when there is no exact match for an authority. The HADOOP_CONF_DIR contains the relevant Hadoop *-site.xml files. If the path is relative is looked within the Oozie configuration directory; though the path can be absolute (i.e. to point to Hadoop client conf/ directories in the local filesystem.