css3-旋转的星球

简单的利用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;}body{background: #555;}#bigBox{width: 460px;height: 460px;background: linear-gradient(140deg, #409eff 46%, #0b4580 100%);margin:0 auto;position: relative;}.innerCircle{width: 200px; height: 200px; border:1px solid #eee;  border-radius: 50%;position: absolute;top: 120px;left: 130px;animation: move 12s infinite linear;animation-play-state:running;}.innerCircle .innerRound{width: 100px; height: 100px; background: #f6d963; border-radius: 50%; box-shadow: 0 0 12px #ff0;position: absolute;top: 50px;left: 50px;}.innerCircle .sunCircle{width: 85px; height: 85px; border:1px solid #eee;  border-radius: 50%;position: absolute;top: -35px;left: 16px;animation: move 12s infinite linear;animation-play-state:running;}.sunCircle .sunRound{width: 50px; height: 50px; background: #e677d3; border-radius: 50%; box-shadow: 0 0 12px pink;position: absolute;top: 19px;left: 18px;animation: inherit;animation-direction:reverse;animation-play-state:running;}.sunCircle .round{width: 30px; height: 30px; background: #b9c3e8; border-radius: 50%; box-shadow: 0 0 12px #ccdbe4;position: absolute;top: -4px;left: 0;animation: move 2s infinite linear;animation-play-state:running;}.text{color: #fff; text-shadow: 0 8px 9px #c4b59d;position:absolute; top: 12px;left: 5px;animation: inherit;animation-direction:reverse;animation-play-state:running;}div:hover, div:focus, .text:hover, .text:focus, .round:hover, .round:focus{animation-play-state: paused;}</style>
</head>
<body><div id="bigBox"><div class="innerCircle"><div class="innerRound"></div><div class="sunCircle"><div class="sunRound"><span class="text">AWO</span></div><div class="round"></div></div></div></div>
</body>
</html>

css3-旋转的星球相关推荐

可控制转速CSS3旋转风车特效
以前制作网页动画一般使用javascript,现在已经有越来越多动动画使用纯CSS实现,并且动画的控制也可以使用CSS3实现,因为CSS 3来了,CSS 3的动画功能确实强大.以下是一个纯CSS3制作 ...
css3缓慢出现,让CSS3旋转开始缓慢然后结束缓慢？
这不是一个可以通过使用ease-in解决的问题.让CSS3旋转开始缓慢然后结束缓慢? 如果我有一个元素,我想在CSS3中旋转一段时间,但是开始慢,结束速度慢,我该怎么做? CSS @-webkit-k ...
炫酷的动画特效—css3旋转立方球体
炫酷的动画特效-css3旋转立方球体想要实现旋转立方球体特效,以下的内容你不容错过. 要理解的知识点形成一个3D空间: transform-style:preserve-3d (让父元素形成3D, ...
css3旋转带放大缩小效果
下载地址 css3旋转带放大缩小效果,鼠标悬停的时候触发放大或缩小并旋转的动画. dd:
safari浏览器兼容css3旋转同时位移处理
safari浏览器兼容css3旋转同时位移处理项目某元素同时执行位移+旋转时,谷歌浏览器等其他浏览器正常,safari浏览器不兼容(pc和苹果手机一样) 网络方案 (一) (亲测然并卵 ~~) ...
CSS3旋转实例学习
CSS3旋转实例学习(附3D旋转实例) 我们都有在网页上见过一些交互性的效果,比如用鼠标滑向图标或是按钮的时候,图标会自动旋转一周,这就是CSS3旋转效果.在CSS3中有个常见的transform应用 ...
HTML页面多个平行四边形,用css3旋转写平行四边形
今天要布局的网页背景是一个平行四边形,切图作为背景不好,很影响网页的打开速度,,那么这个平行四边形就css代码写出来,可以用css3的CSS3 transform 旋转的属性写出来,就是transfo ...
css3动画旋转360度,CSS3旋转动画(360度旋转、旋转放大、放大、移动) 用法和实例...
CSS3旋转动画(360度旋转.旋转放大.放大.移动) 用法和实例 Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet Explo ...
CSS3旋转动画(平滑,无限循环)
CSS3旋转动画 /* 旋转动画指定class为trun即可使用*/ .turn {animation: turn 10s linear infinite; }/* turn : 定义的动画名称 1 ...
使用CSS3旋转DIV
使用CSS3旋转DIV 参加某公司的前端工程师笔试,遇到以下问题. 请完成以下填空,使得id为loading的div每1秒转1圈并无限循环. <html> <head&g ...

css3-旋转的星球

附上代码：

css3-旋转的星球相关推荐

最新文章

热门文章