css3-旋转的星球

最新推荐文章于 2024-07-24 21:48:20 发布

Growing Wild

最新推荐文章于 2024-07-24 21:48:20 发布

阅读量1.9k

点赞数

分类专栏：前端文章标签： css3 animation 旋转

本文链接：https://blog.csdn.net/weixin_39773631/article/details/100159514

版权

简单的利用animation弄了旋转的星球，做一个复习。

实现的原理其实是包裹圆的的父级元素设置了rotate()动画，就会产生旋转的效果
+ 再加上animation-play-state:running;作为正在动画的标志，这个属性可以便捷的设置在鼠标悬停到球体上的时候不再旋转，也就是在最外层或者是你想要具体设置的地方的样式上添加：animation-play-state:paused;
+ 设置球体内的字体不随球体旋转，加上animation: inherit;animation-direction:reverse;
+ 不过我这个例子在鼠标悬停到字体的旋转没有设置好

附上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animation应用2-旋转的星球</title>
    <style>
        @keyframes move{
           100%{transform: rotate(360deg);}
        }
        @keyframes Dmove{
           100%{transform: rotate(1turn);}
        }
        *{margin: 0;padding: 0;}

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Growing Wild

关注关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
css3-旋转的星球

简单的利用animation弄了旋转的星球，做一个复习。实现的原理其实是包裹圆的的父级元素设置了rotate()动画，就会产生旋转的效果+ 再加上animation-play-state:running;作为正在动画的标志，这个属性可以便捷的设置在鼠标悬停到球体上的时候不再旋转，也就是在最外层或者是你想要具体设置的地方的样式上添加：animation-play-state:paused;+...
复制链接

扫一扫