如何用css 写出炫酷的动效？

要写出炫酷的动态效果，可以使用CSS中的一些动画和过渡效果。以下是一些常用的CSS动画和过渡效果及其用法：

1. 过渡（Transition）：用于在一定时间内改变元素的属性。可以通过transition属性进行设置，例如：

css.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 2s, height 2s, background-color 2s;
}

.box:hover {
  width: 200px;
  height: 200px;
  background-color: blue;
}

在这个例子中，当鼠标悬停在box元素上时，它的宽度、高度和背景颜色会在2秒内从原始值变化到新值，从而产生平滑的过渡效果。

2. 动画（animation）：用于在元素进入、离开、状态改变时执行复杂的动画效果。可以通过@{keyframes}定义动画效果，例如：

css@keyframes scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: scale 2s infinite;
}

在这个例子中，box元素会以2秒的周期进行缩放动画，从原始大小放大到1.5倍原始大小，然后再缩回到原始大小。

除了上述两种方法外，还可以使用CSS的一些高级特性，例如transform、transition、filter等来实现更加复杂的和炫酷的动态效果。不过需要注意的是，在编写动态效果时要注意性能和可维护性，避免过度使用或不良的动画效果对用户体验和性能造成影响。