css3沙漏效果

CSS3沙漏效果是一种非常炫酷的CSS3效果，被广泛应用于网页设计。沙漏效果基于CSS3动画实现，通过设置CSS3样式属性，可以实现一个舒适、有趣的沙漏效果。以下是实现CSS3沙漏效果的代码示例：

.sand-clock {
    width: 200px;
    height: 300px;
    position: relative;
}
.sand-clock .sand {
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 150px solid #f00;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -100px;
    z-index: 1;
}
.sand-clock .bottom {
    width: 100px;
    height: 150px;
    background-color: #f00;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -50px;
    z-index: 2;
}
.sand-clock .top {
    width: 100px;
    height: 150px;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -50px;
    z-index: 3;
    animation: sand-clock 3s infinite linear;
    transform-origin: top;
}
@keyframes sand-clock {
0% {
    transform: rotate(0);
}
50%{
    transform: rotate(180deg);
}
100% {
    transform: rotate(360deg);
}
}
    

以上代码示例中，.sand-clock样式定义了主容器的宽高和相对定位；.sand样式定义了一个空心三角形，作为沙漏的主体，同时使用了负margin技巧将三角形的中心点定位到容器的中心；.bottom样式定义了一个方形，作为沙漏的底部；.top样式定义了一个相同大小的方形，作为沙漏的顶部，并实现了CSS3动画效果。

如果您要修改沙漏的颜色、大小等属性，只需在CSS代码中修改对应样式的属性值即可。CSS3沙漏效果是一种技巧非常巧妙、使用起来很简单的CSS3效果，可以为您的网页设计增加一份专业、富有趣味的感觉。欢迎大家来尝试！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！