-
达萨法法师法师
查看全部 -
如何理解解耦的问题 如何理解解耦? 在订阅发布模式和直接调用处理函数时,我只看到了当被调用的处理函数B不存在时,触发者本身A的函数还能正常执行。而当被调用的处理函数B本身发生错误时,两种模式中A都会报错,导致代码停止。 订阅发布模式:function A(){处理某些事情;publish("消息",事件名);处理某些事情;}//假设事件名对应的处理函数Function B 直接调用:function A(){处理某些事情;B(“消息”);处理某些事情;}查看全部
-
绘制形状 在svg中绘制多边形的标签是polygon,这是SVG中定义的基本形状,可以通过polygon的points绘制出多边形组成的坐标点,points 属性定义多边形每个角的 x 和 y 坐标。多边形至少要有3个边,所以points至少要定义3组坐标才能创建一个三角图形。可以观察下points中是由6组坐标绘制的一个五角星图(当然我是用工具生成的坐标) 填充颜色 默认svg会用是黑色填充颜色,所以我们需要设置新的颜色。一般可以通过fill填充颜色。同时svg也是dom节点也可以通过style直接用样式属性设计元素的样式。这里填充颜色用到了linearGradient元素。 线性渐变 使用linearGradient元素即可定义线性渐变,每一个渐变色成分使用stop元素定义 <linearGradient id="star" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#FCF0BC"></stop> <stop offset="0%" stop-color="#FCF0BC"></stop> </linearGradient> 1. 渐变色元素必须要放到defs元素中; 2. 需要给渐变色元素设置id值,否则的话,别的元素无法使用这个渐变色。 3. 渐变色的成员使用stop定义,它的属性也可以使用CSS定义;它支持class,id这种标准HTML都支持的属性。其它常用属性如下: offset属性:这个定义了该成员色的作用范围,该属性取值从0%到100%(或者是0到1);通常第一种颜色都是设置成0%,最后一种设置成100%。 stop-color属性:这个很简单,定义了该成员色的颜色。 stop-opacity属性:定义了成员色的透明度。 x1,y1,x2,y2属性:这两个点定义了渐变的方向,默认不写的话是水平渐变,上面例子中同时也创建了一个垂直渐变。 4. 渐变色的使用,如例子中所示,直接用url(#id)的形式赋值给fill或者stroke就可以了。查看全部
-
animation-fill-mode,定义动画播放时间之外的状态,顾名思义,要么就是在动画播放完了之后给它一个状态 animation-fill-mode : none | forwards | backwards |both; none,播放完之后不改变默认行为,默认值,forwards则是停在动画最后的的那个画面,backwards则是回调到动画最开始出现的画面,both则应用为动画结束或开始的状态。查看全部
-
123
查看全部 -
121312312
查看全部 -
111
查看全部 -
-要想实现3D的效果,只需指定一个元素为容器并设置transform-style:preserve-3d,那么它的后代元素便会有3D效果。
-可以呈现3d的属性有,translate3d、scale3d、rotateX、rotateY、rotateZ等等
-perspective(length) 为一个元素设置三维透视的距离。
查看全部 -
CSS3的Animation有八个属性
- animation-name :动画名
- animation-duration:时间
- animation-delay:延时
- animation-iteration-count:次数
- animation-direction:方向
- animation-play-state:控制
- animation-fill-mode:状态
- animation-timing-function:关键帧变化
查看全部 -
animation:bird-slow 400ms steps(3) infinite; @keyframes bird-slow { 0% {background-position-x: -0px} 100% {background-position-x: -273px} }
steps(3)的意思就是:keyframes设置的0%-100%的段中,background-position的的x坐标会变化3次
查看全部 -
rem和em单位一样,都是一个相对单位,不同的是em 是相对于元素的父元素的font-size进行计算,rem是相对 于根元素html的font-size进行计算,这样一来rem就绕开 了复杂的层级关系,实现了类似于em单位的功能。 默认情况下浏览器给的字体大小是16px,按照转化关系 16px = 1rem
查看全部 -
技术点分解:
rem布局
帧动画原理
营造3d视角
canvas绘图
svg绘图
设计模式与异步代码梳理
查看全部 -
总结:呈现3d效果需要3部分
父元素或者当前运动元素上设置透视角perspective,perspective属性的值决定了3D效果的强度
3D视图,设置在父元素上,子元素都可以相对与父元素的平面进行3d变形操作
3D变形函数,translate3d、scale3d、rotateX、rotateY、rotateZ等等
查看全部 -
让元素动起来:
运动 = 关键帧动画 + 坐标变化
2.坐标的变化一般来说前端能用到的手段
元素.position定位,修改top,left坐标修改
通过css3的transform属性的translate
无论用那种需要记住的是元素的坐标都是position+translate的值的总和
3.$(".bird").transition({
'right': "3rem",//指离右边的距离
}, 10000,'linear',function(){
alert("结束")
}); 这段代码是对你所设的对象进行过渡,不是对你的自适应帧动画的类进行过渡。查看全部 -
为解决必须通过绝对尺寸获取图片坐标,否则就会出错问题,一种是基于CSS3的scale处理直接可以让元素缩放,另一种就是通过background-size 让精灵图实现自适应缩放。
如何让单图填充一个元素呢? 这里我想到了一个办法,把整图整体缩放,就是整体缩放。3*3的矩阵,我横竖按照矩形的数量比缩放100%。按照矩形的排列整体缩放背景图:
background-size: 300% 300%;
keyframes这个方法要写到类的外面。
若background-size改了,就把background-position改到与size一致。
查看全部 -
一. CSS3的Animation有八个属性
animation-name :动画名
animation-duration:时间
animation-delay:延时
animation-iteration-count:次数
animation-direction:方向
animation-play-state:控制
animation-fill-mode:状态
animation-timing-function:关键帧变化 //控制时间的属性。
二. steps() 函数用来切换多个精灵图的,形成帧动画,类似setTimeout的处理感觉。
三. 注意浏览器的兼容性需要加前缀:
-moz-animation: bird-slow 400ms steps(1,start) infinite;
四. 如果实现3张图帧动画效果,代码如下
animation:bird-slow 400ms steps(3) infinite;
@keyframes bird-slow {
0% {background-position-x: -0px}
100% {background-position-x: -273px}
}注:要记得加前缀,所写的animation前缀是什么,该语句前缀就是什么。
查看全部 -
1.resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
'orientationchange' in window //手机浏览器是否支持orientationchange方法。
resizeEvt = 'orientationchange';//如果支持返回orientationchange。
resizeEvt = 'resize';//如果不支持返回resize。
//注:手机浏览器对于横屏竖屏切换事件原来都是resiz方法,后来随着技术的发展大部分手机浏览器加入了新的方法orientationchange
2.16px = 1rem
3. 设置根字体大小:20 * (docEl.clientWidth / 320) + 'px';
查看全部 -
1.
transform-style: preserve-3d;
查看全部 -
1、canvas的arc方法
//arc的语法如下:arc(圆心x,圆心y,半径,开始的角度,结束的角度,是否逆时针)。 context.arc(x, y, radius, startAngle, endAngle, anticlockwise)
2.arc画圆
var snowElement = document.getElementById("snowflake") var canvasContext = snowElement.getContext("2d"); //开始一个画布中的一条新路径(或者子路径的一个集合) canvasContext.beginPath(); //用来填充路径的当前的颜色,白色的雪球 canvasContext.fillStyle = "rgba(255, 255, 255, 0.8)"; //一个中心点和半径,为一个画布的当前子路径添加一条弧线 //坐标,圆,沿着圆指定弧的开始点和结束点的一个角度 //弧沿着圆周的逆时针方向(TRUE)还是顺时针方向(FALSE)遍历 canvasContext.arc(100,100,50,0,Math.PI*2,true); //关闭子路径 canvasContext.closePath(); //fill() 方法使用 fillStyle 属性所指定的颜色、渐变和模式来填充当前路径 canvasContext.fill();
查看全部 -
1.t添加close样式
element.addClass("close").one("animationend webkitAnimationEnd", function(event) { complete() })
查看全部 -
1、perspective
浏览器的支持
目前浏览器都不支持perspective
Chrome 和 Safari 支持替代的 -webkit-perspective 属性。
定义和用法
perspective 属性定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。
查看全部 -
1.绘制形状polygon
<svg viewBox="0 0 1000 800"> <polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713"></polygon> </svg>
2、填充颜色:fill或者通过style。
3、线性渐变:linearGradient
<defs> <linearGradient id="star" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#FCF0BC"></stop> <stop offset="0%" stop-color="#FCF0BC"></stop> </linearGradient> </defs>
渐变颜色必须放在defs元素中
需要给渐变色元素设置id值,否则别的元素无法使用这个渐变色
渐变色的成员使用stop定义,它的属性也可以使用CSS定义;它支持class,id这种标准HTML都支持的属性。其它常用属性如下:
offset属性:这个定义了该成员色的作用范围,该属性取值从0%到100%(或者是0到1);通常第一种颜色都是设置成0%,最后一种设置成100%。
stop-color属性:这个很简单,定义了该成员色的颜色。
stop-opacity属性:定义了成员色的透明度。
x1,y1,x2,y2属性:这两个点定义了渐变的方向,默认不写的话是水平渐变,上面例子中同时也创建了一个垂直渐变。渐变色的使用,如例子中所示,直接用url(#id)的形式赋值给fill或者stroke就可以了。
查看全部 -
1.h5的audio元素
var audio = new Audio(url); //创建一个音频对象并传入地址 audio.loop = loop || false; //是否循环 audio.play(); //开始播放
查看全部 -
1.transform的scale属性可以针对元素进行缩放
-webkit-transform: scale(2);//放大两倍 -moz-transform: scale(2);
2.默认是50% 50%可以单独设置
-webkit-transform-origin:71% 72%;
3.
.effect-out{ animation: effectOut 8s ease-in-out forwards; } @keyframes effectOut{ 0% { opacity:1; } 100% {transform: scale(20); opacity:0; } }
查看全部
举报