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

Absolute

Absolute代表绝对的、究竟的、最终的、无条件的、不可再分割的一种

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 飘雪的日子

css3 飘雪的日子 前端入坑纪 54 用bing搜索的时候,看到它的雪花效果,那就地仿照一个咯~ 好,详解如下! OK,first things first! github项目地址 圣诞临近啦 HTML 结构 这么多class为snow的div,都是为了设置雪花背景和动画用的 CSS 结构 body{ background-color:black;snowWrp{ position: fixed; height: 100%;snow1 { animation-delay:10s;snow2 { animation-delay:20s; } @keyframes falling{ 0%{ top:-100%;

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:

自定义分享蒙版效果

自定义分享蒙版效果 先上个效果: 分享. } // 显示蒙版 showMaskView = ()= { this.setState({isShow: true}, ()= { // Animated.parallel: 平行的; 按钮同时执行动画; const ChannelContainer = ({positionBottom, maskOpacity, coverPositionLeft, onCloseMask, shareItemOnPress})= { return ( // 蒙版动画视图 {/*添加点击蒙版事件*/} {/*分享视图的动画视图*/} {kShareTypes.map((title, index)= { return( shareItemOnPress(title)} {title} );

IE浏览器下透明背景元素hover无效

IE浏览器下透明背景元素hover无效 本文来源于 捷搜索 问题: IE下透明背景元素,鼠标移到文字上才会触发hover,当移到文字旁边的背景上不会触发hover,如下案例(代码+效果图): 1536128629714760.png ul{ position: absolute; z-index: 999999; } ul li a{ display: block; line-height: 60px; width: 100px; color: white; border-bottom: 3px solid #ffda00;

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

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

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

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

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

react native 自定义Image实现预加载图片及错误之后图片显示

react native 自定义Image实现预加载图片及错误之后图片显示 使用自定义Image直接移步到文章结尾查看使用 需要添加的第三方库,prop-types,添加如下 npm install --save prop-types 我们知道react native 里面的Image组件,预加载图片只实现了ios,android没有。加载错误的图片也没有。不能满足我们的基本需求。那么要才能满足双平台呢。 图片. let source={uri}; if (this.state.type === 1) { source = errImage;

CSS calc() 函数

CSS calc() 函数 css样式 #div1 { position: absolute; left: 50px; width: calc(100% - 100px); min-height:calc(100vh-200px);

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

react native 自定义导航栏随滚动渐变

react native 自定义导航栏随滚动渐变 效果图1 未滚动页面 image.png 效果图2 滚动页面 image.png 使用方式 import React, { Component } from 'react' import NavPage from './NavPage' import { View, ScrollView, Image, Dimensions, Platform } from 'react-native' let { width } = Dimensions.get('window') let navHeight = (Platform.OS === 'ios' ?

CSS 基础(盒模型、选择器、权重、优先级等)

CSS 基础(盒模型、选择器、权重、优先级等) 层叠样式表(Cascading Style Sheets) 盒模型 选择器 权重与优先级 继承 盒模型 盒模型包含四部分:margin、border、padding、content。如果不使用doctype声明,浏览器默认使用自己的模式解析。如IE使用IE盒模型,firefo则使用标准盒子模型等。 标准盒子模型 标准盒子模型. height: 100%;box { margin: auto;} } 只是局部可使用.clearfix{_zoom:1;overflow: hidden;

七夕心形图案漂浮

七夕心形图案漂浮 这不今天七夕嘛,虽然我没有女朋友,但是作为程序员我可以new一个啊 哈哈哈 这次实现的是鼠标点击处心形漂浮的炫酷效果,这个效果是通过juqery实现的,头部通过引入封装好的jquery。 下面直接附上代码 测试 *{ margin: 0px;//获取鼠标点击的位置坐标 $i.css({ "z-index": 9999, "top": y - 20, "left": x, "position": "absolute", "color": 'red', "font-size": 14, });

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;

React-Native中通用组件(对话框、Loading)

options key default value desc contentTextStyle null 弹框content的文本样式 当 buttons.length 2 时,弹窗中的按钮按纵向排列 RRCLoading 引用 import { RRCLoading } from 'react-native-overlayer'; RRCLoading.show(); RRCLoading.hide(); options key default value desc loadingImage null 图片(gif) text 加载中.. } AppRegistry.registerComponent = function (appKey, componentProvider) { class RootElement extends Component { render() { let Component = componentProvider();

粒子上升渐变特效学习

粒子上升渐变特效学习 之前在某个网站发现有个粒子缓缓上升的特效,最近想用的时候发现找不到了找不到了找不到了。求助群里的大佬们,在大佬推荐的网站上找到了一样的特效。于是把特效顺带学习了波。 特效demo如下: image 这里只取了Bubbles的特效。学习过程记录在代码注释中 css代码如下 . } /*css keyframes 动画*/ @keyframes bubbles { 0% { opacity: 0; transform: translate(0, -8000%);

【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 弹性盒布局