elementplus官网右上角的开关是怎么实现的

html-css08

elementplus官网右上角的开关是怎么实现的,第1张

ElementPlus官网右上角的开关是基于HTML和CSS来实现的。首先，利用HTML中的<input type="checkbox">这个标签来创建一个开关，然后通过CSS中不同的类来设置打开和关闭状态时开关背景图片的样式显示，最后使用JS代码来实现开关状态切换时对其他网页元素的操作。

我使用SVG、Canvas、CSS3或者背景图片实现五角星图案及其悬停效

CSS3引入伪元素变换特性使实现五角星图形非简单并且结合渐变实现更漂亮效

使用图片实现五角星已经毫必要（图片占用额外请求且数据量除非要支持低版本桌面IE浏览器）

首先我创建三角形通使用带尺寸边线零内容尺寸元素实现代码示范：

.tri { width: 0height: 0border-left: 15px solid transparentborder-right: 15px solid transparentborder-bottom: 30px solid red}

第二步我使用伪元素:after:before克隆2同三角形

.tri:after,.tri:before { width: 0height: 0border-left: 15px solid transparentborder-right: 15px solid transparentborder-bottom: 30px solid red}

我述2伪元素别应用同旋转变换：

.tri:before { transform: rotate(70deg)}.tri:after { transform: rotate(-70deg)}

我实现五角星图形（图标）我用类似实现更几何形状