1.px转vw
export function pxTovw(px: number) {
return ${px / 7.5}vw
}
2.vite获取图片函数getAssetsImages
-
@param name 文件名
-
@param ext png/jpg
-
@returns
export function getAssetsImages(name:string,ext="png") {
return new URL(/src/assets/images/${name}.${ext}, import.meta.url).href
}
3组件代码
.red-envelope-rain { position: relative; width: 750px; height: 100vh; overflow: hidden; } .red-envelope-drop { will-change: transform, opacity; width: 120px; height: 180px; position: absolute; animation: fall linear; } .red-envelope { will-change: transform, opacity; position: relative; z-index: 1000; width: 120px; height: 180px; background-color: red; color: white; display: flex; align-items: center; justify-content: center; border-radius: 10px; } .red-envelope-copy { will-change: transform, opacity; position: absolute; top: -1000px; width: 120px; height: 180px; background-color: red; color: white; border-radius: 10px; } @keyframes fall { 0% { transform: translateY(-100px); opacity: 1; } 50% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(100vh); opacity: 0; } }*新手指导这段代码要达到手机端适配的话需要使用postcss-px-to-viewport-8-plugin插件和tainwindcss或者个人根据自己喜好好做
具体配置如下
npm i postcss-px-to-viewport-8-plugin -D
npm i tainwind -D
按照上面的步骤应该是没啥大问题
结果预览
19c7c94463e7be416875b3f2b190535e ————————————————
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
