css 3 单个翅膀煽动 |vue2.0按需加载js css

要实现单个翅膀煽动的效果，需要用到transform属性。在pre标签中，大家可以写一段类似以下的代码：

.wing {
position: relative;
width: 200px;
height: 200px;
background-color: #f5f5f5;
transform: rotate(45deg);
}
.wing:before, .wing:after {
position: absolute;
content: "";
top: 0;
left: 0;
background-color: #333;
transform-origin: right top;
transition: transform 0.5s ease-out;
}
.wing:before {
width: 100px;
height: 200px;
transform: rotate(0deg);
}
.wing:after {
width: 200px;
height: 50px;
transform: rotate(90deg);
}
.wing:hover:before {
transform: rotate(-40deg);
}
.wing:hover:after {
transform: rotate(40deg);
}

以上代码中，大家首先定义了一个class为wing的元素，并赋予其一些基本样式，比如宽度、高度和背景色等。然后，在这个元素的before和after伪元素中，大家定义了两个翅膀的样式。这里before翅膀宽度为100px，高度为200px，而after翅膀宽度为200px，高度为50px。两个伪元素都通过transform-origin属性设置了旋转中心。

接下来，在鼠标移入时，大家通过:hover伪类来设置before和after翅膀的动画效果。在:hover:before中，大家把它转动了-40度，而:hover:after中，大家把它转动了40度。这样，当鼠标移入时，单个翅膀就像在煽动一样。

通过上述CSS 3代码，大家就可以实现单个翅膀煽动的效果。这个效果不仅很酷炫，而且在网页上使用也非常灵活，可以用于各种元素的装饰和交互效果。