• google纪念牛顿特效


    今天是英国伟大的数学家、物理学家艾萨克·牛顿(Isaac Newton)的诞辰,google为其做了纪念logo。Logo做的符合主题又生动俏皮,下面看图

    niudun0

    图一

    niudun

    图二

    图一中的苹果按照图二中的轨迹掉在地上,具体效果看这里不得不佩服logo设计师的想象力。

    效果看到了,下面看一下是怎么实现的。先看下源码:

    <img src="newton09-apple.png" style="visibility: hidden" alt="" />
    <href="" target="_blank">
     
    <img src="newton09-tree.jpg" width="384" height="138" border="0" alt="艾萨克牛顿" title="艾萨克牛顿" id="logo" style="margin-top: -1.22em" onload="window.lol&&lol();setTimeout(function(){var h=0,v=1,f=document.getElementById('fall'),i=setInterval(function(){if(f){var r=parseInt(f.style.right)+h,b=parseInt(f.style.bottom)-v;f.style.right=r+'px';f.style.bottom=b+'px';if(b>-210){v+=2}else{h=(v>9)?v*0.1:0;v*=(v>9)?-0.3:0}}},25);},2000)"/></a> 
     
    <img alt="gudao" id="fall" src="newton09-apple.png" style="position: relative; right: 248px; bottom: 46px" />
     
    <noscript>
            
    <style type="text/css">#fall{bottom: -210px !important;}</style>
     
    </noscript>

    (注:google的源代码是经过压缩的(原始代码请自行查看google页面源代码),以上代码经过格式处理并有轻微变动)

    看了上面的代码您是不是已经感觉很简单,主要代码就是这一段

    onload="window.lol&&lol();setTimeout(function(){var h=0,v=1,f=document.getElementById('fall'),i=setInterval(function(){if(f){var r=parseInt(f.style.right)+h,b=parseInt(f.style.bottom)-v;f.style.right=r+'px';f.style.bottom=b+'px';if(b>-210){v+=2}else{h=(v>9)?v*0.1:0;v*=(v>9)?-0.3:0}}},25);},2000)"

    可能您会说“不就是一个图片上加了点js动画吗?”。是的,Google就是这样,用简单的技术实现令人惊叹的效果。

    这是我提取出来的源代码,感兴趣的可以研究研究,或者按照自己的需求添加更炫的效果。

  • 相关阅读:
    为什么每天都在学习,生活还是没有任何改善?
    MySql基础汇总
    BeanUtils.copyProperties(待复制对象, 待更新对象) || PropertyUtils.copyProperties(待更新对象, 待复制对象)
    ThreadLocal
    synchronized 锁
    STS报could not find tools.jar in the active JRE
    SpringBoot 定时任务 || cron表达式
    lombok注解
    cron表达式
    Thymeleaf 模板引擎
  • 原文地址:https://www.cnblogs.com/gudao119/p/1638668.html
Copyright © 2020-2023  润新知