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 @   种太阳  阅读(10)  评论(0)  编辑  收藏  举报
相关博文：
·  10.扇子打开闭合效果---动图
·  12.方形相框遮罩---动图
·  animation旋转动效
·  CSS实现3D旋转相册效果
·  css动画边框
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· AI与.NET技术实操系列（六）：基于图像分类模型对图像进行分类
点击右上角即可分享
微信分享提示
SQL AI 助手