CSS3 之高级动画（2）纯CSS3超逼真的风车旋转动画

学习路径：纯CSS3超逼真的风车旋转动画

 

 

html:结构

  <!-- 背景 -->
  <div class="window">
    <!-- 风车主体 上下部分 -->
    <div class="windmill">
      <!-- 风车主体 墙体部分 -->
      <div class="pillar"></div>
      <!-- 风车窗口部分 -->
      <div class="dome">
        <div class="dome-window"></div>
      </div>
      <!-- 风车主体 窗户部分 -->
      <div class="windmill-window"></div>
      <!-- 风车扇叶部分 -->
      <div class="blades">
        <div class="blade blade-1"></div>
        <div class="blade blade-2"></div>
        <div class="blade blade-3"></div>
        <div class="blade blade-4"></div>
      </div>
      <!-- 风车围栏 -->
      <div class="ramp">
        <!-- 风车围栏 上围栏-->
        <div class="grill"></div>
        <!-- 风车围栏 下四条支柱-->
        <div class="hook hook-1"></div>
        <div class="hook hook-2"></div>
        <div class="hook hook-3"></div>
        <div class="hook hook-4"></div>
      </div>
    </div>
    <!-- 太阳 -->
    <div class="sun"></div>
    <!-- 地面 -->
    <div class="land"></div>
    <!-- 草地1 -->
    <div class="grass grass-1"></div>
    <!-- 草地2 -->
    <div class="grass grass-2"></div>
  </div>

 

css 格式终结：

1.在根元素中声明所有的变量，方便代码维护

:root {
  --sun-color: #FFBB10;
  --sky-color-1: #FBD788;
}

 

2. 使用var关键字引用声明的变量

例如这个背景：（风车——类似太极的背景）

 background: radial-gradient(farthest-side at 135px 340px, var(--sky-color-2) 135px, transparent 135px), 
radial-gradient(farthest-side at 405px 300px, var(--sky-color-1) 140px, transparent 135px), linear-gradient(to bottom, var(--sky-color-1) 320px, 
var(--sky-color-2) 320px);

 

3. animation 动画使用

div {
  animation: window-move var(--window-move-time) ease-in-out infinite alternate;  
}

 

4. 使用iframe导入别的页面

<iframe frameborder="0" scrolling="no" src="index2.html" width="100%" height="500px"></iframe>

 

转载于:https://www.cnblogs.com/houfee/p/10607334.html