演示
本站
通过jquery JS实现颜色渐变背景,然后叠加透明svg图片,CSS可调节叠加效果,壁纸效果还行。
借鉴网站源码
https://t.me/s/bizhi123?before=76
源码分析
CSS
<link href="telegram-web.css" rel="stylesheet" media="screen">
jquery
<script src="jquery.min1.js"></script>
<script src="tgwallpaper.min.js"></script>
<script src="telegram-web.js"></script>
<script>TWeb.init();</script>
canvas调用
<body class="widget_frame_base tgme_webpreview mobile emoji_image thin_box_shadow tme_mode twallpaper">
<div class="tgme_background_wrap">
<canvas id="tgme_background" class="tgme_background" width="50" height="50" data-colors="dbddbb,6ba587,d5d88d,88b884">
</canvas>
<div class="tgme_background_pattern"></div>
</div>
全部源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>壁纸 | Wallpaper – Telegram</title>
<link href="telegram-web.css" rel="stylesheet" media="screen">
</head>
<body class="widget_frame_base tgme_webpreview mobile emoji_image thin_box_shadow tme_mode twallpaper">
<div class="tgme_background_wrap">
<canvas id="tgme_background" class="tgme_background" width="50" height="50" data-colors="dbddbb,6ba587,d5d88d,88b884"></canvas>
<div class="tgme_background_pattern"></div>
</div>
<script src="jquery.min1.js"></script>
<script src="tgwallpaper.min.js"></script>
<script src="telegram-web.js"></script>
<script>TWeb.init();</script>
</body>
</html>
Telegram Wallpaper移植到Typecho
上传SVG图片、2个js文件、1个CSS文件到Typecho加载目录
pattern.svg
jquery.min1.js
telegram-web.js
telegram-web.css
tgwallpaper.min.js
修改components/header.php文件
<head>
....
<link href="https://ntnas.top:82/typecho/usr/plugins/telegram-web.css" rel="stylesheet" media="screen">
</head>
<body class="widget_frame_base tgme_webpreview mobile emoji_image thin_box_shadow tme_mode twallpaper">
<div class="tgme_background_wrap">
<canvas id="tgme_background" class="tgme_background" width="50" height="50" data-colors="dbddbb,6ba587,d5d88d,88b884"></canvas>
<div class="tgme_background_pattern"></div>
</div>
<script src="jquery.min1.js"></script>
<script src="tgwallpaper.min.js"></script>
<script src="telegram-web.js"></script>
<script>TWeb.init();</script>
注意修改文件调用目录路径就OK。
版权属于:Mr.Tlyer
本文链接:https://ntnas.top:82/typecho/archives/1543/
转载时请注明出处
最新回复