精华内容
下载资源
问答
  • 导出css
    千次阅读
    2022-03-24 13:24:44

    AE导出JSON数据用CSS做前端交互---kalrry

    一、简介

    1. 关于网页端动画实现
      web端做动画有多种形式,可以用CSS的animation,也可以用Canvas,或者是用JS控制CSS的属性形成动画。我们经常使用CSS做一些比较简单的动画,像过度、加载的动画,对于一些比较复杂的,可能会做成gif,或者是用Canvas,使用Canvas的控制粒度可以很细,同时工作量相对也比较大。做动画还有其它的方式,那就是使用After Effect(AE)/Flash/Premiere(Pr)/会声会影等视频软件,这种可视化的制作方式相对于直接写代码来说,会更容易简单自然。做动画本身应该使用工具进行制作,但是这种视频软件做出来的动画最后都是生成视频文件,并且通常体积还很大,没有办法直接移植到网页上去。然而好消息是,现在我们可以使用AE做动画,然后使用bodymovin插件导出成html文件进行播放。
    2. Bodymovin实现动画
      用Adobe公司的after effect软件做出来动画,用Bodymovin的AE插件可以将动画导出为json文件,bodymovin就是这个动画json文件的前端播放器,支持渲染为svg\canvas\html三种格式。它不仅可以播放动画,可以完全控制动画的播放、暂停、速率、播放对应帧等等。更可以做到更改帧对象的位置。
    3. 关于移动应用动画实现
      Facebook 开源了一个类似的库叫做 Keyframes,Keyframes是将AE动画转换为允许在Android和iOS设备上呈现的数据格式的库。也是跨平台的,但是本文介绍的 Littie 比 Keyframes 支持的特性更多。
      Keyframes库的开源地址

    二、准备

    AE
    Lottie官方网址
    Bodymovin AE Extension下载地址

    官方教程
    翻译教程

    Android
    iOS
    ReactNative

    三、例子

    1. https://codepen.io/airnan/project/editor/ZeNONO
    2. https://github.com/ViggoZ/notification_guide_motion/tree/gh-pages
    <body>
        <div id="bm"> </div>
        <script src="scripts/bodymovin.js"></script>
        <script>
        var animation = bodymovin.loadAnimation({
            container: document.getElementById('bm'),
            renderer: 'svg',
            loop: true,
            autoplay: true,
            path: 'data.json'
        })
        </script>
    </body>
    

    可以下载项目,自己用AE做好动画,生成data.json和image文件之后替换项目相应位置即可运行。
    注意:bodymovin的json文件在chrome中浏览是要有服务器环境才可以运行的,不然会报错,本地预览使用safari没问题,原因未知。
    bodymovin官方下载
    3. https://wow.techbrood.com/fiddle/32208

    四、参考

    1. lottie 前端JSON动画
    2. https://facebookincubator.github.io/Keyframes/
    3. https://github.com/panacena/LottieTest/
    4. https://juejin.im/post/58948f1b0ce4630056f3a629
    5. http://www.mq2014.com/after-effect-zhuan-svg-dong-hua-shen-qi-de-bodymovin-cha-jian.html
    6. http://www.renfed.com/2017/08/06/ae-bodymovin/
    7. https://codepen.io/airnan/project/editor/ZeNONO/
    更多相关内容
  • 从Chrome导出CSS 通过Chrome Inspector更改样式,StyleURL将在页面中显示CSS更改的差异。 在使用StyleURL之前,要使CSS从Chrome DevTools中进行调整,您必须选择每个元素,记住所做的更改,然后将其复制到文件中。...
  • less导出css文件的方法

    千次阅读 2022-04-18 10:38:41
    less导出css文件的方法: 配置Easy less插件,实现所有Less有相同的导出路径 1.vscode中点击设置 2.输入Easy找到我们需要更改的配置,点击在settings.jion中编辑 3.在"less.compile"中添加一行代码 "out":...

    首先需要安装Easy less插件

    less导出css文件的方法:

    配置Easy less插件,实现所有Less有相同的导出路径

    1.vscode中点击设置

     2.输入Easy找到我们需要更改的配置,点击在settings.jion中编辑

    3.在"less.compile"中添加一行代码 "out":"../css/"  

     这样我们的Less文件保存之后,css文件就可以保存到和less文件夹同级别的css文件夹之中了。

     

    单独导出路径:

    在less文件开头

    //out:./abc/

    //out./abc/qiufeng.css

    禁止导出:

    在less文件第一行添加://out:false

     

    展开全文
  • js导出table 可自定义导出文件名,可导出css样式,也是我在项目中用到的,希望可以帮助到大家,里面有注释讲解
  • Export AE animations to CSS
  • 作者:李威在H5项目中如果有动画需求,一个常见的流程是设计师用 After Effect 制作动画,然后导出为序列帧。序列帧就是一张张图片,快速连续播放就能成为动画,但是在H5里直接播放序列帧对网络性能不是很友好,有...

    作者:李威

    在H5项目中如果有动画需求,一个常见的流程是设计师用 After Effect 制作动画,然后导出为序列帧。

    序列帧就是一张张图片,快速连续播放就能成为动画,但是在H5里直接播放序列帧对网络性能不是很友好,有可能会造成卡顿或者丢帧,所以通常还会将其拼接成一张大图,即「精灵图」或者「雪碧图」(sprite image)。

    dcfea538b4f2e7fbe11851f995af449e.png

    0463041d12c27133958bfb21cc41df2c.png

    拼精灵图可以用PS、Sketch等图像处理工具手工拼接,也可以找一些专门的工具制作。拼完之后,还需要根据动画的时长、帧率、尺寸等参数写相应的代码,比较常见的是写成CSS代码来使用。

    当动画量很大,或者需要频繁修改的时候,这个流程就会比较繁琐,在这里和大家介绍一下我写的一个AE脚本,可以一键导出动画为CSS精灵图及代码,不需要先导出序列帧再拼接了。

    1558f7c488bf10f9eb5a731aeabcc556.png

    先简单介绍一下什么是AE脚本。

    AE是一款强大的动画制作软件,内置了丰富的功能,同时也提供了一定的外部扩展能力,可以让用户基于软件提供的接口自己做一些「扩展」。

    目前来说AE的「扩展」分三种:

    插件(plug in)、脚本(script)、扩展程序(extension)

    其中「脚本」可以理解为用一些命令调用AE本身的功能来组合施展,提高效率,后缀名是.jsx或者.jsxbin。

    11ef38bd08655eae2ce1a4c35f4da3d7.png

    如何安装:

    下载 CSS-Sprite-Exporter.jsx 文件,在这里右键 - 链接另存为.

    打开AE, 点击 文件->脚本->运行脚本文件... 然后选择刚才下载的 CSS-Sprite-Exporter.jsx。

    或者可以复制 CSS-Sprite-Exporter.jsx 到AE的脚本文件夹:

    Windows:C:\Program Files\Adobe\Adobe After Effects \Support Files\Script\

    Mac:

    /Applications/Adobe After Effects /Scripts/

    这样你就可以从 文件->脚本 中直接选择CSS-Sprite-Exporter了

    这也是很多脚本的通用安装/运行方法。

    使用方法:

    1. 在 AE 中制作需要导出的动画。

    2. 运行 CSS-Sprite-Exporter.jsx , 界面大概是这样:

    000beea68f1e0131406dea9eaafec8da.png

    3.设置好参数,点击「生成」导出,如果没有意外,就会帮你打开到该动画导出的文件夹。各参数的意义如下:

    最大宽度:当图片第一行拼接后宽度达到这个值,就会折到下一行继续拼接,默认是5000像素。

    web兼容性:为了兼容一些旧的浏览器,如果项目有这个需求可以勾选,具体需要研发同学评估,默认没有勾选

    CSS样式设置中的「ID名」指定了在页面中这个元素的「ID」,需要遵循CSS的命名规范,可以先保留默认导出给研发后让研发统一指定。

    「动画名」指定了该元素的对应关键在动画的命名,也需要遵循CSS的命名规范,可以先保留默认导出给研发后让研发统一指定。

    跳帧:如果动画帧数太多可以尝试用这个参数减少帧数,即「跳过xx帧」的意思,默认是不跳帧。

    导出的CSS代码示例:

    #mySprite { /*导出时指定的「ID名」*/

    background-image:url('images/boom.png');/*精灵图路径*/

    width:500px;

    height:500px;

    /*导出时指定的「动画名」*/

    animation:myAnimation 1.42s steps(1) infinite;

    }

    @keyframes myAnimation{

    0% { background-position:0px 0px; }

    2.94% { background-position:-500px 0px; }

    5.88% { background-position:-1000px 0px; }

    8.82% { background-position:-1500px 0px; }

    ……

    /*此处省略,一直到100%*/

    ……

    97.06% { background-position:-1500px -1500px; }

    100.00% { background-position:-2000px -1500px; }

    }

    4.打开「预览_XXX.html」 文件(建议用 chrome 打开),预览导出的动画。

    预览页面左边为动画,点击它能预览精灵图,下方会显示尺寸参数,点击蒙层返回。

    右边为预览控制和导出的代码,下方可以设置预览背景色。

    15128a2abe5db9ab00e77e5c6dbe95f7.png

    04a24ac1edc62fa84428cfcfe8c5c9f5.png

    c246754c4d0dd9c3248179c3129d0c2d.png

    5.如果没有问题便可以复制代码了。

    可以一键复制到剪贴板,方便快捷(使用了 Clipboard.js. )

    66d8f1a15bf7c66e8a05dd9838c0c9ed.png

    使用注意事项:

    AE中合成的名字尽量用英文及数字,这样导出的精灵图也会是英文和数字,不容易出现图片路径乱码问题。

    动画的尺寸、时长、帧率尽量控制小一些,否则导出的精灵图尺寸会很大,容易导致一些性能问题。

    CSS动画代码中位移的单位是像素(px),如果需要别的单位需要转换一下。

    应用案例:网易云音乐2017年终盘点

    这个H5案例主要是用CSS动画来实现的,其中有很多小人的动画,以及水波、沙漏等小元素是用精灵图实现

    c3ecc39955a41aa9cf064d0fecdb1f5f.png

    d56987ab65b14ae8941813ea882ec793.png

    e5f48443e8d38a9b2ee717252a971b2e.png

    31b0018469af8fed5c90fdbe6704a867.png

    关于这个脚本大家有什么疑问或者建议都欢迎联系我

    也欢迎到脚本的github项目地址帮我加个star,谢谢!

    https://github.com/bigxixi/CSS-Sprite-Exporter

    本文来自网易实践者社区,经作者李威授权发布。

    展开全文
  • CSS3 forPs CS5-CS6.zip,photoshop CS5-CS6 图层样式直接导出CSS3,支持html5
  • 将文本样式导出CSS,SASS mixins,JSON,HTML等高度可配置(包括rem,em单位等)安装。... 现在,您不仅可以为您的文本样式提供简单的,易于复制CSS片段,还可以实际配置如何将其导出CSS,SASS mixins和JSON。
  • 这将使所有导入的css文件都捆绑到一个css文件中,并使css文件作为默认导出可访问。 此插件支持两种形式CSS导入,当导入CSS文件没有分配的变量时,css将捆绑到一个单独的css文件中。 import "./styles.css" ; ...
  • Figma插件,可从文档的文本和颜色样式生成JS主题的​​CSS,或者让您导入主题以生成Figma样式。 它有什么作用? Figma风格 :recycling_symbol: JS主题中CSS 此插件可以根据您的Figma文档的颜色和文本样式在JS主题...
  • 导出原始CSS样式或React内联样式。 自定义样式,例如单引号或双引号,6位十六进制颜色(#ffffff)或3位数字(#fff)。 自定义CSS变量替换。 所有自定义选项都可以在“设置”菜单中找到。 不久将支持更多选项。
  • photoshop 生成Flex Skins(皮肤可导出css版) 以前下的小脚本,已经有人汉化过,感谢那些已经被我们忘记的人。 由于对脚本研究不深暂时无法直接生成文本文件,只在原有的基础上添加了CSS生成到新建的Psd文件里...
  • After Effects插件,用于将动画导出到svg / canvas / html + js V 4.5.4 修剪路径分别受支持 修正了Webpack构建的错误修复 V 4.5.3 跳过字符上不间断的空格 水平效果优化 形状表达式添加了变换属性(需要解决...
  • A Vue.js project
  • 您可以在LiveCode中设计布局,然后将布局导出到HTML和CSS文件。 拖放设计! 项目是“可逆的”-导出的网页具有更改,例如添加了文件和事件函数引用,可以将其重新导入到项目中,进行编辑(控件的移动,添加和删除)...
  • 这是有关如何使用表格CSS将HTML表格导出到Excel的快速代码。
  • Sketch-HTML-Export, 将artboards导出到 HTML & CSS的草图插件 Sketch-HTML-Export将artboards导出到 HTML & CSS的草图插件下载&安装下载插件插件。Upzip下载文件并双击"html 。sketchplugin"。 它会自动安装。使用...
  • Photoshop切片导出HTML+CSS

    千次阅读 2021-06-09 00:55:46
    利用Photoshop切片功能可以导出HTML,做大尺寸图片背景网页时,将大图片切割成小图片,以免影响加载速度,也可以方便在图片上加锚点之类的。一,对图片进行切片首先,按ctrl+R调出标尺,在图片上用参考线划出不同的...

    利用Photoshop切片功能可以导出HTML,做大尺寸图片背景网页时,将大图片切割成小图片,以免影响加载速度,也可以方便在图片上加锚点之类的。

    一,对图片进行切片

    首先,按ctrl+R调出标尺,在图片上用参考线划出不同的区域。

    b4905-oth1j.jpg

    切片方法一,使用工具栏上的“切片工具”按参考线划出一个一个的切片。

    26e5d7f83c9daa7b8fa8550c89e9250d.png

    切片方法二,手动切片有些麻烦,可以点选项栏里的“基于参考线的切片”。

    9894239513ef9a78e57b9b9a608d698b.png

    之后原来的参考线划出的区域就自动变成一块一块的切片了。

    6b0f6-ot1fa.jpg

    可能有些区域不需要切片,可以调出“切片选择工具”删除切片。

    二,将切片导出为HTML+CSS

    依次选择菜单栏上的“文件”→“存储为Web所用格式”(Alt+Shift+Ctrl+S)→“存储”。

    5daa21c75536e49a16b02831466b4e63.png

    接下来就会弹出一个“将优化结果存储为”窗口,如下图左:

    73619-otxTm.jpg

    文件名:改成英文的,这个名称最后是CSS选择器的名称。

    格式:HTML和图象

    设置:选择”其它“,之后会弹出”输出设置“对话框,如上右图。

    设置:自定

    在第2个下拉框处选择“切片”

    切片输出,选择“生成CSS”

    点击确定,返回“将优化结果存储为”窗口,保存即可。

    这样就可以输出一个包含div+css的HTML网页文件和一个images图片文件夹。

    有童鞋问,网上所谓PSD设计图生成网页模板之类的,用这个方法是否能自动生成一个高大上的网页模板?答案是:不能,无稽之谈,没有HTML+DIV+CSS基础,生成的网页文件,基本没什么用处...

    展开全文
  • 一个Tailwind CSS插件,可将主题颜色导出CSS自定义属性。 正在安装 npm install tailwindcss-css-properties 或者 yarn add tailwindcss-css-properties 在您的Tailwind配置中要求: module . exports = { /...
  • 产品经理有一个非常重要的工具就是Axure,通过Axure我们通常会把想法转化成包含交互的可视化线框图。但是在日常的工作中,我们如果用HTML文件传递不仅会...介绍一下需要准备的内容Coding Pages服务Git服务SourceTre...
  • 在js 中 import variables from '@/style/variables.css' 在 .sass 文件中 直接 export 即可使用 $subMenuBg: 1f2d3d :export { subMenuBg:$subMenuBg }
  • vue中使用外部js文件,导入css文件,新语法的导入和导出,以及本地图片的使用
  • 提取 CSS | Illustrator

    2021-06-29 03:52:13
    但是,复制组件和对象的确切外观和位置是一个耗时和繁琐的过程...使用 Illustrator,在创建 HTML 页面的版面时,也可以生成和导出基础 CSS 代码,用于决定页面中组件和对象的外观。CSS 可以控制文本和对象的外观(与...
  • fetchImages:( )=> Promise <Array>> 提取文件中的组件并将其导出为图像。watchFile(即将推出) 观看文件以进行更改。diffFile(即将推出) 确定两个文件之间的差异。种类ImageOptionsfileId筛选图像姓名描述...
  • 最近在工作中涉及到Axure8设计原型,但是因为要导入其他页面的公共样式,所以要导出html格式并进行css样式的整合。 1)导出html文件的方法做好页面后点击左上角“发布”按钮,选择“生成html文件”选择路径后即可在...
  • 首先,您需要选择您想要的输出格式: vector : 导出到 XHTML+(SVG)+CSS mixed :将 XHTML 和每个 Inkscape 图层导出为光栅 (PNG) 图像raster :将每个图层导出为光栅 (PNG) 图像在vector模式下, rect 、 text和...
  • CSS Modules 方案

    2021-08-04 06:46:21
    在我眼中CSS Module是对css进行模块化的管理,更加深入的解释就是用来管理css样式的导入与导出。灵活按需导入以便复用代码,导出的时候要合理的分割域的界限。CSS Module面对的问题模块化实际过程中遇到的问题有如下...
  • 我们在项目当中经常要导出pdf文档,pdf文档还要按一定的格式导出,以下介绍导出pdf文档功能: 1)支持A4纸大小导出 2)指定文字显示的位置 3)支持表格展示数据 4)添加水印 5)代码全开源,在多个项目中使用,放心...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 63,237
精华内容 25,294
关键字:

导出css