人生与戏

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

随笔分类 -  前端每日实战(学习、扩展)

摘要:代码: var texts=''; for(var i=1; i<10; i++){ for(var j=1; j<=i; j++){ texts+=j+'*'+i+'='+j*i+'\t'; } texts+='\n'; } console.log(texts) 效果图: 阅读全文
posted @ 2021-03-05 16:21 人生与戏 阅读(542) 评论(0) 推荐(0)

摘要:1. 效果图: 效果地址:https://codepen.io/flyingliao/pen/JgavjX 原理:m是伪元素::before弄出来的,::after遮挡中间下方一小块。 感想:学到一个复制,嘿嘿嘿嘿嘿,filter:drop-shadow(位置上、下、左、右、 颜色)。 HTML c 阅读全文
posted @ 2019-08-09 23:31 人生与戏 阅读(409) 评论(0) 推荐(0)

摘要:效果地址:https://scrimba.com/c/cN3P6nfr 原理:两个椭圆,颜色部分为边框,下一半被伪元素覆盖。 感想:看了一眼大神的,代码比我的还少,得研究研究去。 HTML code: CSS code: 阅读全文
posted @ 2019-06-23 23:43 人生与戏 阅读(371) 评论(0) 推荐(0)

摘要:原文地址:https://segmentfault.com/a/1190000015632759 学习后效果地址:https://scrimba.com/c/cPgWmZCg HTML code: CSS code: 阅读全文
posted @ 2019-06-19 23:08 人生与戏 阅读(333) 评论(0) 推荐(0)

摘要:原文地址:https://segmentfault.com/a/1190000015607676 学习后效果地址:https://scrimba.com/c/c8PQ3PTB 感想:利用css的制图、css的过渡transition等 HTML code: CSS code: 阅读全文
posted @ 2019-06-02 09:31 人生与戏 阅读(216) 评论(0) 推荐(0)

摘要:原文地址:https://segmentfault.com/a/1190000015580809 学习后效果地址:https://scrimba.com/c/c8PQ3PTB 感想:CSS 真强大! HTML code: CSS code: 阅读全文
posted @ 2019-04-21 12:43 人生与戏 阅读(324) 评论(0) 推荐(0)

摘要:原文地址:https://segmentfault.com/a/1190000015568609 HTML code: CSS code: 阅读全文
posted @ 2019-04-17 18:16 人生与戏 阅读(160) 评论(0) 推荐(0)

摘要:原文地址:https://segmentfault.com/a/1190000015566332 学习效果地址:https://scrimba.com/c/cz6EzdSd 感想:过渡效果,圆角,定位。 HTML code: CSS code: 阅读全文
posted @ 2019-04-13 11:57 人生与戏 阅读(186) 评论(0) 推荐(0)

摘要:原文地址:https://segmentfault.com/a/1190000015560736 感想:过渡效果+xyz中一轴。 HTML code: CSS code: 阅读全文
posted @ 2019-04-13 00:08 人生与戏 阅读(174) 评论(0) 推荐(0)

摘要:原文地址:https://segmentfault.com/a/1190000015534639#articleHeader0 感想:rotateX() 和rotateZ()一起使用好懵呀。 HTML code: CSS code: 阅读全文
posted @ 2019-04-11 10:44 人生与戏 阅读(241) 评论(0) 推荐(0)

摘要:原文地址:https://segmentfault.com/a/1190000015484852 感想:monster中边框角、上下动画、旋转动画、左右动画,眼睛中transform:scaleY(n); HTML code: CSS code: 阅读全文
posted @ 2019-04-10 10:33 人生与戏 阅读(155) 评论(0) 推荐(0)

摘要:原文地址:https://segmentfault.com/a/1190000015470411#articleHeader0 HTML code: CSS code: 阅读全文
posted @ 2019-04-09 10:31 人生与戏 阅读(165) 评论(0) 推荐(0)

摘要:原文地址:https://segmentfault.com/a/1190000015456554 感想:复习下 transform-origin: 位置; HTML code: CSS code: 阅读全文
posted @ 2019-04-08 10:22 人生与戏 阅读(751) 评论(0) 推荐(0)

摘要:效果地址:https://scrimba.com/c/cQpyKbUp 效果图: HTML code: CSS code: 阅读全文
posted @ 2019-04-07 12:58 人生与戏 阅读(198) 评论(0) 推荐(0)

摘要:原文地址:https://segmentfault.com/a/1190000015444368 感想:CSS又一次让我见识到它的强大之处 --》 box-shadow 。 box-shadow拓展地址:https://scrimba.com/c/cQpyKbUp HTML code: CSS co 阅读全文
posted @ 2019-04-07 12:24 人生与戏 阅读(272) 评论(0) 推荐(0)

摘要:效果地址:https://scrimba.com/c/cqKv4VCR HTML code: CSS code: 阅读全文
posted @ 2019-04-06 11:59 人生与戏 阅读(214) 评论(0) 推荐(0)

摘要:原文地址:https://segmentfault.com/a/1190000015424389 修改后地址:https://scrimba.com/c/cqKv4VCR HTML code: CSS code: 阅读全文
posted @ 2019-04-06 11:54 人生与戏 阅读(144) 评论(0) 推荐(0)

摘要:原文地址:https://segmentfault.com/a/1190000015389338 HTML code: CSS code: 阅读全文
posted @ 2019-04-04 10:57 人生与戏 阅读(149) 评论(0) 推荐(0)

摘要:原文地址:https://segmentfault.com/a/1190000015376202 感想: 好像不像呀,啊啊啊。伪元素、定位、动画、width和height包括内边距|边框|内容区。 HTML code: CSS code: 阅读全文
posted @ 2019-04-02 10:25 人生与戏 阅读(210) 评论(0) 推荐(0)

摘要:原文地址:https://segmentfault.com/a/1190000015369542 感想:y轴旋转,相对定位,今天有点懵呀,唉。 HTML code: CSS code: 阅读全文
posted @ 2019-04-01 09:33 人生与戏 阅读(312) 评论(0) 推荐(0)