chrome浏览器首页的左上角的LOGO的动画怎么实现的~

Posted 2023-03-19

http://www.google.com/intl/zh-CN/chrome/
当鼠标移上去的时候就会出现一个动画，求大神指导~~
谁能把js函数实现，用CSS3也可以

这部分的源代码，很简洁明了。

关键是这一块，一个水波纹散开的效果

style=“-webkit-mask: -webkit-gradient(radial, 17 17, 123, 17 17, 138, from(rgb(0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.2)), to(rgb(0, 0, 0)));”

帮到你的话还请不吝采纳，谢谢。

追问

我知道这个，我就是想知道如何实现这个 函数

参考技术A 就是那个圆一直变大，多出来的部分被砍掉了，所以后面只看到是个竖在字上面移动。
<div id="test" style="background: #000;width: 123px; height: 40px;"></div>
<script>
var isAnim = false;
var timer;
var delay = 0; // 修改这个让效果减速
var start = 0;
var test = document.getElementById('test');
var end = parseInt(test.style.width);
function anim() 
  if (start > end) 
    clearTimeout(timer);
    start = 0;
    isAnim = false;
   else 
    test.style.webkitMaskImage = "-webkit-gradient(radial, 17 17, " + start + ", 17 17, " + (start + 15) + ", from(rgba(0, 0, 0, 1)),color-stop(0.5, rgba(0, 0, 0, 0.2)),to(rgba(0, 0, 0, 1)))";
    timer = setTimeout(anim, delay);
    start++;
  

test.onmouseover = function () 
  if (!isAnim) 
    isAnim = true;
    anim();
  

</script>

追问

感觉比较少这个属性webkitMask的资料

追答

我也是第一次看见，好像只是一个遮罩层的样子。

本回答被提问者采纳 参考技术B <img alt="Chrome" data-g-event="nav-logo" data-g-label="consumer-home" id="logo" src="/intl/zh-CN/chrome/assets/common/images/chrome_logo_2x.png" style="-webkit-mask: -webkit-gradient(radial, 17 17, 123, 17 17, 138, from(rgb(0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.2)), to(rgb(0, 0, 0)));">
这是这个图片的标签，这个应该只有在chrome浏览器才有这个效果，其他浏览器不支持 参考技术C

自己写的例子, 代码请自行研究, 如果不懂可以追问