html前端实现李峋爱心代码 百分百复刻

写样式是不会写的啦,这辈子都不会碰的咯,这复杂度懂得都懂,接下来说简便办法:
首先你需要对应的视频文件:在这里插入图片描述
然后导成GIF图片,具体不教了吧,这里我用的是这个网站 完全免费
导出来之后并不能直接用,因为除了心还有背景,这里背景颜色不一样很难跟html很好的融合。
所以接下来还需要将GIF转为一张张的图片帧:
在这里插入图片描述
接下来就要把图片背景给变透明,我用的是python的opencv:
具体思路是:遍历每一个像素点,将非红色的像素设置为透明,这是个精细活我现在做的还是有点粗糙。具体做法就是:任意打开一张图片,用取色器取背景色将这个颜色记下写入我们代码中(这里背景色还不是单一的是多个颜色杂糅在一起的,所以颜色会有很多个),还有爱心周围的杂色也取出来替换为透明。(注意,RGB应该是从下往上写入代码也就是0,36,36)
在这里插入图片描述

if __name__ == '__main__':
    index=0
    while index<145:#这是你gif导出的图片帧数量这里我简写了
        im = cv2.imread("F:\\pythonProject\\testimg\\"+str(index)+'.png')
        height, width, channels = im.shape
        new_im = numpy.ones((height, width, 4)) * 255
        new_im[:, :, :3] = im
        for i in range(height):
            for j in range(width):
                print(new_im[i, j, :3].tolist())#下面等号右边就是我们要填写的、排除的颜色
                if (new_im[i, j, :3].tolist() == [0.0, 0.0, 0.0] or new_im[i, j, :3].tolist() == [0.0, 36.0, 36.0]
                or new_im[i, j, :3].tolist() == [85.0, 0.0, 0.0] or new_im[i, j, :3].tolist() == [255.0, 255.0, 255.0]
                or new_im[i, j, :3].tolist() == [85.0, 36.0, 0.0]or new_im[i, j, :3].tolist() == [0.0, 36.0, 0.0]
                or new_im[i, j, :3].tolist() == [85.0, 36.0, 36.0]or new_im[i, j, :3].tolist() == [85.0, 0.0, 36.0]
                or new_im[i, j, :3].tolist() == [0.0, 0.0, 36.0]or new_im[i, j, :3].tolist() == [0.0, 72.0, 72.0]
                or new_im[i, j, :3].tolist() == [85.0, 0.0, 36.0]or new_im[i, j, :3].tolist() == [85.0, 72.0, 72.0]
                or new_im[i, j, :3].tolist() == [0.0, 76.0, 32.0]or new_im[i, j, :3].tolist() == [0.0, 36.0, 72.0]
                ):
                    new_im[i, j, :] = numpy.array([0.0, 0.0, 0.0, 0])

        cv2.imwrite("F:\\pythonProject\\shuchu\\"+str(index)+".png", new_im)
        index=index+1
    print("完成")

然后成功了就是这样:已经把背景去除了。
在这里插入图片描述
然后通过PS导出为GIF,具体做法是:
文件-脚本-将文件载入堆栈-浏览(将文件全选,不用一个一个选),然后点击确定就行,然后点击图层就会看到那100多张图片了(这里会有些慢大概7 8分钟),

在这里插入图片描述
然后:点击窗口-时间轴-创建帧动画 下面是具体操作:
单击:
在这里插入图片描述
从图层生成
在这里插入图片描述
至此GIF就完成了点小三角播放可以观看下效果,这里面默认刚好30帧所以不用改什么配置,
然后就是导出了:
文件-储存为web所用格式
选择GIF
在这里插入图片描述
在这里插入图片描述
然后点击储存就可以导出了,这里导出可能会失败:大概率是你内存不足,这时可以给PS加内存,或者:
我们可以不用百分比的分辨率
在这里插入图片描述
我最后的解决办法是直接重启释放掉内存,再打开导出就OK了。
GIF导出来了,在HTML引用一下就行,记得img标签设置background:transparent。
收工。

  • 12
    点赞
  • 47
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
您好!如果您想复刻一个树形结构的元素,可以使用HTML和CSS来实现。下面是一个简单的示例,展示如何创建一个树形结构的HTML元素: ```html <!DOCTYPE html> <html> <head> <style> /* 树形结构样式 */ .tree { margin-left: 40px; } .tree ul { padding-top: 20px; position: relative; padding-left: 20px; display: block; } .tree ul:before { content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 100%; border-left: 1px solid #ccc; } .tree li { list-style-type: none; margin: 0; padding: 10px 5px 0 5px; position: relative; text-align: left; } .tree li::before { content: ""; position: absolute; top: -12px; left: -20px; width: 1px; height: 100%; border-left: 1px solid #ccc; } .tree li::after { content: ""; position: absolute; top: -7px; left: -20px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #ccc; background-color: #fff; } .tree li:last-child::before { height: 30px; } .tree li:last-child::after { top: -17px; height: 30px; border-color: transparent; } /* 其他样式 */ .tree li span { padding: 5px; border-radius: 5px; background-color: #f2f2f2; } </style> </head> <body> <div class="tree"> <ul> <li> <span>根节点</span> <ul> <li> <span>子节点1</span> <ul> <li><span>子节点1.1</span></li> <li><span>子节点1.2</span></li> </ul> </li> <li><span>子节点2</span></li> </ul> </li> </ul> </div> </body> </html> ``` 在上面的示例中,我们使用了无序列表 (`<ul>`) 和列表项 (`<li>`) 来构建树形结构。使用伪元素 (::before 和 ::after) 来绘制连接线和节点图标。 您可以根据需要调整样式和内容,添加更多的节点和子节点来形成更复杂的树形结构。希望对您有帮助!如果您有任何其他问题,请随时问我。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值