给某个链接(按钮)旁边加上角标，有新消息提示时加上红点或直接标出有多少条新消息。
以前是大费周章 JS去控制 DOM 。脚本非常的臃肿

今天想了想用 ATTR() 来实现，把想法丢给 AI 让AI帮我把 CSS 和 JS 给完善了一下

- 阅读剩余部分 -

演示地址： https://gen8.orz.com.cn/beta/bg180/

应需求方的要求，在页面增加一些动态元素增加引导交互效果。

关键在于 CSS的animation(keyframes) 和 background-position 两个属性组合

animation: anibg 13s ease-in-out infinite;

……

@keyframes anibg {
    0% {background-position: left center;}
    50% {background-position: right center;}
    100% {background-position: left center;}
}

php代码，添加到输出的html末尾

<?php
if(date("Y-m-d")=='2020-04-04'){
?>
<style type="text/css">
    <!--
    html {
        filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
        -webkit-filter: grayscale(100%);
    }
    -->
</style>
<?php
}
?>

也可以手动css文件头加这行（活动结束后手动撤下）

html {
        filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
        -webkit-filter: grayscale(100%);
    }

书接上回前文再续，下一步根据这个字典里的汉字做索引打包新的字库文件。

- 阅读剩余部分 -

最近摸索前端canvas画布和后端图像加工相关的一些功能。写了个练手程序，为了让前端（js控制css）预览的体验与后端php图像处理一致。总结了几点经验。

先上成品，表情包生成器：
https://gen8.orz.com.cn/mymeme

*此文并非系统且科普的教学，讲述的内容基于我个人备忘比较跳跃和零散。

目标:

1. 用户上传模板图
2. 在图上画出一个录入文字的涂鸦区域（定义尺寸、位置、文字大小、角度），并可以预览效果
3. 保存成方案，之后可以打开与分享这个方案。把输入的文字（段子）合成到图片上
4. 根据涂鸦区域的大小与文字的多与少，一定范围内自动调节文字的大小（未做更换字体、颜色）

这几个目标遇到问题较多的是预览前端的涂鸦区预览 与 后端生成图片的一致性。

- 阅读剩余部分 -