Cooky的博客

本篇文章来源慕课网课程《canvas玩转红包照片》，用canvas及css3结合，实现红包照片的效果，并不做支付过程，代替的是使用2个按钮，显示清晰图片和重置圆圈可见区域。未做移动的屏幕适应微信红包照片效果图原理分析：先在页面放置一张原图片image，用css3的filter做模糊处理在图片区域上方放置一个与图片image大小一样的canvas，放置整张清晰图片通过canvas的图片剪辑方法，

.gradient-text { background-image: linear-gradient(-110deg, #ffe1ac 0%, #efdec5 53%, #ffecc9 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}

div:active伪类无效问题 普通div在移动端:active伪类不会生效，应该是只有a，button此类才会生效，pc端正常 解决办法：在body添加touchstart事件监听 <script> document.body.addEventListener('touchstart', function () {}) &l...

使用transform rotateY(180deg)将元素反转，电脑端查看没有问题，用iphone手机查看，元素不显示？？？（安卓手机没有看）然后找了一些方法都没有效果，以下方法亲测可用在父元素设置perspective，如下 .father { perspective:1000; // 在这里添加 .childeren { transform: ro...