ly1989124423
ly1989124423

纯css做的安卓开机动画

阅读更多

随着css3的发展，越来越多的负责绚丽的效果可以由纯css来完成了。用css3实现的动画效果丝毫不必js实现的逊色，而且浏览器对css渲染的速度远比js快，大多数时候css的体积也不js小。其中css3中的动画效果可以实现流畅而强大的动画效果，下面我们来看看css3的能量吧。

 

下面介绍一个博主完成的纯css3实现的仿安卓开机动画，可爱的安卓机器人。

效果图：

 

下面给大家提供一个demo可下载地址，先睹为快吧。

查看示例

（新版示例，已兼容safari。）

经过测试，safari没有动画效果的原因是不支持伪元素after,before的动画效果。用DIV替换掉伪元素后safari下运行正常。

老版本的示例和下载地址还保留着，大家可以对比效果。新版本的源码就不贴出来啦，需要学习的直接下载新版源码。

 

   纯css安卓开机动画第二版   下载 (2.3 KB, 1 次)


  查看示例 （请用chrome或firefox浏览，chrome下效果最佳，目前safari下没有效果，正在测试中...）

   纯css安卓开机动画   下载 (4.0 KB, 0 次)

 

特别声明此demo为博主原创，可以下载免费使用。

下面是源码

html:

 
  1.   
  2.   
  3.        
  4.         "Content-Type" content="text/html; charset=UTF-8">   
  5.         android robot   
  6.         "text/css" rel="stylesheet" href="css.css"/>   
  7.        
  8.   
  9. class="android">   
  10.   class="eye">
  
  •   class="ear">
    •   
  •   class="hand">
    •   
  •   class="foot">
    •   
    •   
  •   
  •   

    • css:

     

     
    1. .android{   
    2.   position:relative;   
    3.   width:200px;   
    4.   height:290px;   
    5.   margin:80px auto;   
    6.   background: #A5C63B;   
    7.   border-radius:200px 200px 50px 50px;   
    8.   transition: all .25s ease-out;   
    9.   -webkit-transition: all .25s ease-out;   
    10.   -moz-transition: all .25s ease-out;   
    11.   -o-transition: all .25s ease-out;   
    12.   -ms-transition: all .25s ease-out;   
    13. }   
    14. .android:hover{   
    15.   filter: blur(3px);   
    16.   -webkit-filter: blur(3px);   
    17.   -moz-filter: blur(3px);   
    18.   -o-filter: blur(3px);   
    19.   -ms-filter: blur(3px);   
    20.   transform: scale(1.2) rotate(3deg);   
    21.   -webkit-transform: scale(1.2) rotate(3deg);   
    22.   -moz-transform: scale(1.2) rotate(3deg);   
    23.   -o-transform: scale(1.2) rotate(3deg);   
    24.   -ms-transform: scale(1.2) rotate(3deg);   
    25. }   
    26. .android:after{   
    27.   content:'';   
    28.   position:absolute;   
    29.   display:block;   
    30.   width:200px;   
    31.   height:8px;   
    32.   top:95px;   
    33.   background: #fff;   
    34. }   
    35. .android .eye:after,   
    36. .android .eye:before{   
    37.   content:'';   
    38.   position:absolute;   
    39.   display:block;   
    40.   width:18px;   
    41.   height:18px;   
    42.   top:35px;   
    43.   left:50px;   
    44.   background: #fff;   
    45.   border-radius:15px;   
    46. }   
    47. .android .eye:after{   
    48.   left:auto;   
    49.   rightright:50px;   
    50.   animation:animated-robot-eye-rightright 5s ease 1s infinite alternate;   
    51.   -webkit-animation:animated-robot-eye-rightright 5s ease 1s infinite alternate;   
    52.   -moz-animation:animated-robot-eye-rightright 5s ease 1s infinite alternate;   
    53.   -o-animation:animated-robot-eye-rightright 5s ease 1s infinite alternate;   
    54.   -ms-animation:animated-robot-eye-rightright 5s ease 1s infinite alternate;   
    55. }   
    56. .android .eye:before{   
    57.   animation:animated-robot-eye-rightright 5s ease 1s infinite alternate;   
    58.   -webkit-animation:animated-robot-eye-rightright 5s ease 1s infinite alternate;   
    59.   -moz-animation:animated-robot-eye-rightright 5s ease 1s infinite alternate;   
    60.   -o-animation:animated-robot-eye-rightright 5s ease 1s infinite alternate;   
    61.   -ms-animation:animated-robot-eye-rightright 5s ease 1s infinite alternate;   
    62. }   
    63. @keyframes animated-robot-eye-rightright  
    64.     {   
    65.     0%      {}   
    66.     25%     {transform: translate(-102px,0px);}   
    67.     50%     {}   
    68.     100%    {}   
    69.     }   
    70. @-webkit-keyframes animated-robot-eye-rightright  
    71.     {   
    72.     0%      {}   
    73.     25%     {-webkit-transform: translate(-102px,0px);}   
    74.     50%     {}   
    75.     100%    {}   
    76.     }   
    77. @-moz-keyframes animated-robot-eye-rightright  
    78.     {   
    79.     0%      {}   
    80.     25%     {-moz-transform: translate(-102px,0px);}   
    81.     50%     {}   
    82.     100%    {}   
    83.     }   
    84. @-o-keyframes animated-robot-eye-rightright  
    85.     {   
    86.     0%      {}   
    87.     25%     {-o-transform: translate(-102px,0px);}   
    88.     50%     {}   
    89.     100%    {}   
    90.     }   
    91. @-ms-keyframes animated-robot-eye-rightright  
    92.     {   
    93.     0%      {}   
    94.     25%     {-ms-transform: translate(-102px,0px);}   
    95.     50%     {}   
    96.     100%    {}   
    97.     }   
    98. @keyframes animated-robot-eye-left  
    99.     {   
    100.     0%      {}   
    101.     25%     {transform: translate(-82px,0px);}   
    102.     50%     {}   
    103.     100%    {}   
    104.     }   
    105. @-webkit-keyframes animated-robot-eye-left  
    106.     {   
    107.     0%      {}   
    108.     25%     {-webkit-transform: translate(-82px,0px);}   
    109.     50%     {}   
    110.     100%    {}   
    111.     }   
    112. @-moz-keyframes animated-robot-eye-left  
    113.     {   
    114.     0%      {}   
    115.     25%     {-moz-transform: translate(-82px,0px);}   
    116.     50%     {}   
    117.     100%    {}   
    118.     }   
    119. @-o-keyframes animated-robot-eye-left  
    120.     {   
    121.     0%      {}   
    122.     25%     {-o-transform: translate(-82px,0px);}   
    123.     50%     {}   
    124.     100%    {}   
    125.     }   
    126. @-ms-keyframes animated-robot-eye-left  
    127.     {   
    128.     0%      {}   
    129.     25%     {-ms-transform: translate(-82px,0px);}   
    130.     50%     {}   
    131.     100%    {}   
    132.     }                  
    133. .android:hover .eye:after,   
    134. .android:hover .eye:before{   
    135.   height:3px;   
    136.   top:43px;   
    137. }   
    138. .android .ear:after,   
    139. .android .ear:before{   
    140.   content:'';   
    141.   position:absolute;   
    142.   display:block;   
    143.   width:6px;   
    144.   height:40px;   
    145.   top:-25px;   
    146.   left:50px;   
    147.   background: #A5C63B;   
    148.   border-radius:5px;   
    149.   transform:rotate(-25deg);   
    150.   -webkit-transform:rotate(-25deg);   
    151.   -moz-transform:rotate(-25deg);   
    152.   -o-transform:rotate(-25deg);   
    153.   -ms-transform:rotate(-25deg);   
    154. }   
    155. .android .ear:after{   
    156.   left:auto;   
    157.   rightright:50px;   
    158.   transform:rotate(25deg);   
    159.   -webkit-transform:rotate(25deg);   
    160.   -moz-transform:rotate(25deg);   
    161.   -o-transform:rotate(25deg);   
    162.   -ms-transform:rotate(25deg);   
    163. }   
    164. .android .ear:before{   
    165. animation:animated-robot-ear-rightright 5s ease 1s infinite alternate;   
    166. -webkit-animation:animated-robot-ear-rightright 5s ease 1s infinite alternate;   
    167. -moz-animation:animated-robot-ear-rightright 5s ease 1s infinite alternate;   
    168. -o-animation:animated-robot-ear-rightright 5s ease 1s infinite alternate;   
    169. -ms-animation:animated-robot-ear-rightright 5s ease 1s infinite alternate;   
    170.   
    171. }   
    172. @keyframes animated-robot-ear-rightright  
    173.     {   
    174.     0%      {}   
    175.     25%     {transform:translate(90px,6px) rotate(25deg);}   
    176.     50%     {}   
    177.     100%    {}   
    178.     }   
    179.   
    180. @-webkit-keyframes animated-robot-ear-rightright  
    181.     {   
    182.     0%      {}   
    183.     25%     {-webkit-transform:translate(90px,6px) rotate(25deg);}   
    184.     50%     {}   
    185.     100%    {}   
    186.     }   
    187.   
    188. @-moz-keyframes animated-robot-ear-rightright  
    189.     {   
    190.     0%      {}   
    191.     25%     {-moz-transform:translate(90px,6px) rotate(25deg);}   
    192.     50%     {}   
    193.     100%    {}   
    194.     }   
    195. @-o-keyframes animated-robot-ear-rightright  
    196.     {   
    197.     0%      {}   
    198.     25%     {-o-transform:translate(90px,6px) rotate(25deg);}   
    199.     50%     {}   
    200.     100%    {}   
    201.     }   
    202. @-ms-keyframes animated-robot-ear-rightright  
    203.     {   
    204.     0%      {}   
    205.     25%     {-ms-transform:translate(90px,6px) rotate(25deg);}   
    206.     50%     {}   
    207.     100%    {}   
    208.     }                  
    209. @keyframes animated-robot-ear-left  
    210.     {   
    211.     0%      {transform: translate(-42px,0px);}   
    212.     25%     {}   
    213.     50%     {}   
    214.     100%    {}   
    215.     }   
    216. @-webkit-keyframes animated-robot-ear-left  
    217.     {   
    218.     0%      {-webkit-transform: translate(-42px,0px);}   
    219.     25%     {}   
    220.     50%     {}   
    221.     100%    {}   
    222.     }   
    223. @-moz-keyframes animated-robot-ear-left  
    224.     {   
    225.     0%      {-moz-transform: translate(-42px,0px);}   
    226.     25%     {}   
    227.     50%     {}   
    228.     100%    {}   
    229.     }   
    230. @-o-keyframes animated-robot-ear-left  
    231.     {   
    232.     0%      {-o-transform: translate(-42px,0px);}   
    233.     25%     {}   
    234.     50%     {}   
    235.     100%    {}   
    236.     }   
    237. @-ms-keyframes animated-robot-ear-left  
    238.     {   
    239.     0%      {-ms-transform: translate(-42px,0px);}   
    240.     25%     {}   
    241.     50%     {}   
    242.     100%    {}   
    243.     }                  
    244. .android .hand:after,   
    245. .android .hand:before{   
    246.   content:'';   
    247.   position:absolute;   
    248.   display:block;   
    249.   width:44px;   
    250.   height:150px;   
    251.   top:96px;   
    252.   left:-52px;   
    253.   background: #A5C63B;   
    254.   border-radius:44px;   
    255.   
    256. }   
    257. .android .hand:after{   
    258.   left:auto;   
    259.   rightright:-52px;   
    260. }   
    261.   
    262. .android .hand:after   
    263. {   
    264.   transform-origin:0 0;   
    265.   -webkit-transform-origin:0 0;   
    266.   -moz-transform-origin:0 0;   
    267.   -o-transform-origin:0 0;   
    268.   -ms-transform-origin:0 0;   
    269.   animation:animated-robot-hand-rightright 5s ease 1s infinite alternate;   
    270.   -webkit-animation:animated-robot-hand-rightright 5s ease 1s infinite alternate;   
    271.   -moz-animation:animated-robot-hand-rightright 5s ease 1s infinite alternate;   
    272.   -o-animation:animated-robot-hand-rightright 5s ease 1s infinite alternate;   
    273.   -ms-animation:animated-robot-hand-rightright 5s ease 1s infinite alternate;   
    274. }   
    275. .android .hand:before   
    276. {   
    277.   transform-origin:44px 0;   
    278.   -webkit-transform-origin:44px 0;   
    279.   -moz-transform-origin:44px 0;   
    280.   -o-transform-origin:44px 0;   
    281.   -ms-transform-origin:44px 0;   
    282.   animation:animated-robot-hand-left 5s ease 1s infinite alternate;   
    283.   -webkit-animation:animated-robot-hand-left 5s ease 1s infinite alternate;   
    284.   -moz-animation:animated-robot-hand-left 5s ease 1s infinite alternate;   
    285.   -o-animation:animated-robot-hand-left 5s ease 1s infinite alternate;   
    286.   -ms-animation:animated-robot-hand-left 5s ease 1s infinite alternate;   
    287. }   
    288.   
    289.   
    290. @keyframes animated-robot-hand-rightright  
    291.     {   
    292.     0%      {transform: translate(-52px,0px);}   
    293.     25%     {transform: rotate(0deg);}   
    294.     50%     {transform: rotate(-180deg);}   
    295.     100%    {transform: translate(-10px,120px) rotate(-180deg);}   
    296.     }   
    297. @-webkit-keyframes animated-robot-hand-rightright  
    298.     {   
    299.     0%      {-webkit-transform: translate(-52px,0px);}   
    300.     25%     {-webkit-transform: rotate(0deg);}   
    301.     50%     {-webkit-transform: rotate(-180deg);}   
    302.     100%    {-webkit-transform: translate(-10px,120px) rotate(-180deg);}   
    303.     }   
    304. @-moz-keyframes animated-robot-hand-rightright  
    305.     {   
    306.     0%      {-moz-transform: translate(-52px,0px);}   
    307.     25%     {-moz-transform: rotate(0deg);}   
    308.     50%     {-moz-transform: rotate(-180deg);}   
    309.     100%    {-moz-transform: translate(-10px,120px) rotate(-180deg);}   
    310.     }   
    311. @-o-keyframes animated-robot-hand-rightright  
    312.     {   
    313.     0%      {-o-transform: translate(-52px,0px);}   
    314.     25%     {-o-transform: rotate(0deg);}   
    315.     50%     {-o-transform: rotate(-180deg);}   
    316.     100%    {-o-transform: translate(-10px,120px) rotate(-180deg);}   
    317.     }      
    318. @-ms-keyframes animated-robot-hand-rightright  
    319.     {   
    320.     0%      {-ms-transform: translate(-52px,0px);}   
    321.     25%     {-ms-transform: rotate(0deg);}   
    322.     50%     {-ms-transform: rotate(180deg);}   
    323.     100%    {-ms-transform: translate(-10px,120px) rotate(180deg);}   
    324.     }                  
    325. @keyframes animated-robot-hand-left  
    326.     {   
    327.     0%      {transform: translate(52px,0px);}   
    328.     25%     {transform: rotate(0deg);}   
    329.     50%     {transform: rotate(180deg);}   
    330.     100%    {transform: translate(10px,120px) rotate(180deg);}   
    331.     }   
    332. @-webkit-keyframes animated-robot-hand-left  
    333.     {   
    334.     0%      {-webkit-transform: translate(52px,0px);}   
    335.     25%     {-webkit-transform: rotate(0deg);}   
    336.     50%     {-webkit-transform: rotate(180deg);}   
    337.     100%    {-webkit-transform: translate(10px,120px) rotate(180deg);}   
    338.     }   
    339. @-moz-keyframes animated-robot-hand-left  
    340.     {   
    341.     0%      {-moz-transform: translate(52px,0px);}   
    342.     25%     {-moz-transform: rotate(0deg);}   
    343.     50%     {-moz-transform: rotate(180deg);}   
    344.     100%    {-moz-transform: translate(10px,120px) rotate(180deg);}   
    345.     }   
    346. @-o-keyframes animated-robot-hand-left  
    347.     {   
    348.     0%      {-o-transform: translate(52px,0px);}   
    349.     25%     {-o-transform: rotate(0deg);}   
    350.     50%     {-o-transform: rotate(180deg);}   
    351.     100%    {-o-transform: translate(10px,120px) rotate(180deg);}   
    352.     }   
    353. @-ms-keyframes animated-robot-hand-left  
    354.     {   
    355.     0%      {-ms-transform: translate(52px,0px);}   
    356.     25%     {-ms-transform: rotate(0deg);}   
    357.     50%     {-ms-transform: rotate(-180deg);}   
    358.     100%    {-ms-transform: translate(10px,120px) rotate(-180deg);}   
    359.     }                  
    360.   
    361.   
    362. .android .foot:after,   
    363. .android .foot:before{   
    364.   content:'';   
    365.   position:absolute;   
    366.   display:block;   
    367.   width:44px;   
    368.   height:110px;   
    369.   bottombottom:-90px;   
    370.   left:40px;   
    371.   background: #A5C63B;   
    372.   border-radius:44px;   
    373. }   
    374.   
    375. .android .foot:after   
    376. {   
    377.   transform-origin:0 0;   
    378.   -webkit-transform-origin:0 0;   
    379.   -moz-transform-origin:0 0;   
    380.   -o-transform-origin:0 0;   
    381.   -ms-transform-origin:0 0;   
    382.   animation:animated-robot-foot-rightright 5s ease 1s infinite alternate;   
    383.   -webkit-animation:animated-robot-foot-rightright 5s ease 1s infinite alternate;   
    384.   -moz-animation:animated-robot-foot-rightright 5s ease 1s infinite alternate;   
    385.   -o-animation:animated-robot-foot-rightright 5s ease 1s infinite alternate;   
    386.   -ms-animation:animated-robot-foot-rightright 5s ease 1s infinite alternate;   
    387. }   
    388. .android .foot:before   
    389. {   
    390.   transform-origin:44px 0;   
    391.   -webkit-transform-origin:44px 0;   
    392.   -moz-transform-origin:44px 0;   
    393.   -o-transform-origin:44px 0;   
    394.   -ms-transform-origin:44px 0;   
    395.   animation:animated-robot-foot-left 5s ease 1s infinite alternate;   
    396.   -webkit-animation:animated-robot-foot-left 5s ease 1s infinite alternate;   
    397.   -moz-animation:animated-robot-foot-left 5s ease 1s infinite alternate;   
    398.   -o-animation:animated-robot-foot-left 5s ease 1s infinite alternate;   
    399.   -ms-animation:animated-robot-foot-left 5s ease 1s infinite alternate;   
    400. }   
    401.   
    402. @keyframes animated-robot-foot-rightright  
    403.     {   
    404.     0%      {transform: rotate(0deg);}   
    405.     25%     {transform: rotate(0deg);bottombottom:-120px;}   
    406.     50%     {transform: rotate(-90deg);}   
    407.     100%    {transform: translate(-50px,-120px);}   
    408.     }   
    409. @-webkit-keyframes animated-robot-foot-rightright  
    410.     {   
    411.     0%      {-webkit-transform: rotate(0deg);}   
    412.     25%     {-webkit-transform: rotate(0deg);bottombottom:-120px;}   
    413.     50%     {-webkit-transform: rotate(-90deg);}   
    414.     100%    {-webkit-transform: translate(-50px,-120px);}   
    415.     }   
    416. @-moz-keyframes animated-robot-foot-rightright  
    417.     {   
    418.     0%      {-moz-transform: rotate(0deg);}   
    419.     25%     {-moz-transform: rotate(0deg);bottombottom:-120px;}   
    420.     50%     {-moz-transform: rotate(-90deg);}   
    421.     100%    {-moz-transform: translate(-50px,-120px);}   
    422.     }   
    423. @-o-keyframes animated-robot-foot-rightright  
    424.     {   
    425.     0%      {-o-transform: rotate(0deg);}   
    426.     25%     {-o-transform: rotate(0deg);bottombottom:-120px;}   
    427.     50%     {-o-transform: rotate(-90deg);}   
    428.     100%    {-o-transform: translate(-50px,-120px);}   
    429.     }   
    430. @-ms-keyframes animated-robot-foot-rightright  
    431.     {   
    432.     0%      {-ms-transform: rotate(0deg);}   
    433.     25%     {-ms-transform: rotate(0deg);bottombottom:-120px;}   
    434.     50%     {-ms-transform: rotate(-90deg);}   
    435.     100%    {-ms-transform: translate(-50px,-120px);}   
    436.     }                  
    437. @keyframes animated-robot-foot-left  
    438.     {   
    439.     0%      {transform: rotate(0deg);}   
    440.     25%     {transform: rotate(0deg);bottombottom:-120px;}   
    441.     50%     {transform: rotate(90deg);}   
    442.     100%    {transform: translate(50px,-120px);}   
    443.     }   
    444. @-webkit-keyframes animated-robot-foot-left  
    445.     {   
    446.     0%      {-webkit-transform: rotate(0deg);}   
    447.     25%     {-webkit-transform: rotate(0deg);bottombottom:-120px;}   
    448.     50%     {-webkit-transform: rotate(90deg);}   
    449.     100%    {-webkit-transform: translate(50px,-120px);}   
    450.     }   
    451.   
    452. @-o-keyframes animated-robot-foot-left  
    453.     {   
    454.     0%      {-o-transform: rotate(0deg);}   
    455.     25%     {-o-transform: rotate(0deg);bottombottom:-120px;}   
    456.     50%     {-o-transform: rotate(90deg);}   
    457.     100%    {-o-transform: translate(50px,-120px);}   
    458.     }   
    459. @-moz-keyframes animated-robot-foot-left  
    460.     {   
    461.     0%      {-moz-transform: rotate(0deg);}   
    462.     25%     {-moz-transform: rotate(0deg);bottombottom:-120px;}   
    463.     50%     {-moz-transform: rotate(90deg);}   
    464.     100%    {-moz-transform: translate(50px,-120px);}   
    465.     }   
    466. @-ms-keyframes animated-robot-foot-left  
    467.     {   
    468.     0%      {-ms-transform: rotate(0deg);}   
    469.     25%     {-ms-transform: rotate(0deg);bottombottom:-120px;}   
    470.     50%     {-ms-transform: rotate(90deg);}   
    471.     100%    {-ms-transform: translate(50px,-120px);}   
    472.     }                  
    473. .android .foot:after{   
    474.   left:auto;   
    475.   rightright:40px;   
    476. }  

    你可能感兴趣的:(css,andord,安卓,机器人,开机动画)

    • 感赏日志133 马姐读书
      图片发自App感赏自己今天买个扫地机，以后可以解放出来多看点书，让这个智能小机器人替我工作了。感赏孩子最近进步很大，每天按时上学，认真听课，认真背书，主动认真完成老师布置的作业。感赏自己明白自己容易受到某人的影响，心情不好，每当此刻我就会舒缓，感赏，让自己尽快抽离，想好的一面。感赏儿子今天在我提醒他事情时，告诉我谢谢妈妈对我的提醒我明白了，而不是说我啰嗦，管事情，孩子更懂事了，懂得感恩了。投射父母
    • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
      ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
    • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
      ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
    • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
      Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
    • 每日算法&面试题，大厂特训二十八天——第二十天（树） 肥学 ⚡算法题⚡面试题每日精进java算法数据结构
      目录标题导读算法特训二十八天面试题点击直接资料领取导读肥友们为了更好的去帮助新同学适应算法和面试题，最近我们开始进行专项突击一步一步来。上一期我们完成了动态规划二十一天现在我们进行下一项对各类算法进行二十八天的一个小总结。还在等什么快来一起肥学进行二十八天挑战吧！！特别介绍小白练手专栏，适合刚入手的新人欢迎订阅编程小白进阶python有趣练手项目里面包括了像《机器人尬聊》《恶搞程序》这样的有趣文章
    • webpack图片等资源的处理 dmengmeng
      需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
    • mac 备份android 手机通讯录导入iphone,iphone如何导出通讯录（轻松教你iPhone备份通讯录的方法）... weixin_39762838 mac备份android手机通讯录导入iphone
      在日新月异的手机更替中，换手机已经成为一个非常稀松平常的事情，但将旧手机上面的通讯录导入到新手机还是让不少小伙伴为难，本篇将给大家详细讲解这方面的知识：“苹果手机通讯录怎么导入到新手机”及“安卓手机通讯录导入到新手机”的方法。一、苹果手机通讯录导入到新手机常用方法(SIM卡导入)在苹果手机主频幕上找到“设置”，单击进入设置菜单，下拉菜单列表，点击“邮件、通讯录、日历”，然后找到“导入SIM卡通讯录
    • 基于STM32与Qt的自动平衡机器人：从控制到人机交互的的详细设计流程 极客小张 stm32qt机器人物联网人机交互毕业设计c语言
      一、项目概述目标和用途本项目旨在开发一款基于STM32控制的自动平衡机器人，结合步进电机和陀螺仪传感器，实现对平衡机器人的精确控制。该机器人可以用于教育、科研、娱乐等多个领域，帮助用户了解自动控制、机器人运动学等相关知识。技术栈关键词STM32单片机步进电机陀螺仪传感器AD采集电路Qt人机界面实时数据监控二、系统架构系统架构设计本项目的系统架构设计包括以下主要组件：控制单元:STM32单片机传感器
    • 笋丁网页自动回复机器人V3.0.0免授权版源码 希希分享 软希网58soho_cn源码资源笋丁网页自动回复机器人
      笋丁网页机器人一款可设置自动回复，默认消息，调用自定义api接口的网页机器人。此程序后端语言使用Golang，内存占用最高不超过30MB，1H1G服务器流畅运行。仅支持Linux服务器部署，不支持虚拟主机，请悉知！使用自定义api功能需要有一定的建站基础。源码下载：https://download.csdn.net/download/m0_66047725/89754250更多资源下载：关注我。安
    • 新能源汽车 BMS 学习笔记篇—BMS 基本定义及分类 WPG大大通 其他笔记汽车BMS经验分享新能源电池
      一、BMS定义1、概念：BMS（BatteryManagementSystem）即电池管理系统，其管理对象是二次电池（充电电池或蓄电池），其主要目的是电池的利用率，防止电池出现过度充电和过度放电，可应用于电动汽车、电瓶车、机器人、无人机等图片来源：腾讯网https://new.qq.com《标准普尔警告，电动汽车电池生产面临供应链和地缘政治风险》2、四大功能①感知和测量：检测电池的电压、电流、温度
    • 《HTML 与 CSS—— 响应式设计》 陈在天box htmlcss前端
      一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
    • html+css网页设计 旅游网站首页1个页面 html+css+js网页设计 htmlcss旅游
      html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
    • css设置当字数超过限制后以省略号（...）显示 周bro css前端vuecss3html经验分享
      1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
    • 360前端星计划-动画可以这么玩 马小蜗
      动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
    • css2中的透明 琪33
      .out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}
    • Nginx从入门到实践(三) 听你讲故事啊
      动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
    • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
      Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
    • HBuilderX真机运行安卓APP hello_world_Q android
      前提：1.安卓设备进入开发者模式（设置-系统-关于本机-点击版本号直至出现已进入开发者模式提醒）2.找到开发者选项-打开USB调试3.下图4.下图
    • python可以制作大型游戏_python能做游戏吗-python能开发游戏吗 靖dede python可以制作大型游戏
      python可以写游戏，但不适合。下面我们来分析一下具体原因。用锤子能造汽车吗？谁也没法说不能吧？历史上也确实曾经有些汽车，是用锤子造出来的。但一般来说，还是用工业机器人更合适对吗？比较大型的，使用Python的游戏有两个，一个是《EVE》，还有一个是《文明》。但这仅仅是个例，没有广泛意义。一般来说，用来做游戏的语言，有两种。一是C++。。一是C#。。Python理论上，不仅不适合做游戏，而是只要
    • Python精选200Tips：121-125 AnFany Python200+Tipspython开发语言
      Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例
    • 前端CSS面试常见题 剑亦未配妥 前端面试前端css面试
      边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
    • 爬虫技术抓取网站数据 Bearjumpingcandy 爬虫
      爬虫技术是一种自动化获取网站数据的技术，它可以模拟人类浏览器的行为，访问网页并提取所需的信息。以下是爬虫技术抓取网站数据的一般步骤：发起HTTP请求：爬虫首先会发送HTTP请求到目标网站，获取网页的内容。解析HTML：获取到网页内容后，爬虫会使用HTML解析器解析HTML代码，提取出需要的数据。数据提取：通过使用XPath、CSS选择器或正则表达式等工具，爬虫可以从HTML中提取出所需的数据，如文
    • 基于TRIZ的救援机器人轻量化设计 天行健王春城老师 TRIZ机器人
      在救援机器人设计中，轻量化是一个至关重要的目标，它直接关系到机器人的便携性、运输效率以及在复杂环境中的作业能力。TRIZ理论为我们提供了一套系统化的工具和方法，用于解决设计过程中遇到的各种挑战，特别是在实现轻量化目标时，TRIZ能够帮助我们识别并消除设计中的冗余与低效部分，同时保留或增强其关键功能。具体如深圳天行健企业管理咨询公司下文所述：1.功能分析与矛盾识别TRIZ理论强调对系统功能的深入分析
    • 越长大越孤单 换个时间就好
      “于今之世，孰是真身”。意思是：在今天的社会，谁是真正的自己。第一次有这种感受是在初二初三，当时平凡的我只想平凡的走完我的初中时代，不想有变故，不想多新朋友，也不想成为别人的新朋友。在数着教室里那张被多数人期待的，挂在教室后方的钟表，铃声响起结束一天百般无聊的课程，我像个机器人麻木做着和往常一样的动作，拿着装满书的书包，看着空荡荡又充满气味的凳阁，再一次想起我为什么拿着所有的书回去。直到肩膀酸痛，
    • 【机器人建模和控制】读书笔记 Piccab0o 机器人
      机器人建模和控制——马克·斯庞A.x10=x1∙x0x^0_1=x_1\bulletx_0x10=x1∙x0，其实就是：1）x1x_1x1轴向量在O0O_0O0系下的坐标2）在x0x_0x0轴上的投影3）坐标变换矩阵的R10R_1^0R10的第一个元素B.点p在o1x1y1z1o_1x_1y_1z_1o1x1y1z1系下的坐标p1p^1p1可以表示为：p=ux1+vy1+wz1p=ux_1+vy_
    • 协作机器人关节模组总结 雪花飞龙 协作机器人本体结构
      协作机器人关节模块总结关节模组介绍关节模组一般部件：通讯协议泰科机器人关节模组RJS系列RJS-II系列RJU系列SHD系列RGM机器人关节模组关节模组介绍协作机器人的技术已经相对成熟，如何快速生产协作机器人？如何降低机器人成本？等问题是现在研究的一个重点。协作机器人的关节功能相对独立，可以做成一个独立模块，只需要提供电源和控制信号就好。关节模组一般部件：1.减速器：谐波减速器是最常用的减速器，此
    • Matlab在工业机器人中的运用,基于MATLAB的工业机器人建模与仿真.docx weixin_34518801
      摘要：机器人运动系统作为机器人系统中最重要的组成部分之一，其重要性不言而喻，因为它影响着机器人的主要性能，因此为了提高机器人的质量，对机器人进行运动学分析和仿真是不可或缺的。本次毕业设计主要对KUKA机器人的三维仿真进行了一系列的分析，主要是以下几个内容：(1)研究了机器人运动学仿真的背景意义及发展趋势。(2)通过对齐次坐标变换理论的研究,说明了KUKA机器人结构及参数,并且建立了相应的D-H参数
    • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
      前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
    • 完美机器人 负债的宝贝
      白叶的父母又吵架了，白叶感觉很痛苦，要是他的父母不吵架就好了。要是他的父母和他想的一样完美就好了。“你想要完美父母吗？我可以帮你实现。”白叶的手机里突然出现了这样一则短信，把白叶吓了一跳。一定是有人搞的恶作剧，白叶并不理会这条短信。但是第二天奇怪的事情就发生了。明天开一篇脑洞，我先起个头，剩下的随大家编✧٩(ˊωˋ*)و✧
    • ajax的同源策略 Spring_Bear
      问题之前帮忙做的广告机器人数据提交的部分，利用ajax的XMLHTTPRequest提交到服务器的时候总是报错，错误类型是不同源。想到浏览器中的同源策略，明白了问题的原因。同源策略简单的说，就是浏览器不允许两个不同源的域名之间交换信息，那么这里就有两个问题。一是，什么信息不允许交换；二是，怎样算不同源。阮一峰的这篇博客浏览器同源政策及其规避方法其实已经介绍得比较清楚。引用一下，第一个问题：目前，如
    • rust的指针作为函数返回值是直接传递，还是先销毁后创建？ wudixiaotie 返回值
       这是我自己想到的问题，结果去知呼提问，还没等别人回答， 我自己就想到方法实验了。。 fn main() { let mut a = 34; println!("a's addr:{:p}", &a); let p = &mut a; println!("p's addr:{:p}", &a
    • java编程思想 -- 数据的初始化 百合不是茶 java数据的初始化
        1.使用构造器确保数据初始化      /* *在ReckInitDemo类中创建Reck的对象 */ public class ReckInitDemo { public static void main(String[] args) { //创建Reck对象 new Reck(); } }
    • [航天与宇宙]为什么发射和回收航天器有档期 comsci
             地球的大气层中有一个时空屏蔽层,这个层次会不定时的出现,如果该时空屏蔽层出现,那么将导致外层空间进入的任何物体被摧毁,而从地面发射到太空的飞船也将被摧毁...        所以,航天发射和飞船回收都需要等待这个时空屏蔽层消失之后,再进行 &
    • linux下批量替换文件内容 商人shang linux替换
      1、网络上现成的资料 　　格式: sed -i "s/查找字段/替换字段/g" `grep 查找字段 -rl 路径` 　　linux sed 批量替换多个文件中的字符串 　　sed -i "s/oldstring/newstring/g" `grep oldstring -rl yourdir` 　　例如：替换/home下所有文件中的www.admi
    • 网页在线天气预报 oloz 天气预报
      网页在线调用天气预报 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transit
    • SpringMVC和Struts2比较 杨白白 springMVC
      1. 入口 spring mvc的入口是servlet，而struts2是filter（这里要指出，filter和servlet是不同的。以前认为filter是servlet的一种特殊），这样就导致了二者的机制不同，这里就牵涉到servlet和filter的区别了。 参见：http://blog.csdn.net/zs15932616453/article/details/8832343 2
    • refuse copy, lazy girl! 小桔子 copy
             妹妹坐船头啊啊啊啊！都打算一点点琢磨呢。文字编辑也写了基本功能了。。今天查资料，结果查到了人家写得完完整整的。我清楚的认识到： 1.那是我自己觉得写不出的高度 2.如果直接拿来用，很快就能解决问题 3.然后就是抄咩~~ 4.肿么可以这样子，都不想写了今儿个，留着作参考吧！拒绝大抄特抄，慢慢一点点写！  
    • apache与php整合 aichenglong php apache web
      一  apache web服务器 1 apeche web服务器的安装   1)下载Apache web服务器   2)配置域名(如果需要使用要在DNS上注册)   3)测试安装访问http://localhost/验证是否安装成功 2 apache管理   1)service.msc进行图形化管理   2)命令管理，配
    • Maven常用内置变量 AILIKES maven
      Built-in properties ${basedir} represents the directory containing pom.xml ${version} equivalent to ${project.version} (deprecated: ${pom.version}) Pom/Project properties Al
    • java的类和对象 百合不是茶 JAVA面向对象 类 对象
      java中的类：     java是面向对象的语言，解决问题的核心就是将问题看成是一个类，使用类来解决   java使用 class 类名   来创建类 ，在Java中类名要求和构造方法，Java的文件名是一样的   创建一个A类： class A{ }   java中的类：将某两个事物有联系的属性包装在一个类中，再通
    • JS控制页面输入框为只读 bijian1013 JavaScript
      在WEB应用开发当中，增、删除、改、查功能必不可少，为了减少以后维护的工作量，我们一般都只做一份页面，通过传入的参数控制其是新增、修改或者查看。而修改时需将待修改的信息从后台取到并显示出来，实际上就是查看的过程，唯一的区别是修改时，页面上所有的信息能修改，而查看页面上的信息不能修改。因此完全可以将其合并，但通过前端JS将查看页面的所有信息控制为只读，在信息量非常大时，就比较麻烦。  
    • AngularJS与服务器交互 bijian1013 JavaScriptAngularJS$http
              对于AJAX应用（使用XMLHttpRequests）来说，向服务器发起请求的传统方式是：获取一个XMLHttpRequest对象的引用、发起请求、读取响应、检查状态码，最后处理服务端的响应。整个过程示例如下： var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange
    • [Maven学习笔记八]Maven常用插件应用 bit1129 maven
      常用插件及其用法位于：http://maven.apache.org/plugins/   1. Jetty server plugin 2. Dependency copy plugin 3. Surefire Test plugin 4. Uber jar plugin           1. Jetty Pl
    • 【Hive六】Hive用户自定义函数(UDF) bit1129 自定义函数
      1. 什么是Hive UDF Hive是基于Hadoop中的MapReduce，提供HQL查询的数据仓库。Hive是一个很开放的系统，很多内容都支持用户定制，包括： 文件格式：Text File，Sequence File 内存中的数据格式： Java Integer/String, Hadoop IntWritable/Text 用户提供的 map/reduce 脚本：不管什么
    • 杀掉nginx进程后丢失nginx.pid，如何重新启动nginx ronin47 nginx 重启 pid丢失
      nginx进程被意外关闭，使用nginx -s reload重启时报如下错误：nginx: [error] open() “/var/run/nginx.pid” failed (2: No such file or directory)这是因为nginx进程被杀死后pid丢失了，下一次再开启nginx -s reload时无法启动解决办法：nginx -s reload 只是用来告诉运行中的ng
    • UI设计中我们为什么需要设计动效 brotherlamp UIui教程ui视频ui资料ui自学
      随着国际大品牌苹果和谷歌的引领，最近越来越多的国内公司开始关注动效设计了，越来越多的团队已经意识到动效在产品用户体验中的重要性了，更多的UI设计师们也开始投身动效设计领域。 但是说到底，我们到底为什么需要动效设计？或者说我们到底需要什么样的动效？做动效设计也有段时间了，于是尝试用一些案例，从产品本身出发来说说我所思考的动效设计。 一、加强体验舒适度 嗯，就是让用户更加爽更加爽的用你的产品。
    • Spring中JdbcDaoSupport的DataSource注入问题 bylijinnan javaspring
      参考以下两篇文章： http://www.mkyong.com/spring/spring-jdbctemplate-jdbcdaosupport-examples/ http://stackoverflow.com/questions/4762229/spring-ldap-invoking-setter-methods-in-beans-configuration Sprin
    • 数据库连接池的工作原理 chicony 数据库连接池
             随着信息技术的高速发展与广泛应用，数据库技术在信息技术领域中的位置越来越重要，尤其是网络应用和电子商务的迅速发展，都需要数据库技术支持动 态Web站点的运行，而传统的开发模式是：首先在主程序（如Servlet、Beans）中建立数据库连接；然后进行SQL操作，对数据库中的对象进行查 询、修改和删除等操作；最后断开数据库连接。使用这种开发模式，对
    • java 关键字 CrazyMizzz java
      关键字是事先定义的，有特别意义的标识符，有时又叫保留字。对于保留字，用户只能按照系统规定的方式使用，不能自行定义。 Java中的关键字按功能主要可以分为以下几类：    （1）访问修饰符       public,private,protected       p
    • Hive中的排序语法 daizj 排序hiveorder byDISTRIBUTE BYsort by
      Hive中的排序语法 2014.06.22 ORDER BY hive中的ORDER BY语句和关系数据库中的sql语法相似。他会对查询结果做全局排序，这意味着所有的数据会传送到一个Reduce任务上，这样会导致在大数量的情况下，花费大量时间。 与数据库中 ORDER BY 的区别在于在hive.mapred.mode = strict模式下，必须指定 limit 否则执行会报错。
    • 单态设计模式 dcj3sjt126com 设计模式
        单例模式（Singleton）用于为一个类生成一个唯一的对象。最常用的地方是数据库连接。 使用单例模式生成一个对象后，该对象可以被其它众多对象所使用。 <?phpclass Example{    // 保存类实例在此属性中    private static&
    • svn locked dcj3sjt126com Lock
      post-commit hook failed (exit code 1) with output: svn: E155004: Working copy 'D:\xx\xxx' locked svn: E200031: sqlite: attempt to write a readonly database svn: E200031: sqlite: attempt to write a
    • ARM寄存器学习 e200702084 数据结构C++cC#F#
      无论是学习哪一种处理器，首先需要明确的就是这种处理器的寄存器以及工作模式。     ARM有37个寄存器，其中31个通用寄存器，6个状态寄存器。 1、不分组寄存器（R0-R7）     不分组也就是说说，在所有的处理器模式下指的都时同一物理寄存器。在异常中断造成处理器模式切换时，由于不同的处理器模式使用一个名字相同的物理寄存器，就是
    • 常用编码资料 gengzg 编码
      List<UserInfo> list=GetUserS.GetUserList(11); String json=JSON.toJSONString(list); HashMap<Object,Object> hs=new HashMap<Object, Object>(); for(int i=0;i<10;i++) {
    • 进程 vs. 线程 hongtoushizi 线程linux进程
      我们介绍了多进程和多线程，这是实现多任务最常用的两种方式。现在，我们来讨论一下这两种方式的优缺点。 首先，要实现多任务，通常我们会设计Master-Worker模式，Master负责分配任务，Worker负责执行任务，因此，多任务环境下，通常是一个Master，多个Worker。 如果用多进程实现Master-Worker，主进程就是Master，其他进程就是Worker。 如果用多线程实现
    • Linux定时Job：crontab -e 与 /etc/crontab 的区别 Josh_Persistence linuxcrontab
      一、linux中的crotab中的指定的时间只有5个部分：* * * * * 分别表示：分钟，小时，日，月，星期，具体说来： 第一段 代表分钟 0—59 第二段 代表小时 0—23 第三段 代表日期 1—31 第四段 代表月份 1—12 第五段 代表星期几，0代表星期日 0—6   如： */1 * * * *   每分钟执行一次。 *
    • KMP算法详解 hm4123660 数据结构C++算法字符串KMP
           字符串模式匹配我们相信大家都有遇过，然而我们也习惯用简单匹配法（即Brute-Force算法)，其基本思路就是一个个逐一对比下去，这也是我们大家熟知的方法，然而这种算法的效率并不高，但利于理解。       假设主串s="ababcabcacbab",模式串为t="
    • 枚举类型的单例模式 zhb8015 单例模式
      E.编写一个包含单个元素的枚举类型[极推荐]。代码如下： public enum MaYun {himself; //定义一个枚举的元素，就代表MaYun的一个实例private String anotherField;MaYun() {//MaYun诞生要做的事情//这个方法也可以去掉。将构造时候需要做的事情放在instance赋值的时候：/** himself = MaYun() {*
    • Kafka+Storm+HDFS ssydxa219 storm
      cd /myhome/usr/stormbin/storm nimbus &amp;bin/storm supervisor &amp;bin/storm ui &amp;Kafka+Storm+HDFS整合实践kafka_2.9.2-0.8.1.1.tgzapache-storm-0.9.2-incubating.tar.gzKafka安装配置我们使用3台机器搭建Kafk
    • Java获取本地服务器的IP 中华好儿孙 javaWeb获取服务器ip地址
      System.out.println("getRequestURL:"+request.getRequestURL()); System.out.println("getLocalAddr:"+request.getLocalAddr()); System.out.println("getLocalPort:&quo
    按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他