vue生成海报图-在vue中怎么生成10个图片

简单粗暴,无需多想!!

1.npm 安装vue-canvas-poster

本文链接:

利用js获取鼠标指针位置,根据位置计算偏转角度,通过设定css中transform的perspective/rotateX/rotateY使banner呈现3d偏转的效果。

首先,写一个div

并给他一些基本的样式

接下来引入vue

并生成一个实例

在data中定义x轴和y轴的偏转角度

在computed计算属性中定义生成具体css语句的函数

在methods中书写鼠标在banner中的移动事件对应的函数

定义鼠标离开banner事件对应的函数(也就是将data中角度值归零)

接下来,为banner绑定相应的事件和样式

此时,发现效果已经基本实现,为了让鼠标离开时banner恢复原状的过程更加平缓,要给banner加入transition

大功告成了, 预览 。

不过我发现,锤子官方商城的效果中,banner内的文字和背景偏转角度有一定差异,感觉像不在一个平面上,我猜测应该是利用了不同的perspective,有机会我再测试一下。

在vue中生成10个图片方法:html页面生成图片的技术背景将html页面生成图片,纯前端通过html2canvas生成图片,将前端的dom传回Django后端,通过后就可以了。