好看的分割线\(^o^)/~

最新推荐文章于 2023-12-14 10:35:03 发布

原创最新推荐文章于 2023-12-14 10:35:03 发布 · 3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#CSS

CSS 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用CSS来创建独特动画效果的方法。通过定义特定的CSS样式和布局，可以实现带有阴影和圆角的动画元素，并使其具备动态的视觉效果。这种技术特别适用于网页设计中增加互动性和美观度。

<div class="or-spacer">
    <div class="mask"></div>
    <span><i>wow</i></span>
</div>

.or-spacer {
    margin-top: 100px;
    margin-left: 100px;
    width: 400px;
    position: relative;
}
.or-spacer .mask {
    overflow: hidden;
    height: 20px;
}
.or-spacer .mask:after {
    content: '';
    display: block;
    margin: -25px auto 0;
    width: 100%;
    height: 25px;
    border-radius: 125px/12px;
    box-shadow: 0 0 8px black;
}
.or-spacer span {
    width: 50px;
    height: 50px;
    position: absolute;
    bottom: 100%;
    margin-bottom: -25px;
    left: 50%;
    margin-left: -25px;
    border-radius: 100%;
    box-shadow: 0 2px 4px #999;
    background: white;
}
.or-spacer span i {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    right: 4px;
    border-radius: 100%;
    border: 1px dashed #aaa;
    text-align: center;
    line-height: 40px;
    font-style: normal;
    color: #999;
}