Css
stylie工具轻松搞定css3抛物线动画
自从CSS3引入了动画（transition和@keyframes，还有与之搭配的transform）之后，写动画也变的越来多越来越容易。可是当我们遇到需要利用数学公式的复杂动画时，却一筹莫展，只能怪小时候数学没学好（可能是语文老师教的）。那么问题来了，但我拿到要实现这样的需求，该如何：可能我们会去苦恼，加...
css3 animation动画技巧
一,css3animation动画前言 随着现在浏览器对css3的兼容性越来越好，使用css3动画来制作动画的例子也越来越广泛，也随着而来带来了许多的问题值得我们能思考。css3动画如何让物体运动更顺畅，css3动画如何做弧线动画，css3动画是否有动画库，css3帧动画如何快速简单……&...
写多个物件css3循环动画案例原理
在写h5页面中，我们可能经常遇到要写很多css3动画，有没有同学遇到多个物件同样的动画效果，循环保存步调一致呢，我就经常碰到，之前一直不知道其中的原理，只是简单的迁移改改，可是遇到稍微复杂多一点的就hold不住了，只能硬着头皮去分析其中的原理。那么接下来，让我们先看看案例，然后了解之中的原理css3动画循环案例&n...
常用 CSS 中文字体 Unicode 编码表
为什么要在CSS中设置字体用字体Unicode编码 在CSS中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8等）不匹配时会产生乱码的错误。为此，在CSS直接使用Unicode编码来写字体名称可以避免这些错误。使用Unicode写中文字体名称，浏览器是可以正确的解析的。例如：font-fam...
css3效果隔两秒旋转然后停两秒再继续旋转，无限循环
<styletype="text/css">/*底部天象APP红包下载*/.public_footer_app,.animation{position:fixed;right:15px;bottom:46px;z-index:40;background:url(data:image/png;base64,i...
CSS3文本超出两行,显示省略符号
网站开发过程中经常性遇到标题或者描述超出添加省略符号的问题，这个问题关系到了界面的排版，在这里就和大家分享一下，如果去设置这个CSSCSS代码如下:width:100%;display:-webkit-box;word-break:break-all;-webkit-line-clamp:2;-webkit-box-o...
vue-cli3.0 使用postcss-plugin-px2rem（推荐）和 postcss-pxtorem（postcss-px2rem）自动转换px为rem 的配置方法；
如何在vue-cli3.0中使用postcss-plugin-px2rem 插件插件的作用是 自动将vue项目中的px转换为rem。为什么这三个中要推荐 postcss-plugin-px2rem呢？ 因为 postcss-plugin-px2rem 这个插件&nbs...
css3之 景深
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><stylemedia="screen">.box{width:200px;height:200px;backg...
PostCSS理解与运用
1、PostCSS是什么它可以被理解为一个平台，可以让一些插件在上面跑它提供了一个解析器，可以将CSS解析成抽象语法树通过PostCSS这个平台，我们能够开发一些插件，来处理CSS。热门插件如autoprefixer安装npminstall-gpostcss-cli//全局安装postcssnpminsta...
css颜色渐变在不同浏览器的设置
在web开发中,难免会遇到浏览器之间的兼容问题，关于Css设置颜色渐变下面有解决的办法，直接上代码：适用于谷歌浏览器：background:-webkit-gradient(linear,00,0100%,from(#4285fa),to(#366dcb));from:是指渐变起始颜色to:是指渐变结束的颜色适用于火狐...
SAE上无法加载css等文件
如果你的SAE用到了这些文件，你会发现本地虽然能够运行成功，但是SAE上却无法加载。其实就是地址发生了变化，我们告诉SAE这些东西怎么找就可以了。例如我的css和js文件放在了app/static/文件夹下面，那么我们就在config.yaml中加入这些配置：handlers:-url:/staticstatic_di...
css换肤总结
两种可行的办法1.多套不同主题的css用less/sass变量代替颜色值，用编译工具生成主题文件theme-dark.csstheme-green.css切换文件使用，不要appendlink，直接修改原有theme的link的href，就行了//根据不同的企业用户加载不同的cssdocument.querySelec...
css购物车(抛物线)运动
抛物线动画的原理，就是用两个元素，子元素会继承父元素的运动，将父元素在横向运动，子元素在纵向运动，子元素会形成一种双向运动。而父元素在横向上是匀速运动，子元素在纵向上是变速运动，可以使用贝塞尔曲线来定义运动，二者合成，就能出现一个曲线运动。具体的曲线，跟选择的贝塞尔函数有关，调整好，就可以形成抛物线运动。ball和af...
css动画常用属性总结
transition过渡动画，有4个属性：(1)transition-property：属性名称(2)transition-duration:间隔时间(3)transition-timing-function:动画曲线(4)transition-delay:延迟animation关键帧动画，有7个属性：(1)anima...
webpack css压缩方案
css-loader原有的minimize选项在1.0.0版本已经移除，不能使用其进行css压缩。目前可行的css压缩方案有：1.postcss-loaderwithcssnanooruseoptimize-cssnano-pluginplugin2.postcsswithpostcss-clean3.mini-css...
