Question

只是想知道它是否可能，但我试图在加载时制作我的页面，从黑白过渡到可能是4秒钟的颜色 - 整个页面，文本，div，图像，一切。

我制作了一张黑白图像，过渡到彩色版本，悬停会与此类似吗？但是使用包装器？

img.desaturate { 
   animation: toColour 10s;
}

@keyframes toColour {
    0%    { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
    25%   { -webkit-filter: grayscale(75%); filter: grayscale(75%); }
    50%   { -webkit-filter: grayscale(50%); filter: grayscale(50%); }
    50%   { -webkit-filter: grayscale(25%); filter: grayscale(25%); }
    100%  { -webkit-filter: grayscale(0%); filter: grayscale(0%); }
}

或者让每件事都用颜色单独过渡？

只有css有更好的方式或可能的方法吗？

提前致谢

Answer 1

我不明白为什么不，只需在你的包装中使用你的动画：

jsFiddle

CODE SNIPPET

package com.example.bmi_calculate;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.os.PersistableBundle;
import android.view.View;
import android.widget.EditText;
import android.widget.TextView;

public class ThirdActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.third);

        Intent intent = getIntent();

        int tall = intent.getIntExtra("tall", 0);
        int kg = intent.getIntExtra("kg", 0);
        double result = intent.getDoubleExtra("result",0);

        TextView tv1 = (TextView) findViewById(R.id.textView1);
        TextView tv2 = (TextView) findViewById(R.id.textView2);
        TextView tv3 = (TextView)findViewById(R.id.textView3);
        tv1.setText("" + tall);
        tv2.setText("" + kg);
        tv3.setText(""+String.valueOf(result));
    }
}

@keyframes toColour {
  0% {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
  }
  25% {
    -webkit-filter: grayscale(75%);
    filter: grayscale(75%);
  }
  50% {
    -webkit-filter: grayscale(50%);
    filter: grayscale(50%);
  }
  50% {
    -webkit-filter: grayscale(25%);
    filter: grayscale(25%);
  }
  100% {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
  }
}
.wrapper {
  background-color: royalblue;
  animation: toColour 4s;
}
p {
  color: cyan;
}

Answer 2

除非你尝试，否则你永远不会知道。看看这个

＆＃13;

.desaturate, .desaturate *  { 
   animation: toColour 7s;
}

@keyframes toColour {
    0%    { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
    25%   { -webkit-filter: grayscale(75%); filter: grayscale(75%); }
    50%   { -webkit-filter: grayscale(50%); filter: grayscale(50%); }
    50%   { -webkit-filter: grayscale(25%); filter: grayscale(25%); }
    100%  { -webkit-filter: grayscale(0%); filter: grayscale(0%); }
}

＆＃13;

<div class="desaturate">
  <img src="http://images.freeimages.com/images/previews/476/green-fly-on-orange-flower-1366361.jpg" alt="" width="200" height="200"/>
</div>

＆＃13;

CSS过渡html页面从黑白到彩色与CSS？

2 个答案: