Notice: Trying to access array offset on value of type bool in /www/wwwroot/weimahe.com/wp-content/advanced-cache.php on line 472

Notice: Trying to access array offset on value of type bool in /www/wwwroot/weimahe.com/wp-content/advanced-cache.php on line 472
用纯CSS打造圆形图片旋转的方法 - 微码盒
!
也想出现在这里? 联系我们
广告位

用纯CSS打造圆形图片旋转的方法

上次看到一个博客的 LOGO 图片很好看,一个旋转的圆形人物图片,但是我看他用了大量的 JS 代码来渲染这个效果。其实这种方式纯 CSS3 是完全可以实现,我们只需要考虑清楚我们的思路。

1、圆形图片

我们这里使用了一张哈弗 H2 的图片。

然后把图片写成圆形。

  1. height: 300px;
  2. width: 300px;
  3. border-radius: 150px;

2、将图片旋转

这里我们使用了动画 keyframes,将图片不停的自转

  1. animation: 9.5s linear 0s normal none infinite rotate;

3、图片外面遮罩

这里我们使用了遮罩层将我们上面的图片遮罩起来,这样子就看到了一个旋转的图片在一个灰色的背景上面。

  1. <div class="cover"></div>

下面是所有完整的代码:

  1. <style>
  2. @-webkit-keyframes rotate{
  3. from{-webkit-transform:rotate(0deg)}
  4. to{-webkit-transform:rotate(360deg)}
  5. }
  6. @-moz-keyframes rotate{
  7. from{-moz-transform:rotate(0deg)}
  8. to{-moz-transform:rotate(360deg)}
  9. }
  10. @-ms-keyframes rotate{
  11. from{-ms-transform:rotate(0deg)}
  12. to{-ms-transform:rotate(360deg)}
  13. }
  14. @-o-keyframes rotate{
  15. from{-o-transform:rotate(0deg)}
  16. to{-o-transform:rotate(360deg)}
  17. }
  18. .image{
  19. background-image: url('https://www.weimahe.com/wp-content/uploads/2024/10/12326-Z50DKs.jpg');
  20. background-repeat: no-repeat;
  21. animation: 9.5s linear 0s normal none infinite rotate;
  22. -webkit-animation:9.5s linear 0s normal none infinite rotate;
  23. height: 300px;
  24. width: 300px;
  25. border-radius: 150px;
  26. position: absolute;
  27. top: 74px;
  28. left: 73px;
  29. z-index: 0;
  30. }
  31. .cover{
  32. background:#eee;
  33. height:430px;
  34. width:430px;
  35. position:absolute;
  36. }
  37. </style>
  38. <div>
  39. <div class="cover"></div>
  40. <div class="image">
  41. </div>
  42. </div>

给TA打赏
共{{data.count}}人
人已打赏
前端学习

纯CSS绘制各种箭头方法

2024-10-25 14:01:36

前端学习

超级有意思经典代码注释图

2024-10-25 14:01:58

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索