小编Ant*_*ard的帖子

我是CSS动画的新手,我一直试图通过查看他们的代码让他们的动画在最后几个小时工作,但我现在无法使它工作.

我在谈论这个效果:https://angular.io/(菜单效果).基本上,它是一个点击动画,从鼠标光标传播一个圆圈.

似乎归结为这两行:

transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1);
transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1),transform .4s cubic-bezier(.25,.8,.25,1);

PS:也许有一些我没看到的jQuery.

我认为我正确安装了它.

我的package.json

   {
      "name": "my-project",
      "version": "0.1.0",
      "devDependencies": {
        "gulp": "^3.8.11",
        "gulp-concat": "^2.5.2"
      }
    }

我的gulp.js

var gulp = require('gulp');

    var concat = require('gulp-concat');

    gulp.task('scripts', function() {
        return gulp.src('js/*.js')
          .pipe(concat('main.js'))
          .pipe(gulp.dest('build/js'));
    });

    gulp.task('default', ['scripts']);

我的文件夹如下:

ROOT/package.json
ROOT/gulp.js
ROOT/node-modules/   <-- my modules are here
ROOT/js/  <-- my js are here

当我gulp在命令行中运行时,在ROOT文件夹中,gulp.js只在Windows记事本中打开,这就是全部..

它为什么这样做？

我正在制作动画SVG饼图.基本上我有两个SVG元件,所述第一获取一个border-radius的50%,第二个是,我填充到一个特定的值的圆.最后,这使得一个圆圈位于另一个圆圈之上,它们都具有相同的尺寸.

有一种似乎很难摆脱的SVG别名.它在圆圈的顶部,左侧,底部和右侧"角落​​"非常明显,至少在Google Chrome上是如此.

这是HTML部分

<figure id="pie" data-percentage="60">
  <div class="receiver"></div>
  <svg width="200" height="200" class="chart" shape-rendering="geometricPrecision">
    <circle r="50" cx="100" cy="100" class="pie" shape-rendering="geometricPrecision"/>
  </svg>
</figure>

这是我的codepen,可以更准确地描述问题.我尝试了各种解决方案,包括形状渲染SVG属性但无济于事.

这是一个截图,别名不像在codepen中那样可见(对我来说至少)

简单的问题。有人告诉我，例如，使用这个

<span class="fa-stack fa-lg">
  <i class="fa fa-cloud fa-stack-2x"></i>
  <i class="fa fa-cog fa-stack-1x"></i>
</span>

（这将导致中心有一个齿轮的云），对于正确可访问的 html 是禁止的，因为这两个<i>标签是空的。

但是，如果不借助图像，如何才能做到这一点呢？我的目标是在页面中实现尽可能少的图像，这只能通过字体图标来实现。

我注意到在谷歌搜索时我没有看到过的东西.它涉及图像.

如您所见,在加载图片时,Google会显示一个空白容器,其中包含图像尺寸,背景颜色与每张图片的平均颜色相对应.

现在看起来像这样,包含链接元素的内联样式包括bg颜色.

<a style="height: 56px; margin: 0px; width: 59px; left: 0px; background: rgb(109, 128, 70);"></a>

但他们怎么得到它？客户如何知道图片加载前的平均颜色？

编辑: 如果我在任务中只有一个文件,gulp-flatten,问题就会消失.也就是说,如果我的gulp.src只调用一个文件,那么gulp-flatten实际上会删除修改后的路径.我需要能够合并我的供应商css.

gulp.task('libCSS2', function() {
    gulp.src(vendor + '/font-awesome/css/font-awesome.min.css')
        .pipe(flatten())
        .pipe(concatCss('vendor.css'))
        .pipe(gulp.dest(dest + '/css'));
});

在构建时,Gulp正在改变它(来自CSS源文件):

src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0')

到此(CSS构建文件)

 src: url("../../../font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0")

基本上它相对于旧的fontawesome位置添加了一条新路径,我想摆脱它.它为每个 URL都这样做:所以bootstrap url也搞砸了.我相信这是一个默认的gulpfonctionnality.这是我的任务,你可以看到我尝试了gulp-flatten插件但没有成功

/* ===== CSS LIB START ===== */
gulp.task('libCSS', function() {
    // Define libraries locations
    var bootstrapCss = vendor + '/bootstrap/dist/css/bootstrap.min.css';
    var slickCss = vendor + '/slick.js/slick/slick.css';
    var slickCss2 = vendor + '/slick.js/slick/slick-theme.css';
    var materializeCss = vendor + '/materialize/dist/css/materialize.min.css';
    var fontawesomeCSS = vendor + '/font-awesome/css/font-awesome.min.css';

    // Merge libraries
    return gulp.src([bootstrapCss, slickCss, slickCss2, materializeCss, fontawesomeCSS])
        // Concatenate in …

所以我试图在开始时创建一个只显示前10个帖子的页面.

完成这样,它很简单:

<ul>
{% for post in site.posts limit:10 %}
    <li>//show post</li>
{% endfor %}
</ul>

但后来它变得棘手,因为我想添加一个按钮,使下一个10个帖子可见.然后是另外一个用于接下来的10个帖子,直到显示网站上的每个帖子.

基本上,所有帖子都将在索引上生成,因为jekyll是静态的.但是第十篇文章之后的所有内容都将被js和css隐藏.但是,我还需要十点十分地生成这些帖子吗？

所以我试着做那样的事情

{% for post in site.posts limit:10 offset:9%}
     //show post
{% endfor %}

{% for post in site.posts limit:10 offset:19%}
     //show post
{% endfor %}

它仍然很糟糕,因为我必须为每十个帖子写我的循环,所以它非常糟糕.所以基本上我必须创建一个循环,每10个帖子创建我的UL 10帖子.它归结为,我怎样才能每次增加10个偏移？我必须使用变量,但我不确定语法在这里如何工作？

这是我想要的html渲染:

<div id="first-ten"> 
    // ten posts
</div>

<div id="see-more-1">
    // ten posts
</div>

<div id="see-more-2">
    // ten posts
</div>

<div id="see-more-3">
    // last six posts for instance
</div>

到目前为止我没有找到解决方案.这就是我现在想出的:

var gulp = require('gulp');
var concat = require('gulp-concat');
var uncss = require('gulp-uncss');
var minifyCSS = require('gulp-minify-css'); 
var concatCss = require('gulp-concat-css');
var less = require('gulp-less');
var stripCssComments = require('gulp-strip-css-comments');

gulp.task('css', function() {
    return gulp.src('css/*.css')
      .pipe(stripCssComments({all:true}))
      .pipe(concat('plugins.css'))
      .pipe(uncss({html: ['index.html']}))
      .pipe(minifyCSS())
      .pipe(gulp.dest('build/css'));
});
gulp.task('less', function() {
    return gulp.src('css/*.less')
      .pipe(less())
      .pipe(stripCssComments({all:true}))
      .pipe(concat('styles.css'))
      .pipe(uncss({html: ['index.html']}))
      .pipe(minifyCSS())
      .pipe(gulp.dest('build/css'));
});

基本上我正在尝试将.less与.css合并,我只想在构建中使用一个.css.我尝试了不同的语法来实现这种效果,但无济于事,gulp总是给我发一条错误信息.有人有想法吗？