11.圆形相框打开闭合效果--动图

HTML:

 1 <!DOCTYPE html>
 2 <head>
 3 <meta charset="utf-8"/>
 4 <title>demo05</title>
 5 <link type="text/css" href="E:\htmltest1\demo1\demo05.css" rel="stylesheet">
 6 </head>
 7 <body>
 8     <div>
 9         <p></p>
10     </div>
11 </body>
View Code

 

CSS:

 1 *{margin:0;padding:0;}
 2 div{
 3     width:300px;
 4     height:300px;
 5     border:20px solid rgba(255,255,255,0.5);
 6     border-radius:50%;
 7     margin:100px auto;
 8     background:url('D:/新增資料夾/biao.png');    
 9     background-size:300px 300px;
10     position:relative;
11     
12 }
13 
14 p{
15     width:300px;
16     height:300px;
17     border-radius:50%;
18     position:absolute;
19     background:url('D:/新增資料夾/bbd.png');    
20     transition:1s;
21     /* animation:move 5s infinite linear; */
22 }
23 
24 p:hover{
25     transform:translateX(-300px) rotate(180deg);
26 }
27 
28 @keyframes move{
29     0%{transform:translateX(0px);}
30     100%{transform:translateX(-200px);}
31 }

 

效果：

 

posted @ 2023-11-09 14:34  种太阳  阅读(8)  评论(0)  编辑  收藏  举报