CSS3
文章平均质量分 61
css3
Vinca@
闲暇时间分享自己的项目经验,支持开源,支持分享~
展开
-
在Nuxt.js中添加PostCSS自动前缀器
是一个 PostCSS 插件,用于将浏览器前缀添加到您的 CSS 中,因此您不必在每次更新带有前缀的 CSS 属性时都添加前缀,尤其是对于浏览器兼容性,您真的很担心它。在其他浏览器中,有些 CSS 属性需要带有前缀。如-webkit- | -o- | -ms- 等等。检查属性后,差异将显示在 CSS 上。以下是 PostCSS autoprefixer 添加到您的项目的方法。更新您的 :package.json。原创 2024-04-19 11:21:44 · 359 阅读 · 2 评论 -
【个人笔记】前端碎片笔记
(组件WidgetContent渲染视图效果)如上图,如果有部分模块或者单页需要单独让 WidgetContent的h6标签更换颜色或添加下划线等样式,我们又不想污染原有组件的样式,那么该如何编写出优雅的代码? 子组件代码:主要通过$attrs访问父组件传递给子组件但子组件没有声明的所有属性。只需要给对应的标签添开头添加 ! 字符:!mt-10第一种方法使用pre标签+样式+符号\n实现:第二种方式使用white-space: pre;实现 使用:deep(原创 2024-04-10 22:11:41 · 367 阅读 · 0 评论 -
如何在nuxt中优雅使用swiper,实现过渡反向+贴合无缝+循环播放【核心代码分析】
显示屏每次显示swiper-slide的个数,这里建议采用number形式,而不是:slidesPerView="`auto`",如果采用auto会导致swiper freeMode监听都要去计算,会导致卡顿。默认是ease-out,ease-out会导致每次loop停顿一下。循环播放,如果不设置会导致播放回滚,所以这里必须设置为true。通过伪元素实现双边虚化效果,让整体看起来更顺畅美观。每次播放延迟,设置为0表示不延迟。启用反向自动播放,让上下两层形成视觉差效果。这里采用的是scss语法格式。原创 2024-04-02 18:10:03 · 1304 阅读 · 0 评论 -
解决Animate.css动画效果无法在浏览器运行问题
然后执行npm run dev , 将Network 浏览地址发送给自己的手机或者平板,检验后发现没问题,无论你是选择哪一项设置(默认选择:让windows选择计算机的最佳设置),只要勾选。在开发官方网站的时候,临时更换了电脑,发现原本正常的动画效果突然不动了。经过 chrome、Microsoft Edge都无法运行。1、在package.json中添加 --host。通过审查元素后发现类名是注入并且生效的。然后通过其他设备终端去验证。所以问题出在新的设备。窗口内的动画控件和元素。原创 2024-03-23 14:20:25 · 395 阅读 · 0 评论 -
将字体文件 .ttf 转成 CSS @font-face 代码引入
最近项目遇到设计稿存在第三方字体,要求在静态中实现相应效果。将@font-face代码片段引入项目css文件。点击 “Download” 下载转换结果。将字体文件转换成@font-face。原创 2024-03-18 16:22:17 · 474 阅读 · 0 评论 -
css3鼠标经过按钮色彩缤纷效果
【代码】css3鼠标经过按钮色彩缤纷效果。原创 2023-05-02 16:17:52 · 243 阅读 · 1 评论