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

Left

英语单词,leave的过去式和过去分词。adj. 左边的;左派的;剩下的adv. 在左面n. 左边;左派;激进分子

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

数据库学习笔记——13 创建高级联结

left_outer_join.jpg 与内联结关联两个表中的行不同的是,外联结还包括没有关联行的行。 在使用OUTER JOIN语法时,必须使用RIGHT或LEFT关键字指定包括其所有行的表(RIGHT指出的是OUTER JOIN右边的表,而LEFT指出的是OUTER JOIN左边的表)。 SELECT customers.cust_id,orders.order_num FROM customers RIGHT OUTER JOIN orders ON customers.cust_id = orders.cust_id ;

又一个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;

给我一首诗的时间

给我一首诗的时间 前端入坑纪 59 今天来分享最简单版打字机效果 好,详解如下! OK,first things first! 点我查看实际效果 诗仙,你好 HTML 结构 通过canvas里面来模拟打字的效果,所以一个canvas容器是必须的 CSS 结构 html,body { margin: 0; font-size: 0; j = 0 } }else{ clearInterval(tik) } }, 170);

移动端原生H5开发心得和干货(持续更新2018-08-10)

} 6. 修改表单元素的默认样式 input, button, select, textarea { border: none;hide-text-n { overflow: hidden; flex-direction: column } .dialog-content { background-color: #fff } fixed + flexbox布局,一般用于对话框 20. 左边固定宽度,右边自适应 html css .left { width: 50rem;on('click', '.div,在Iphone上都无法触发该事件,但是Android、PC却可以,上网找了一下资料,解决办法有两种: 给.btn加个css属性cursor: pointer;

《CSS3实战》--渐变设计

` `margin: 20px; 演示效果: **小结: ** size参数包含多个关键字,closest-side,closest-corner,farthest-side,farthest-corner,contain 和 cover。使用这些关键字可以定义径向渐变的大小。 另外,Gecko引擎还定义了-moz-repeating-linear-gradient 和-moz-repeating-radial-gradient 两个属性,用来定义重复直线渐变和重复径向渐变。 background: -moz-repeating-radial-gradient(circle, black, black 10px, white 10px, white 20px);

h5页面适配iPhone X的方法

h5页面适配iPhone X的方法 项目接近尾声,测试时突然想起还有iphoneX需要适配,虽然页面都是自适应,但是由于iPhone X的特殊性,还是需要特殊对待。因为这个h5项目嵌入在原生项目中,适配就会有有种方式:1. //为底下圆弧的高度 34px } 2.媒体查询 @media screen and (device-width:375px) and (device-height:812px){ //在这里做iPhone X的判断 // #app { //margin-top: 88px;

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:

多标签(组)运算

输出: expression: 3*(2+1) Array ( [0] = 3 [1] = 2 [2] = 1 [3] = + [4] = * ) 解析标签表达式 基础的表达式解析实现了,针对我们的标签表达式(多个字符组成一个标签),以及去掉「/」,加上「!」的逻辑,稍作修改: function expressionToSuffixExpressionArray($expression) { $charArray = array_reverse(str_split($expression)); } //测试代码 //$tree 是上一步的tree $userTags1 = ['tag1', 'tag2', 'identity_1', 'guangzhou', 'shop_setup_user'];

element 源码学习六 —— Carousel 走马灯学习

== "card" oldIndex ! } element.style { transform: translateX(-39.44px) scale(0.83) } 总结下: 显示三张卡片。 三张卡片高度跟随容器,宽度为容器的 50%。 左右两张卡片缩放了 83% 大小。 左右两张卡片 z-index 为 1;中间卡片 z-index 为 2。 4. 按钮出现和消失的效果如何实现? 使用了 vue 的 transition 标签来实现。具体效果为: .carousel-arrow-left-leave-active { transform: translateY(-50%) translateX(-10px);

记录一下我的小程序公共样式

记录一下我的小程序公共样式 基于 mpvue 如果需要原生,px转为rpx,可以自己转换 App.vue 样式 /* 全局样式*/ page { background-color: #fff; height: 1px;button { position: relative;ml10 { margin-left: 10px;mb15 { margin-bottom: 15px;bk { word-wrap: break-word;vh { visibility: hidden; content: ""; white-space: nowrap;middle { display: inline-block; transition: all 250ms; cursor: default; pointer-events: none; flex-wrap: wrap; flex-direction: column;

Scss进阶篇1

} @else { @debug "$boolean is #{$boolean}"; } @while循环 @while 指令也需要 SassScript 表达式(像其他指令一样),并且会生成不同的样式块,直到表达式值为 false 时停止循环。这个和 @for 指令很相似,只要 @while 后面的条件为 true 就会执行。 这里有一个 @while 指令的简单用例: //SCSS $types: 4;//$list 就是一个列表 @mixin author-images { @each $author in $list { .test1 { content: quote('Hello Sass!test { text: AAAAA;

手风琴效果 transition使用

手风琴效果 transition使用 手风琴效果 *{ margin: 0; } ul{ list-style: none; width: 960px; height: 300px; border: 1px solid seagreen; margin: 90px auto; overflow: hidden; } ul li{ float: left; width: 160px; /*添加动画效果*/ transition: all 0.3s; } /*所有的li都变小*/ ul:hover li{ width: 60px; } /*当前的li变大*/ ul li:hover{ width: 600px;动画前.png 动画后.png

监听 scroll 使元素产生吸顶效果

监听 scroll 使元素产生吸顶效果 一、判断滚动像素值 1.1 window.scrollY(别名:pageYOffset) 返回文档 top: 50px; 目前这个属性兼容性不是很好,暂不建议在生产环境中使用(2018年09月12日16:54:54)。 参考 position - CSS:层叠样式表 | MDN CSS中position属性介绍(新增sticky)

jQuery实现点击图标div循环放大缩小功能

jQuery实现点击图标div循环放大缩小功能 很基础的一个功能,点击左下角的图标按钮,地图的整个div会变大,变大预览之后,再次点击图标按钮,地图的整个div会变小,恢复原样,两个图标在地图界面的放大和缩小时间不断的切换图标状态(箭头向里面,或者箭头向外面) 图片.#scale { background: #FFFFFF url('. width: 26px; } #updmap { border: 1px solid #1E90FF;css({ "width": "400px", "height": "200px", });

支付宝小程序地图层级和控件问题

支付宝小程序地图层级和控件问题 最近在写支付宝小程序的时候,想要在地图上面添加几个按钮,但是发现支付宝小程序不能像微信小程序那样有专用的控件标签,只能通过在 标签内添加 controls="{{controls}}"属性来实现这个功能。具体实现方法如下: 添加控件 官方文档 }, call() { my.makePhoneCall({ number: '400-6701818' }); case 2: this.call(); case 3: this.scanCode();

css 实现水平居中的方法总结

} 块级元素的特点:可设置元素的宽度,在不设置宽度时, 元素的宽度会自动填满其父元素宽度,并独占一行 1.1 margin: auto 居中元素设置宽度,并且设置 margin: auto 可实现水平居中 . /*兼容代码*/ } 问题: 需要解决 display: inline-block 在IE 下的兼容性问题 3. 利用定位实现水平居中(已知宽度) 相对定位: 相对定位就是将元素偏离元素的默认位置,但是并没有脱离文档 left: 50%;

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

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

css动画骚操作:写饼图

css动画骚操作:写饼图 前言 基本思路 1. 创建一个A/B两色各占一半的圆形 2. 用一个底色为A,相同半径的半圆遮盖颜色为B的那一半 3. 让半圆随着圆的圆心旋转 demo 第一步:创建两色的圆形 css线性渐变liner-gradient可以创建多种颜色的元素,是一个非常好用的属性。 liner-gradient语法 = linear-gradient([ [ | to ] ,]? border-bottom-left-radius: 0px 50%; } @keyframes spin{ to {transform: rotate(.

【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;