CSS3 浮动、定位、动画

CSS3 包含多个新特性，其中包括浮动（Floats）、定位（Positioning）和动画（Animations）。以下是这些特性的简单示例：

浮动（Floats）:

.float-left {
  float: left;
}
 
.float-right {
  float: right;
}

定位（Positioning）:

.relative-position {
  position: relative;
  top: 10px;
  left: 20px;
}
 
.absolute-position {
  position: absolute;
  bottom: 0;
  right: 0;
}
 
.fixed-position {
  position: fixed;
  top: 0;
  left: 0;
}
 
.sticky-position {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

动画（Animations）:

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
@-webkit-keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
.animated-example {
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  /* Safari */
  -webkit-animation-name: example;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}

这些代码示例展示了如何使用CSS3中的浮动、定位和动画。在实际应用中，你可能需要根据具体需求来调整这些属性的值。