huanggr
这次给大家带来的是css3动画的讲解，之后加那些年，是因为我的专业就是前端，两年多以前，我就接触这些东西了，今天就来讲讲CSS3动画写的小demo，闲话不说，上代码：
CSS3动画过度
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{ padding:0; margin: 0; } .main{ width: 200px; height: 200px; position: relative; margin: 100px auto; } div{ border-radius: 100px; width: 200px; height: 200px; background-color: pink; } .one{ width: 200px; background-image: url('https://gss0.baidu.com/8_BXsjip0QIZ8tyhnq/timg?wh_rate=0&wapiknow&quality=100&size=w250&sec=0&di=fe0a3fd4b0fc64492283d5b444357ac9&src=http%3A%2F%2Fiknow02.bosstatic.bdimg.com%2Fzhidaoribao%2F2016%2F1118%2Fjy.jpg'); position: absolute; background-size: 200px 200px; height: 200px; top: 0px; left: 0px; } .two{ width: 200px; height: 200px; background-color:rgba(0,67,185,.6); line-height: 200px; top: 0px; text-align: center; left: 300px; opacity:0; position:absolute } @keyframes move{ 30%{ height: 100px; width: 100px; top: 50px; left: 50px; opacity:0.6; } 70%{ left: -150px; height: 100px; width: 100px; top: 50px; opacity:0; } 100%{ left: -150px; height: 100px; width: 100px; top: 50px; opacity:0; } } .main:hover .one{ animation: move linear .8s forwards ; } .main:hover .two{ opacity:1; left: 0px; top: 0px; } </style> </head> <body> <div class="main"> <div class="one"></div> <div class="two"> texttextdsfads </div> </div> </body> </html> |
7