CSS3单摆效果是一种新的CSS3特性，可以用来展示连续摆动的动画效果，通常用于网站的动画效果和交互。使用CSS3的单摆效果，设计师可以使网站更加有趣、吸引人和富有创意。

/* 设置容器样式 */
.container {
width: 400px;
height: 400px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
/* 设置单摆的样式 */
.pendulum {
position: absolute;
width: 20px;
height: 200px;
left: 50%;
top: 0;
margin-left: -10px;
border-radius: 10px 10px 0 0;
background-color: #f00;
transform-origin: 50% 0%;
animation: swing 2s ease-in-out infinite;
}
/* 设置单摆摆动的主要样式 */
@keyframes swing {
0% {
transform: rotate(-15deg);
}
50% {
transform: rotate(15deg);
}
100% {
transform: rotate(-15deg);
}
}

以上代码中，我们首先定义了一个容器，指定了它的宽度、高度和位置，然后将其设置为相对定位，以便后面的单摆元素使用相对位置。接着定义了单摆的样式，包含了它的位置和摆动的动画效果。其中，通过将transform-origin设置为50% 0%，使得单摆的原点定位在了顶部中心点，也就是单摆向下摆动的轴心。

接下来，我们通过使用@keyframes关键字来指定了单摆摆动的实现过程，定义了从初始角度开始、到达最大角度、再到最小角度又回到初始角度的过程，形成了一个周期性摆动，通过将animation属性设置为swing 2s ease-in-out infinite，让这个动画无限循环播放。

总之，CSS3单摆效果是一个非常酷炫的动画效果，可以让网页的设计变得更加生动有趣，也可以用作实现其他有趣的特效。在实际操作中，设计师可以根据自己的需要来调整单摆的参数，比如调整摆动的速度、角度、颜色等，让网页更加生动有趣。