小编use*_*064的帖子

Custom.css已停止在32.0.1700.76 m谷歌Chrome更新中工作

我从这个网站上为Google Developer Tools使用了一些主题:http://devthemez.com/themes/chrome-developer-tools

但是,在32.0.1700.76米更新后,所有主题都已停止工作.

我需要做些什么才能让他们再次工作?

google-chrome developer-tools css3 google-chrome-devtools

50
推荐指数
2
解决办法
2万
查看次数

尝试重新创建像Stripe一样的摇动动画

我正在尝试重新创建负面摇晃动画,就像Strike在付款框中使用的那样,当有一些表单填充错误时.

我基本上复制了它动画关键帧,但在我的使用中,它的工作方式不同.

我的版本:

http://codepen.io/FelipeMartinin/pen/NGrXvR

条纹版本:

https://stripe.com/docs/checkout(点击"Pay with Card"按钮,点击"Pay"后不填写输入以查看动画)

如果你注意到,条纹动画有一个3D运动效果,在我的版本中,该框只能水平抖动.即使使用相同的关键帧.

按照关键帧下方进行操作

@keyframes panelShakeAnimation {
  0 {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0)
  }

  12.5% {
    -webkit-transform: translateX(-6px) rotateY(-5deg);
    -moz-transform: translateX(-6px) rotateY(-5deg);
    -ms-transform: translateX(-6px) rotateY(-5deg);
    -o-transform: translateX(-6px) rotateY(-5deg);
    transform: translateX(-6px) rotateY(-5deg)
  }

  37.5% {
    -webkit-transform: translateX(5px) rotateY(4deg);
    -moz-transform: translateX(5px) rotateY(4deg);
    -ms-transform: translateX(5px) rotateY(4deg);
    -o-transform: translateX(5px) rotateY(4deg);
    transform: translateX(5px) rotateY(4deg)
  }

  62.5% {
    -webkit-transform: translateX(-3px) rotateY(-2deg);
    -moz-transform: translateX(-3px) rotateY(-2deg);
    -ms-transform: translateX(-3px) rotateY(-2deg);
    -o-transform: translateX(-3px) rotateY(-2deg);
    transform: translateX(-3px) rotateY(-2deg) …
Run Code Online (Sandbox Code Playgroud)

css animation css3 keyframe

4
推荐指数
1
解决办法
1037
查看次数

使用 CSS 的曲线形状

在一个布局只不过是正方形和网格的世界里,我发现了这个布局概念,并且我在第一部分中的那个弯曲层是一个创造不同东西的惊人想法:

https://www.behance.net/gallery/28594475/Accrosport

但现在我怀疑了。我怎样才能用 css 做到这一点?任何人都知道如何做到这一点并重新创建一个简单的示例?我尝试使用 border-radius 重新创建它,但它有点奇怪:

http://codepen.io/anon/pen/GpRQaZ

css:

.curved {
  position: relative;
  width: 100%;
  height: 600px;
  margin: 20px 0;
  background-image: url('http://www.erikaalkblog.com.br/wp-content/uploads/2015/07/yoga2.jpg');
  background-size: cover;
  border-radius: 250% 250% 250% 250% / 0% 0% 20% 20%;
  color: white;
  text-align: center;
  text-indent: .1em;
}
Run Code Online (Sandbox Code Playgroud)

提前致谢

css css-shapes

1
推荐指数
1
解决办法
5106
查看次数

CSS注入不兼容Gulp + Browsersync

我是一个新人,我曾经和咕噜咕噜一起工作,现在我有一些麻烦.

其中最重要的是自动CSS注入,这不是woking,经过很长一段时间后我不知道为什么.谁能帮我?并且还给我一些关于我的配置的建议?提前致谢!

'use strict';

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    csso = require('gulp-csso'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    clean = require('gulp-clean'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    sourcemaps = require('gulp-sourcemaps'),
    livereload = require('gulp-livereload'),
    lr = require('tiny-lr'),
    server = lr();


var browserSync = require('browser-sync').create();
var reload = browserSync.reload;

gulp.task('vendors', function() {
  return gulp.src('./assets/js/vendors/*.js')
    .pipe(concat('vendors.js'))
    .pipe(gulp.dest('./assets/js/'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('./assets/js/'))
    .pipe(browserSync.stream())
    .pipe(notify({ message: 'Vendors task complete' …
Run Code Online (Sandbox Code Playgroud)

javascript gulp browser-sync

1
推荐指数
1
解决办法
3561
查看次数