CSS3 text-rendering:geometricPrecision使用实例+基本的变形动画

Source: https://github.com/t0t text-rendering属性用来指示GPU如何优化文本显示，有4个取值： auto,optimizeSpeed,optimizeLegibility,geometricPrecision。其中speed表示优先考虑渲染速度，legibility优先考虑清晰度，geometricPrecision表示优先考虑几何精度（即字体尺寸等）。

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2466
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    text-align: center;
    background: -webkit-linear-gradient(left, #ffdae0, #ff97a9);
    background: linear-gradient(to right, #ffdae0, #ff97a9);
    text-rendering: geometricPrecision;
}
p{padding: 10px 0;}
header,
footer {
    -webkit-box-flex: 1;
    -webkit-flex: 1 100%;
    -ms-flex: 1 100%;
    flex: 1 100%;
}
.container {
    position: relative;
    height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}
.shape {
    content: '';
    width: 50px;
    height: 200px;
    padding-top: 10px;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    font-size: 1.5em;
    text-align: center;
    background-color: pink;
    mix-blend-mode: hard-light;
}
@-webkit-keyframes move-0 {
    from {
        -webkit-transform: rotateX(0deg) rotateY(359deg);
        transform: rotateX(0deg) rotateY(359deg);
    }
    to {
        -webkit-transform: rotateX(359deg) rotateY(-359deg);
        transform: rotateX(359deg) rotateY(-359deg);
    }
}
@keyframes move-0 {
    from {
        -webkit-transform: rotateX(0deg) rotateY(359deg);
        transform: rotateX(0deg) rotateY(359deg);
    }
    to {
        -webkit-transform: rotateX(359deg) rotateY(-359deg);
        transform: rotateX(359deg) rotateY(-359deg);
    }
}
.move-0 {
    -webkit-animation-name: move-0;
    animation-name: move-0;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-transform-origin: center center -50px;
    -ms-transform-origin: center center -50px;
    transform-origin: center center -50px;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
}
@-webkit-keyframes move-1 {
    50% {
        -webkit-transform: rotateX(3deg) translate3d(100px, 0, 20px);
        transform: rotateX(3deg) translate3d(100px, 0, 20px);
    }
}
@keyframes move-1 {
    50% {
        -webkit-transform: rotateX(3deg) translate3d(100px, 0, 20px);
        transform: rotateX(3deg) translate3d(100px, 0, 20px);
    }
}
.move-1 {
    -webkit-animation-name: move-1;
    animation-name: move-1;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-transform: perspective(20px);
    transform: perspective(20px);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
@-webkit-keyframes move-2 {
    50% {
        -webkit-transform: rotateX(-5deg) translateX(-190px) translateZ(-30px);
        transform: rotateX(-5deg) translateX(-190px) translateZ(-30px);
    }
}
@keyframes move-2 {
    50% {
        -webkit-transform: rotateX(-5deg) translateX(-190px) translateZ(-30px);
        transform: rotateX(-5deg) translateX(-190px) translateZ(-30px);
    }
}
.move-2 {
    -webkit-animation-name: move-2;
    animation-name: move-2;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-transform: perspective(40px);
    transform: perspective(40px);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

HTML

编辑器支持Emmet

快捷键

使用CSS3 PerspectiveTransform实现的逼真3D地球自转动画

使用CSS mask-image和background-image实现带阴影的3D球体

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：