CSS

语言：

CSSSCSS

确定

/**

* Declare keyframes.

*/

/**

* Start Styling!

*/

@-webkit-keyframes rotateX {

0% {

-webkit-transform: rotate3d(1, 0, 1, 0deg);

transform: rotate3d(1, 0, 1, 0deg);

}

100% {

-webkit-transform: rotate3d(1, 0, 1, 360deg);

transform: rotate3d(1, 0, 1, 360deg);

}

}

@keyframes rotateX {

0% {

-ms-transform: rotate3d(1, 0, 1, 0deg);

-webkit-transform: rotate3d(1, 0, 1, 0deg);

transform: rotate3d(1, 0, 1, 0deg);

}

100% {

-ms-transform: rotate3d(1, 0, 1, 360deg);

-webkit-transform: rotate3d(1, 0, 1, 360deg);

transform: rotate3d(1, 0, 1, 360deg);

}

}

@-webkit-keyframes rotateY {

0% {

-webkit-transform: rotate3d(0, 1, 1, 0deg);

transform: rotate3d(0, 1, 1, 0deg);

}

100% {

-webkit-transform: rotate3d(0, 1, 1, 360deg);

transform: rotate3d(0, 1, 1, 360deg);

}

}

@keyframes rotateY {

0% {

-ms-transform: rotate3d(0, 1, 1, 0deg);

-webkit-transform: rotate3d(0, 1, 1, 0deg);

transform: rotate3d(0, 1, 1, 0deg);

}

100% {

-ms-transform: rotate3d(0, 1, 1, 360deg);

-webkit-transform: rotate3d(0, 1, 1, 360deg);

transform: rotate3d(0, 1, 1, 360deg);

}

}

@-webkit-keyframes rotateXY {

0% {

-webkit-transform: rotate3d(1, 1, 1, 0deg);

transform: rotate3d(1, 1, 1, 0deg);

}

100% {

-webkit-transform: rotate3d(1, 1, 1, 360deg);

transform: rotate3d(1, 1, 1, 360deg);

}

}

@keyframes rotateXY {

0% {

-ms-transform: rotate3d(1, 1, 1, 0deg);

-webkit-transform: rotate3d(1, 1, 1, 0deg);

transform: rotate3d(1, 1, 1, 0deg);

}

100% {

-ms-transform: rotate3d(1, 1, 1, 360deg);

-webkit-transform: rotate3d(1, 1, 1, 360deg);

transform: rotate3d(1, 1, 1, 360deg);

}

}

@-webkit-keyframes rotateballX {

0% {

-webkit-transform: rotate3d(1, 0, 1, 0deg);

transform: rotate3d(1, 0, 1, 0deg);

}

100% {

-webkit-transform: rotate3d(1, 0, 1, -360deg);

transform: rotate3d(1, 0, 1, -360deg);

}

}

@keyframes rotateballX {

0% {

-ms-transform: rotate3d(1, 0, 1, 0deg);

-webkit-transform: rotate3d(1, 0, 1, 0deg);

transform: rotate3d(1, 0, 1, 0deg);

}

100% {

-ms-transform: rotate3d(1, 0, 1, -360deg);

-webkit-transform: rotate3d(1, 0, 1, -360deg);

transform: rotate3d(1, 0, 1, -360deg);

}

}

@-webkit-keyframes rotateballY {

0% {

-webkit-transform: rotate3d(0, 1, 1, 0deg);

transform: rotate3d(0, 1, 1, 0deg);

}

100% {

-webkit-transform: rotate3d(0, 1, 1, -360deg);

transform: rotate3d(0, 1, 1, -360deg);

}

}

@keyframes rotateballY {

0% {

-ms-transform: rotate3d(0, 1, 1, 0deg);

-webkit-transform: rotate3d(0, 1, 1, 0deg);

transform: rotate3d(0, 1, 1, 0deg);

}

100% {

-ms-transform: rotate3d(0, 1, 1, -360deg);

-webkit-transform: rotate3d(0, 1, 1, -360deg);

transform: rotate3d(0, 1, 1, -360deg);

}

}

@-webkit-keyframes rotateballXY {

0% {

-webkit-transform: rotate3d(1, 1, 1, 0deg);

transform: rotate3d(1, 1, 1, 0deg);

}

100% {

-webkit-transform: rotate3d(1, 1, 1, -360deg);

transform: rotate3d(1, 1, 1, -360deg);

}

}

@keyframes rotateballXY {

0% {

-ms-transform: rotate3d(1, 1, 1, 0deg);

-webkit-transform: rotate3d(1, 1, 1, 0deg);

transform: rotate3d(1, 1, 1, 0deg);

}

100% {

-ms-transform: rotate3d(1, 1, 1, -360deg);

-webkit-transform: rotate3d(1, 1, 1, -360deg);

transform: rotate3d(1, 1, 1, -360deg);

}

}

* {

box-sizing: border-box;

}

body {

background-color: #aff298;

min-height: 100vh;

overflow: hidden;

width: 100%;

*zoom: 1;

filter: progid: DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFAFF298', endColorstr='#FF175B12');

background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IiIgcj0iOTglIj48c3RvcCBvZmZzZXQ9IjMzJSIgc3RvcC1jb2xvcj0iI2FmZjI5OCIvPjxzdG9wIG9mZnNldD0iOTglIiBzdG9wLWNvbG9yPSIjMTc1YjEyIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');

background-size: 100%;

background-image: -webkit-radial-gradient(center, ellipse cover, #aff298 33%, #175b12 98%);

background-image: radial-gradient(ellipse cover at center, #aff298 33%, #175b12 98%);

}

#wrapper {

position: absolute;

left: 50%;

top: 50%;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

}

.ring {

background-color: transparent;

border: 1px solid #500;

position: absolute;

border-radius: 50%;

}

.ring::after {

background-color: #f00;

border: 1px solid #000;

content: "";

height: 35px;

height: 1.5vw;

left: calc(50% - 0.75vw);

top: -0.75vw;

position: absolute;

width: 35px;

width: 1.5vw;

border-radius: 50%;

}

.ring::before {

background-color: #f00;

border: 1px solid #000;

content: "";

height: 35px;

height: 1.5vw;

left: calc(50% - 0.75vw);

bottom: -0.75vw;

position: absolute;

width: 35px;

width: 1.5vw;

border-radius: 50%;

}

#ring-outer-3 {

height: 200px;

height: 36vw;

left: calc(50% - 18vw);

top: calc(50% - 18vw);

width: 200px;

width: 36vw;

-webkit-animation: rotateY 6s linear infinite;

animation: rotateY 6s linear infinite;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

}

#ring-outer-3::after {

-webkit-animation: rotateballY 6s linear infinite;

animation: rotateballY 6s linear infinite;

}

#ring-outer-3::before {

-webkit-animation: rotateballY 6s linear infinite;

animation: rotateballY 6s linear infinite;

}

#ring-outer-2 {

height: 200px;

height: 30vw;

left: calc(50% - 15vw);

top: calc(50% - 15vw);

width: 200px;

width: 30vw;

-webkit-animation: rotateXY 5s linear infinite;

animation: rotateXY 5s linear infinite;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

}

#ring-outer-2::after {

-webkit-animation: rotateballXY 5s linear infinite;

animation: rotateballXY 5s linear infinite;

}

#ring-outer-2::before {

-webkit-animation: rotateballXY 5s linear infinite;

animation: rotateballXY 5s linear infinite;

}

#ring-outer {

height: 200px;

height: 24vw;

left: calc(50% - 12vw);

top: calc(50% - 12vw);

width: 200px;

width: 24vw;

-webkit-animation: rotateX 4s linear infinite;

animation: rotateX 4s linear infinite;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

}

#ring-outer::after {

-webkit-animation: rotateballX 4s linear infinite;

animation: rotateballX 4s linear infinite;

}

#ring-outer::before {

-webkit-animation: rotateballX 4s linear infinite;

animation: rotateballX 4s linear infinite;

}

#ring-middle {

height: 150px;

height: 18vw;

left: calc(50% - 9vw);

top: calc(50% - 9vw);

width: 150px;

width: 18vw;

-webkit-animation: rotateY 3.5s linear infinite;

animation: rotateY 3.5s linear infinite;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

}

#ring-middle::after {

-webkit-animation: rotateballY 3.5s linear infinite;

animation: rotateballY 3.5s linear infinite;

}

#ring-middle::before {

-webkit-animation: rotateballY 3.5s linear infinite;

animation: rotateballY 3.5s linear infinite;

}

#ring-inner {

height: 100px;

height: 12vw;

left: calc(50% - 6vw);

top: calc(50% - 6vw);

width: 100px;

width: 12vw;

-webkit-animation: rotateXY 3s linear infinite;

animation: rotateXY 3s linear infinite;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

}

#ring-inner::after {

-webkit-animation: rotateballXY 3s linear infinite;

animation: rotateballXY 3s linear infinite;

}

#ring-inner::before {

-webkit-animation: rotateballXY 3s linear infinite;

animation: rotateballXY 3s linear infinite;

}

#core {

background-color: #d99;

height: 50px;

height: 8vw;

left: calc(50% - 4vw);

position: absolute;

top: calc(50% - 4vw);

width: 50px;

width: 8vw;

background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjAlIiBjeT0iMCUiIHI9Ijk4JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIvPjxzdG9wIG9mZnNldD0iOTglIiBzdG9wLWNvbG9yPSIjMTEwMDAwIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');

background-size: 100%;

background-image: -webkit-radial-gradient(top left, ellipse cover, #f00 0%, #100 98%);

background-image: -webkit-radial-gradient(ellipse cover at top left, #f00 0%, #100 98%);

background-image: radial-gradient(ellipse cover at top left, #f00 0%, #100 98%);

border-radius: 50%;

*zoom: 1;

filter: progid: DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFFF0000', endColorstr='#FF000000');

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

}

css3运动框架,CSS3 原子运动相关推荐

  1. JavaScriptDay08:js运动基础，单物体运动框架，多物体运动框架，改变单一任意值运动框架，改变多值运动框架，完美运动框架

    目录 0x00 js的运动基础 0x01 单物体运动框架 0x02 多物体运动框架 0x03 改变单一任意值运动框架 0x04 链式运动框架 0x05 改变多值运动框架 0x06 完美运动框架 0x0 ...

  2. 多元素运动框架-链式运动的封装

    1.0运动原理: 逆战班学生整理 让某件物品沿着某种方向随着时间的变化改变位置 setInterval(function(){ obox.style.left = obox.offsetLeft+10 ...

  3. Javascript 链式运动框架——逐行分析代码，让你轻松了解运动的原理

    所谓链式运动,就是一环扣一环.我们的很多运动实际上来说指的就是分阶段的,第一个阶段动完,下个阶段开始动. 这个链式运动框架就是用来处理这些问题的. 我们先来看下之前的运动框架,以下是Javascrip ...

  4. js运动应用之运动框架

    js运动应用之运动框架 <style>div{width:200px;height:200px;background-Color:yellow;float:left;font-size:1 ...

  5. 【原生JS组件】javascript 运动框架

    大家都知道JQuerry有animate方法来给DOM元素进行运动,CSS3中也有transition.transform来进行运动.而使用原生的Javascript来控制元素运动,须要写非常多运动的 ...

  6. 完美运动框架(js)

    一.前言 学习js运动时,由于在实现多种不同运动效果过程中很多代码是重复的,故将其封装达到代码重用. 二.代码封装重用 function startMove(obj, json, fnEnd){cle ...

  7. 封装运动框架多个属性

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. 好程序员技术教程分享JavaScript运动框架

    好程序员技术教程分享JavaScript运动框架,有需要的朋友可以参考下. JavaScript的运动,即让某元素的某些属性由一个值变到另一个值的过程.如让div的width属性由200px变到400 ...

  9. JavaScript——创建运动框架

    封装好的运动框架Move(obj,attr,iTarget),可直接调用: 可用于设置width.border.fontSize.marginLeft.opacity等许多常见属性值的变速变化,实现各 ...

最新文章

  1. PHP开发错误锦集（持续更新）
  2. Weblogic 9.2和10.3 改密码 一站完成
  3. redis的key和value限制
  4. 4位无符号比较器设计
  5. c# 获取电脑硬件信息通用查询类[测试通过]
  6. 【项目管理】工作分解结构WBS
  7. 小红书笔记api_超级干货丨小红书种草笔记如何写？
  8. 手机端页面自适应解决方案-rem布局
  9. Eclipse europa 更新时 Error retrieving feature.xml. [error in opening zip file]的解决
  10. 开源项目参与_通过更好的文档吸引更多的项目参与人
  11. 性能优化挑战重重，鲲鹏 HPC 如何突破算力桎梏？
  12. mysql 表列表_一个MySQL表中的多列表显示
  13. 吴恩达深度学习5.1笔记_Sequence Models_循环序列模型
  14. Andorid AlertDialog 点击后自动消失_Andorid-APP 安全（五）之android取证-文件系统与数据结构...
  15. [转]Hibernate不能自动建表解决办法及Hibernate不同数据库的连接及SQL方言
  16. Oracle中rownum用法总结
  17. java生成激活码算法_java实现的AES秘钥生成算法示例
  18. 医学DICOM文件解析（笔记整理）
  19. 如何打断制图中的CAD图形？
  20. 7个月吐血整理!Android面试相关文章及Github学习资料(标星3.2K）

热门文章

  1. IOT [02] -- 物联网系统框架介绍
  2. css+js实现一个跳动的loading动画效果
  3. 循环结构，for循环重要！！！
  4. lapack安装 matlab,Windows Scipy安装：找不到Lapack / Blas资源
  5. 解决克隆虚拟机之后ip地址消失、service network restart 无法使用
  6. android 低版本 searchview,Android SearchView
  7. 电脑没声音（qq音乐提示没声卡） 联想小新为例
  8. 安卓程序代写 网上程序代写[原]vim编辑器配置及常用命令
  9. 个人设计web前端大作业
  10. 新能源汽车VCU电控开发工程师训练营”圆满结束