在css中,可以使用animation属性和@keyframes规则给img图片元素设置上下浮动动画效果来让图案上下浮动;动画的快慢速度可以通过元素高度与animation中的秒数去调整。
本教程操作环境:windows7系统、html5&&css3版本,dell g3电脑。
推荐:css视频教程
css3实现一个上下浮动的动画效果(animation)
css
@keyframes movepoint { 25% { top: 16px } 100%, { top: 50px }}.shade-button-point { display: inline-block; position: absolute; top: 50px; left: 30%; animation: movepoint 2s infinite; -webkit-animation: movepoint 2s infinite;}
html
<div style="margin-right:10px;display:inline-block;position:relative"> <button type="button">点我点我快点我</button> <img class="shade-button-point" src="data:image/png;base64,ivborw0kggoaaaansuheugaaacoaaaaycayaaaaqrkmtaaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaabx9jrefuenrmwwtmu2cy/nq4lese5vrufy0cgq4mmcsgwmicijdpsbyydmwq4q+tgzhbwnypxwjkb/7wj8bod7my6wlksk1jlsc4oagzmsuc4vjki5uwaeuphfbs/bq2ot202lt7kzftow1pn/n87+v5v8ngem5d5top9d+jc9/wijc3n/yja+cz4l7gppbu8h4plx9kjckkyutq6qp5r1qquxthjzpe8zx+c1crrpkcfzrd2tqa8vz5891yudzt399fvfjskpgwltymn98fj5gdzvkghiuls82fcxc+8/pzc6+truu7duxay2njqbdv3z7s7u6ukq6ixrf5+j+zn1hlgdk+o1ex2d7evtvt0zo8pqygeqtxh8upkuihubdwwwpsuhiocqyuyu+whlkgsqowrkghod0fbqv6kdpltk5gaogabed3ar//tlpijzryxbyl7qyuayfgli4ubsbfxw36efhggxsbbvcwaq5qdnjhjik7qnvqqpedznyf4cylz9bekqw/squbljkklatksbdii2pu1uwd0uw0omqvyrzvkhwc+hz4ebij5pvotgazgm9n9/xx2qvlzbsohvodmpg/akqsjorv6/tpzgrk59ramie02jujr47kr0vfyr3abd8phge+qr0b7nsbeuxklvwqlezi4mlk6+ulobxownwrv0ppnj2rkkgkzpv376db0wiiiynhvlru5pv4+dtbz7qcdlqsfrppnz+ppadmgjhe6+vrnjdu3mhbwvkjohr0qgtcqglq7u6ov3jxykh9fb3aw8oda1+nbl/qhgi5jvduzcqcvatrhdbqykohdulb6iw7oxu1tbwxtpw4gtiymjtnibyqtcbzbyb3pkenn05mtasehiri4d0flwz4mflzb222ygbpbsulvl29uwpqqsh5rkwsndw8nntu1pq5sl3/4cohhxsagvjbsn6d27xzs4/bwsosxhfjhuovrhgcgojwwlidphkssdlsta1tbgym7ejo4juuf+hpovcxbqyydqiva/8rwfykf+zjzaf57do1jyoy2tyymxsbmie8vlzqrl279mchdx7elmdbacuktmjjjgzkpdjtls0te6enp8odg4nfotk5xaazf7elysddjz4pcagwuiny2fgkeon8awgyvxwttf7udutrdfny5uimk7mnurrad9q7+86do6vdxv1vtgdfaiwzjc+grrieury4azjrgniowncwfberevrzwan/g/j4ehtp0qv9kl2z9ixloezq6uomzvh5fdyhlyeif20g2qmydgwftjzsxgkoxmkxejqnjtzexkdrawwucmnaf6ikjacngv4qnz6hoagblgdjmjqcnex0nfcyuxdkxdkaqvgaki8ngauztgz1tobvim64dhywfhloydqslgxzkpekdpjbb1rpr0y22gtx+pf169fr27dvn10esh8zy9veqeehip958ek1qylpcgkf/beofirptu2xojs743cbo2dkwvmzw0curq5ixw8pd5fl5h0qpvz86ljqtr7icpqg5v3v09ojxpfct8terifgj854kjfz8/pz1hgajghkhczkzpmb7o+eebielnfos2czxvbawedxxoaktyeqobzoxj19io/30tlsl9ahfgchb50kfbsuwc5ffvdwgf16tld6enpmy26odxfisffevxukqqfwclbybhqzgslewlrmmxrudbjfhp+y9dgykqodapvz4medpwdl8xhyoighbh7zt2kuclif/enwce6sjwmda4q5utmhgotjaoedhgtim+qvt0vpkp8walktez1cxmqdvvzrbm7ue0cnfiycekkegc+jj/hwjkq1rkposfutqkiia61vcmw6fch0pdfqork0lfuoinqwenmqmznz1mphjvxcfepiouwi43k5wkkjxslxrlhhjjabksqskvgdd4egblrba3vpqmqcky6bibc3t49rltbnrgkw3t1/9pexl0nzhvybnbwrlevcordhv3t79u18bskhrzjpk1bvx5r/kqch0pmfn/+4ubnzrokf2gjluzdk5tqxbpi0l1gdeej5kp1rquhbhfkpxib4trtq0lkoojp6yxvvnkx7x4t28wwsa3x8ouxmmtoprkzghldu3ujyudwmkfd+0ojokn6ymonrh3ibtdxjyzjx5i6hvsfcuyngovrs6cehoshhb968mchhchzc7xo3bwxcqsj4vdwphsdgulyrtqftoaasmgtu/7bbb/buz60rmfsymkgw7qgdyrqf6ipemsr5xendn/pjlbak2hqgvlaebawlhwnqsgp2diu1/ilmuofavjun+5ga9icezzyx5okjaaqeqo0bthbbkasa1qg3hk1tlzu0b1cssswiphyrkfvptojmksakvbwm0oejznujhdjukbfhjjp5jmn7xnpa/hvganifmnjwiexoaaaaaelftksuqmcc"></div>
效果图:
更多编程相关知识,请访问:编程教学!!
以上就是css怎么让图案上下浮动的详细内容。