半夏微澜ぺ - 博客园

2019年4月3日

摘要： function unique1(arr) { reuturn new Set(arr); } function unique2(arr){ arr.filter(function(ele,inex,arr){return arr.indexOf(ele)==index}) } 阅读全文

posted @ 2019-04-03 16:25 半夏微澜ぺ阅读(138) 评论(0) 推荐(0)

2019年4月2日

translate 实现元素垂直居中

摘要： css 原理：定位span元素，left：50%； top：50%；元素的参考点在元素的左上角，实现完全居中，需要再向上向左移动元素高度宽度的一半，使用transform:translate(-50%, -50%)实现；阅读全文

posted @ 2019-04-02 16:42 半夏微澜ぺ阅读(424) 评论(0) 推荐(0)

2019年4月1日

border-radius实现圆弧阴影效果

摘要： 1 原理利用border-radius实现一个圆弧边的矩形，并添加box-shadow，然后放在目标元素的下方 demo: html css 元素的before after伪元素重贴在一起，加深阴影效果，border-radius:100px/10px;表示水平半径是100px，垂直半径是10px 阅读全文

posted @ 2019-04-01 16:28 半夏微澜ぺ阅读(1652) 评论(0) 推荐(0)

2019年3月29日

js css3实现钟表效果

摘要：原理：利用transform-origin改变旋转的圆心，实现秒数和分钟数的刻度线，利用transfrom translate实现钟表小时刻度的显示 html: 1 绘制圆盘 2 绘制秒数 css js：绘制的是60个刻度，每个刻度的角度是360/60*i 4 绘制分钟刻度，12个刻度线，原理同阅读全文

posted @ 2019-03-29 16:53 半夏微澜ぺ阅读(382) 评论(0) 推荐(0)

菜单展开效果

摘要： html 原理：子菜单定位到父元素圆的中心点，利用transform的translate来实现位移，子菜单的位置利用三角函数获取，父元素加上透明度opacity和缩放scale效果 css js 阅读全文

posted @ 2019-03-29 15:22 半夏微澜ぺ阅读(313) 评论(0) 推荐(0)

css3 实现运动动画圆与椭圆

摘要：圆： html css 椭圆运动：原理就是在圆运动的基础上给父元素添加一个y轴上的上下运动 css 钟摆运动：这个比较简单，就是把元素的运动参考点移动到顶部中心，就是设置 transform-origin:top center; demo: html css 阅读全文

posted @ 2019-03-29 15:19 半夏微澜ぺ阅读(2364) 评论(0) 推荐(0)

css3 翻起页脚

摘要： html <div class="demo2"> <img src="images/1.jpg"> </div> css .demo2{ width: 300px; height: 300px; position: relative; margin: 100px auto; } .demo2 img 阅读全文

posted @ 2019-03-29 11:25 半夏微澜ぺ阅读(309) 评论(0) 推荐(0)

css3 实现loading效果

摘要： 1 圆点渐入渐出要点：缩放和透明度的变化,循环变化 <div class="demo1"></div> 2 线条loading图要点：使用缩放实现线条的高度的变化，循环变化，使用animation-delay的负值实现动画的连续变化（负值：动画立即执行，从设置的值之后开始执行动画，比如是-1s 阅读全文

posted @ 2019-03-29 11:20 半夏微澜ぺ阅读(299) 评论(0) 推荐(0)

2019年3月28日

css3

摘要： css3动画的一个抖动效果库 css shake https://elrumordelaluz.github.io/csshake/ csss transform translate 位置变化效果 rotate 旋转效果 scale 放大缩小效果 skew 变形扭曲效果 matrix 矩阵 tran 阅读全文

posted @ 2019-03-28 16:24 半夏微澜ぺ阅读(111) 评论(0) 推荐(0)

2019年3月27日

jquery/原生js/css3 实现瀑布流以及下拉底部加载

摘要：思路： style: html: 瀑布流就是等宽不等高的元素进行排列;从第二行开始元素从第一行中高度的数组中获取高度最小的元素开始排列，然后把两个元素合并为一个元素，再次从数组中取出高度最小的值，依次类推 1 需要对所有的元素进行定位absolute； 2 定义子元素的宽度以及padding值，利用阅读全文

posted @ 2019-03-27 17:28 半夏微澜ぺ阅读(848) 评论(0) 推荐(0)