草庐IT

离谱的 CSS!从表盘刻度到艺术剪纸

某日,群里有这样一个问题,如何实现这样的表盘刻度:这其实是个挺有意思的问题,方法也有很多。单标签,使用conic-gradient实现表盘刻度最简单便捷的方式,就是利用角向渐变的方式conic-gradient,代码也非常简单,首先,我们实现一个重复角向渐变:div{width:300px;height:300px;border-radius:50%;background:repeating-conic-gradient(#0000,#000.8deg,transparent1deg,transparentcalc((360/60)*1deg));}其实比较难理解的是calc((360/60)

夯实基础上篇-图解 JavaScript 执行机制

前言讲基础不容易,本文希望通过9个demo和18张图,和大家一起学习或温故JavaScript执行机制,本文大纲:hoisting是什么一段JavaScript代码是怎样被执行的调用栈是什么文末有总结大图。如果对本文有什么疑问或发现什么错漏的地方,可在评论区留言~如果对你有帮助,希望三连~夯实基础系列:夯实基础上篇-图解JavaScript执行机制夯实基础中篇-图解作用域链和闭包hoisting是什么先来个总结图压压惊~正文开始~提问环节:下面这段代码打印什么?为什么?showSinger()console.log('第1次打印:',singer)varsinger='Jaychou'cons

一个 "开箱即用" 个人博客全栈系统项目!vue+node+express+mysql+sequlize+uniapp

"?MG'Blog"一个"开箱即用"个人博客全栈系统项目!探索本项目的源码»?前台预览·?管理端预览?v1.0.2小程序预览?v1.0.2介绍芒果’个人博客系统,包括前后台完整基础功能,小程序,web前台站点一键置灰,支持移动端适配;管理端常用增·查·改页面代码自动生成即可,sql文件已附上,开箱即用,如果对你有帮助,留个star⭐⭐再走呗⭐项目面向前端学习node.js,mysql等后端基础和小程序学习者⭐有好的建议欢迎交流学习1840354092@qq.com⭐项目启动安装有问题可以留言,会及时解答v1.0.1前台:Gblog管理端:vue-element-adminNode服务端:exp

好用到爆!GitHub 星标 32.5k+的命令行软件管理神器,功能真心强大!

前言(废话)本来打算在公司偷偷摸摸给星球的用户写一篇编程喵整合MongoDB的文章,结果在通过brew安装MongoDB的时候竟然报错了。原因很简单,公司这台Mac上的homebrew环境没有配置好。刚好Java程序员进阶之路上缺少这样一篇内容。所以我就想,不如趁机水一篇吧,啊,不不不,趁机给小伙伴们普及一下Homebrew吧!瞧我这该死的大公无私的心(手动狗头)。不会吧?不会还有人用macOS没有安装/配置Homebrew吧?Homebrew能干什么Homebrew的Slogan:ThemissingpackagemanagerformacOS(orLinux)Homebrew这款命令行软件

好用到爆!GitHub 星标 32.5k+的命令行软件管理神器,功能真心强大!

前言(废话)本来打算在公司偷偷摸摸给星球的用户写一篇编程喵整合MongoDB的文章,结果在通过brew安装MongoDB的时候竟然报错了。原因很简单,公司这台Mac上的homebrew环境没有配置好。刚好Java程序员进阶之路上缺少这样一篇内容。所以我就想,不如趁机水一篇吧,啊,不不不,趁机给小伙伴们普及一下Homebrew吧!瞧我这该死的大公无私的心(手动狗头)。不会吧?不会还有人用macOS没有安装/配置Homebrew吧?Homebrew能干什么Homebrew的Slogan:ThemissingpackagemanagerformacOS(orLinux)Homebrew这款命令行软件

不规则图形背景排版高阶技巧 -- 酷炫的六边形网格背景图

今天,收到一个很有意思的提问,如何实现类似如下的背景效果图:嗯?核心主体是由多个六边形网格叠加形成。那么我们该如何实现它呢?使用纯CSS能够实现吗?当然可以,下面我们就将尝试如何使用CSS去实现这样一个背景效果。如何绘制六边形?首先,看到这样一个图形,如果想要使用一个标签完成整个背景,最先想到的肯定是使用背景background实现,不过可惜的是,尽管CSS中的background非常之强大,但是没有特别好的方式让它足以批量生成重复的六边形背景。因此,在这个需求中,我们可能不得不退而求其次,一个六边形实现使用一个标签完成。那么,就拿1个DIV来说,我们有多少实现六边形的方式呢?这里简单介绍2种

让交互更加生动!有意思的鼠标跟随 3D 旋转动效

今天,群友问了这样一个问题,如下所示的鼠标跟随交互效果,如何实现:简单分析一下,这个交互效果主要有两个核心:借助了CSS3D的能力元素的旋转需要和鼠标的移动相结合本文,就将讲述如何使用纯CSS实现类似的交互效果,以及,借助JavaScript绑定鼠标事件,快速还原上述效果。纯CSS实现元素的3D旋转如果不借助JavaScript,仅仅只是CSS,如何实现类似的3D旋转效果呢?这里会运用到一种名为正反旋转相消或者是正负旋转相消的小技巧。嗯,名字起的很奇怪,好像数学概念一样。在动画中,旋转是非常常用的属性,{transform:rotate(90deg);}如果我们给不同的层级的元素,添加不同方向

不规则图形背景排版高阶技巧 -- 酷炫的六边形网格背景图

今天,收到一个很有意思的提问,如何实现类似如下的背景效果图:嗯?核心主体是由多个六边形网格叠加形成。那么我们该如何实现它呢?使用纯CSS能够实现吗?当然可以,下面我们就将尝试如何使用CSS去实现这样一个背景效果。如何绘制六边形?首先,看到这样一个图形,如果想要使用一个标签完成整个背景,最先想到的肯定是使用背景background实现,不过可惜的是,尽管CSS中的background非常之强大,但是没有特别好的方式让它足以批量生成重复的六边形背景。因此,在这个需求中,我们可能不得不退而求其次,一个六边形实现使用一个标签完成。那么,就拿1个DIV来说,我们有多少实现六边形的方式呢?这里简单介绍2种

让交互更加生动!有意思的鼠标跟随 3D 旋转动效

今天,群友问了这样一个问题,如下所示的鼠标跟随交互效果,如何实现:简单分析一下,这个交互效果主要有两个核心:借助了CSS3D的能力元素的旋转需要和鼠标的移动相结合本文,就将讲述如何使用纯CSS实现类似的交互效果,以及,借助JavaScript绑定鼠标事件,快速还原上述效果。纯CSS实现元素的3D旋转如果不借助JavaScript,仅仅只是CSS,如何实现类似的3D旋转效果呢?这里会运用到一种名为正反旋转相消或者是正负旋转相消的小技巧。嗯,名字起的很奇怪,好像数学概念一样。在动画中,旋转是非常常用的属性,{transform:rotate(90deg);}如果我们给不同的层级的元素,添加不同方向

混沌演练实践(一)

作者:京东科技孙民英一、混沌工程介绍1.什么是混沌工程混沌工程是通过主动制造故障场景并根据系统在各种压力下的行为表现确定优化策略的一种系统稳定性保障手段,简单说就是通过主动注入故障的方式、提前发现问题,然后解决问题规避风险。2.为什么要进行混沌演练随着互联网业务发展,微服务架构、分布式架构和虚拟化容器技术的广泛普及,软件架构的复杂度在不断提升,服务之间的依赖所带来的不确定性也成指数级增长,在这样的服务调用网中,任何一环出现的正常或者异常的变化,都有可能对其他服务造成类似蝴蝶效应一般的影响。目前营销体系的服务量级不断增加,整体链路增长以及数据流转复杂,对整个系统的可用性、稳定性挑战也越来越大,所