css的动画 我就是我 2022-09-07 06:25 148阅读 0赞 ![在这里插入图片描述][b1db4f58c7ac4bc0abca5d50ea86b5c8.png] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 1] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 2] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 3] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 4] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 5]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 6] @keyframes叫做关键帧的意思 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 7] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 8] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 9] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 10]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 11] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 12]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 13] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 14] ![在这里插入图片描述][622eaeea94724fb7bf6021ed607a99af.png] infinite是无限循环的意思 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 15]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 16] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 17]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 18] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 19] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 20] 3个圆圈加时间间隔慢慢的放大 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 21] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 22] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 23] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 24] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 25] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 26] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 27] ![在这里插入图片描述][1c59597c833c40e599e1a9b164509d24.png] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 28] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 29] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .map { position: relative; width: 1200px; height: 900px; background-image: url(../img/map.png); } .city { position: absolute; top: 335px; right: 411px; color: #fff; } .dotted { width: 8px; height: 9px; background-color: skyblue; border-radius: 50%; transition: all 1s; } .city div[class^='pluse'] { position: absolute; top: 50%; left: 50%; /* 后面的translate没写,找了20分钟 */ transform: translate(-50%,-50%); width: 8px; height: 8px; /* 前面两个是右移和下移的意思 */ /* 没有给边框给的是盒子的阴影 */ box-shadow: 0 0 12px blue; border-radius: 50%; /* 找了10分钟pluse写错了 */ /* animation: pulse 1.2s linear infinite; */ animation: pluse 1.2s linear infinite; } /* 下面设置了还没有效果是因为权重的问题 */ /* div .city .pluse2 { animation-delay: 0.4s; } */ .pluse2::after { content: 'nihao'; animation-delay: 0.4s; } /* div .city .pluse3 { animation-delay: 0.8s; } */ @keyframes pluse { 0% { } 70% { width: 40px; height: 40px; /* 透明度也没有变 */ opacity: 1; } 100% { width: 70px; height: 70px; opacity: 0; } } /* .dotted:hover { transform: scale(3); } */ </style> </head> <body> <div class="map"> <div class="city"> <div class="dotted"></div> <div class="pluse1"></div> <div class="pluse2"></div> <div class="pluse3"></div> </div> </div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* .one { width: 200px; height: 200px; border: 1px solid red; padding: 2px; } */ .two div { width: 200px; height: 200px; border: 1px solid red; padding: 2px; /* background-color: red; */ } /* div div div::after { content: '你好'; background-color: green; } */ .three::after { content: '我可以'; background-color: skyblue; border: 1px solid black; padding: 5px; } .two div { background-color: green; } </style> </head> <body> <div class="one"> <div class="two"> <div class="three"></div> </div> </div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { height: 200px; width: 200px; background-color: blue; animation: move 5s; } @keyframes move { 0% { transform: translate(0,0); } 100% { transform: translate(1000px,0); } } </style> </head> <body> <div></div> </body> </html> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 30]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 31] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 32] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 33] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 34]![在这里插入图片描述][f21221489e9c45fe85106c6ab6c80878.png] 做一个打字机效果 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 35]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 36] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 37] [b1db4f58c7ac4bc0abca5d50ea86b5c8.png]: /images/20220829/969f7ed02780453992bdde57cd33454c.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70]: /images/20220829/99902aef9f4f494bba661ecad1b57f11.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 1]: /images/20220829/ad35ba3e014849d9959db4a05e065308.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 2]: /images/20220829/ca0ada3034d64b1c9858779466cfd47f.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 3]: /images/20220829/2351d1f174634a08aab4df71133f8d5a.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 4]: /images/20220829/06669356c02c49dd8b3022d8dda649f1.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/068dc22b736943e9bc66a8f066d31813.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA==,size_16,color_FFFFFF,t_70 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 6]: /images/20220829/06330c20af2a491e89b24408a71b6710.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 7]: /images/20220829/44069d5f7ed04aa8b303b473e65e7fa3.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 8]: /images/20220829/9fb9a040bfca4b80a57c1d2fb07c7017.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 9]: /images/20220829/3b8106dfbefd4e28a8e873909fb516b8.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/e6cf26f5b7ae4441882436915e23ab3b.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA==,size_16,color_FFFFFF,t_70 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 11]: /images/20220829/62da327a508348cba95797507114890b.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/359ee31853354f70a6288e6dabe15d6d.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA==,size_16,color_FFFFFF,t_70 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 13]: /images/20220829/8d41c816e06546529651b9e9662bce8d.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 14]: /images/20220829/4372d836b2464536b88649b6922aae59.png [622eaeea94724fb7bf6021ed607a99af.png]: /images/20220829/61b23a5a191e44758ec62e84a0188051.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/1e5b4ce7645c488e8187c46c44d8905d.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA==,size_16,color_FFFFFF,t_70 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 16]: /images/20220829/6373d439fce64026b843d293d6d252ce.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 17]: https://img-blog.csdnimg.cn/9789c90811334197b7d9c092624d6761.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA==,size_16,color_FFFFFF,t_70 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 18]: /images/20220829/e03c7e8f379f4d3eb5f14bafd7dacc3d.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 19]: /images/20220829/046891c63bfb4852b06581dc5c19c448.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 20]: /images/20220829/cf09f1ee0dce4d5b9ee52218cc2efeae.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 21]: /images/20220829/72695fbcb8664f23933c07c1ec6f114a.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 22]: /images/20220829/fc908db4538e45f795e05ce16cf0eed7.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 23]: /images/20220829/b3d8f93e059749d0a7061f2b64c40f53.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 24]: /images/20220829/9601cc7eeff8407096a5d2a3be5598ee.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 25]: /images/20220829/ac58ab6f45a048c4aeea2d80ec5dc470.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 26]: /images/20220829/6e9194c8c0bc46bca832dd99d4cb95d9.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 27]: /images/20220829/fd5aec63de5a4cfda5c4fe7b5b3c2625.png [1c59597c833c40e599e1a9b164509d24.png]: /images/20220829/d7d03d2eb3994b4ea3095bafa18b8404.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 28]: /images/20220829/5644aa595ddd4851b0bfe92981cd7d5c.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 29]: /images/20220829/7e68f5fd197c4d44952a41fa6043ffd1.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 30]: https://img-blog.csdnimg.cn/a3ebc4c26ade43d3974e72cca1bc6be0.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA==,size_16,color_FFFFFF,t_70 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 31]: /images/20220829/a935633b52ef45fc8f7f0528625a83aa.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 32]: /images/20220829/fd89c0a174ad4743ba5fdc26968d2d7e.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 33]: /images/20220829/23252034bcd54d8b877a9c34d1f5fe34.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 34]: https://img-blog.csdnimg.cn/c4de52516f5e4542b0cb09279980c7a3.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA==,size_16,color_FFFFFF,t_70 [f21221489e9c45fe85106c6ab6c80878.png]: /images/20220829/8310ed7955ad476c914750ccc1ce3df3.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 35]: https://img-blog.csdnimg.cn/0fc7e75043d24bee8d870f84aa35ecc0.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA==,size_16,color_FFFFFF,t_70 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 36]: /images/20220829/0fc8ba2edb1745929e829c423937e347.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 37]: /images/20220829/0657771c2a404a41bf72840b26b194d6.png
相关 【CSS3】CSS3 动画 ① ( CSS3 动画简介 | CSS3 动画实现步骤 | 动画定义 | 代码示例 ) 文章目录 一、CSS3 动画简介 二、CSS3 动画实现步骤 三、动画定义 四、代码示例 一、CSS3 动画简介 我不是女神ヾ/ 2023年10月14日 15:47/ 0 赞/ 168 阅读
相关 CSS动画 效果图: ![20210420183258301.gif][] 实现效果描述: 子元素相对父元素水平垂直居中并重复循环放大缩小 实现代码: <!DOCTYPE Dear 丶/ 2023年01月14日 12:58/ 0 赞/ 177 阅读
相关 css 动画 上下滑动 html <div class="kaiqi">点击开启</div> css .kaiqi { color: ffffff; 川长思鸟来/ 2022年11月05日 05:24/ 0 赞/ 157 阅读
相关 css动画 在CSS中主要通过@keyframes和animation来实现的: @keyframes制定了一个元素的css样式变化的方式,也就是通过css央视的逐步改变,让它动起来,也 怼烎@/ 2022年10月29日 13:20/ 0 赞/ 383 阅读
相关 css的动画 ![在这里插入图片描述][b1db4f58c7ac4bc0abca5d50ea86b5c8.png] ![在这里插入图片描述][watermark_type_ZmFuZ3p 我就是我/ 2022年09月07日 06:25/ 0 赞/ 149 阅读
相关 CSS动画 CSS3 动画 通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。 CSS3 @keyframes Bertha 。/ 2022年06月07日 02:51/ 0 赞/ 270 阅读
相关 css动画 纯CSS3实现的8种Loading动画效果<div class="load1" > <div class="loader">加载中</div> 系统管理员/ 2022年06月05日 08:42/ 0 赞/ 229 阅读
相关 css动画 动画移动时间 animation: move 13s; 一直移动,无限循环 animation-iteration-count: infinite; 从A移动到 叁歲伎倆/ 2022年06月05日 00:53/ 0 赞/ 247 阅读
相关 CSS动画 摘自阮一峰老师的博客 [http://www.ruanyifeng.com/blog/2014/02/css\_transition\_and\_animation.html] 喜欢ヅ旅行/ 2022年05月10日 00:54/ 0 赞/ 232 阅读
相关 CSS-动画 前言 本文主要内容: 过渡:transition 2D 转换 transform(scale,translate,rotate) 冷不防/ 2022年05月03日 09:30/ 0 赞/ 232 阅读
还没有评论,来说两句吧...