CSS创意与视觉表现

概述

第五届CSS大会上做的关于“CSS创意与视觉表现”主题分享提到的实例合集。

封面视觉效果

CSS创意与视觉表现

代码

CSS代码:
.cover {
    padding: 36% 50%;
    background: linear-gradient(to right, white 50%, black calc(50% + 1px));
    position: relative;
    font-size: 200%;
}
.cover::before,
.cover::after {
    content: '';
    position: absolute;
    width: 36%; height: 50%;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
}
.cover::before {
    top: 0;
    background: radial-gradient(circle, white 13%, black calc(13% + 1px));
}
.cover::after {
    bottom: 0;
    background: radial-gradient(circle, black 13%, white calc(13% + 1px));
}
.cover-h,
.cover-p {
    position: absolute;
    mix-blend-mode: difference;
    left: 0; right: 0;
    text-align: center;
    color: #fff;
    z-index: 1;
}
HTML代码:
<div class="cover">
    <h2 class="cover-h">CSS创意与视觉表现</h2>
</div>

详细文章介绍:http://olsonnd.com/wordpress/?p=8708