css3动画特效代码 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             *{
 8                 margin: 0;
 9                 padding: 0;
10             }
11             .box{
12                 width: 500px;
13                 height: 400px;
14                 background: pink;
15             }
16             .txt1{
17                 background: red;
18                 color: #fff;
19                 font-size: 20px;
20                 font-weight: bold;
21                 transform: translateY(20px);
22                 transition: 1s;
23             }
24             .txt2{
25                 background: red;
26                 color: skyblue;
27                 font-weight: bold;
28                 transform: translateY(300px);
29                 transition: 1s;
30             }
31             .box:hover .txt1{
32                 transform: translateY(60px);
33             }
34             .box:hover .txt2{
35                 transform: translateY(200px);
36             }
37         </style>
38     </head>
39     <body>
40         <div class="box">
41             <p class="txt1">哈哈哈哈哈哈哈呵呵</p>
42             <p class="txt2">哈哈哈哈哈哈哈呵呵</p>
43         </div>
44     </body>
45 </html>

 

posted @ 2020-03-31 20:37  爱睡觉的小朋友  阅读(87)  评论(0)    收藏  举报