How does Google achieve the fading effect on the home page?

后端 未结 7 2178
猫巷女王i
猫巷女王i 2021-01-14 06:27

If you go to google.com, you notice the menu on top slowly appears once you have mouse over the page. I was wondering what does Google use to control the fading effect?

7条回答
  •  花落未央
    2021-01-14 06:57

    Demo: PURE CSS http://jsfiddle.net/6QS2a/1/

    css:

    .item {   
      height:150px;
      width:150px;
      border-radius:100%;
      background:skyblue; 
      -webkit-transition: opacity 1s ease-in-out;
      -moz-transition: opacity 1s ease-in-out;
      -ms-transition: opacity 1s ease-in-out;
      -o-transition: opacity 1s ease-in-out;
      transition: opacity 1s ease-in-out;
        opacity:0.2;
    }
    
    .item:hover {
      opacity: 1;
    }
    

提交回复
热议问题