css实现原子能源变风车动画效果代码

代码语言:html

所属分类:动画

代码描述:css实现原子能源变风车动画效果代码,寓意原子能应该造福人类,切莫毁灭人类。

代码标签: css 原子 风车

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        .base {
          position: relative;
          margin: 0 auto;
          width: 150px;
          height: 150px;
          border: 5px solid #000;
          border-radius: 100%;
          -webkit-animation: intro ease-out 1s 2s forwards;
                  animation: intro ease-out 1s 2s forwards;
        }
        .base div {
          position: relative;
          width: 150px;
          height: 150px;
          border-radius: 100%;
          -webkit-animation: fan linear 1s 2s infinite;
                  animation: fan linear 1s 2s infinite;
        }
        .base::before {
          position: absolute;
          top: 50%;
          left: 50%;
          margin-left: -3px;
          width: 6px;
          height: 250px.........完整代码请登录后点击上方下载按钮下载查看

网友评论0