纯CSS3实现的动画日历图标

Animated Calendar Icon

icon, calendar

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16em;
    height: 16em;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
/* Calendar */

.calendar {
    -webkit-perspective: 40em;
    perspective: 40em;
    color: #12395F;
}
.calendar i {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 6em;
    height: 6em;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: inherit;
    background-color: #FFF;
    border: 0.25em solid;
    background-image: -webkit-linear-gradient(top, currentColor 10%, rgba(255, 255, 255, 0) 10%), -webkit-linear-gradient(right, currentColor 10%, rgba(255, 255, 255, 0) 10%);
    background-image: linear-gradient(to bottom, currentColor 10%, rgba(255, 255, 255, 0) 10%), linear-gradient(to left, currentColor 10%, rgba(255, 255, 255, 0) 10%);
    background-size: 1.25em;
    background-position: -0.0625em -0.1875em;
    border-radius: 0.1875em;
    box-shadow: inset 0 1.0625em #F78D72;
}
.calendar i:last-child {
    -webkit-transform-origin: 50% -1.5%;
    transform-origin: 50% -1.5%;
    -webkit-animation: flip 1.35s infinite linear;
    animation: flip 1.35s infinite linear;
}
.calendar i:before {
    content: '';
    position: absolute;
    top: 2.4375em;
    left: 3.6875em;
    display: block;
    width: 1.125em;
    height: 1.125em;
    background-color: #FFDEA3;
}
.calendar:before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    left: 50%;
    width: 0.25em;
    height: 1.5625em;
    margin: 3.9375em 0 0 -1.875em;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    color: inherit;
    background-color: currentColor;
    border-radius: 0.1875em;
    box-shadow: 3.75em 0 currentColor;
    -webkit-animation: mask 1.35s infinite linear;
    animation: mask 1.35s infinite linear;
}
@-webkit-keyframes flip {
    0%, 62% {
        -webkit-transform: translate(-50%, -50%) rotateX(0) scaleY(1);
        transform: translate(-50%, -50%) rotateX(0) scaleY(1);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) rotateX(265deg) scaleY(0.5);
        transform: translate(-50%, -50%) rotateX(265deg) scaleY(0.5);
    }
}
@keyframes flip {
    0%, 62% {
        -webkit-transform: translate(-50%, -50%) rotateX(0) scaleY(1);
        transform: translate(-50%, -50%) rotateX(0) scaleY(1);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) rotateX(265deg) scaleY(0.5);
        transform: translate(-50%, -50%) rotateX(265deg) scaleY(0.5);
    }
}
@-webkit-keyframes mask {
    63% {
        -webkit-transform: translate(-50%, 0%);
        transform: translate(-50%, 0%);
    }
    74% {
        -webkit-transform: translate(-50%, 0%) scaleY(0.5);
        transform: translate(-50%, 0%) scaleY(0.5);
    }
    74.1% {
        -webkit-transform: translate(-50%, 0%) scaleY(1);
        transform: translate(-50%, 0%) scaleY(1);
    }
}
@keyframes mask {
    63% {
        -webkit-transform: translate(-50%, 0%);
        transform: translate(-50%, 0%);
    }
    74% {
        -webkit-transform: translate(-50%, 0%) scaleY(0.5);
        transform: translate(-50%, 0%) scaleY(0.5);
    }
    74.1% {
        -webkit-transform: translate(-50%, 0%) scaleY(1);
        transform: translate(-50%, 0%) scaleY(1);
    }
}

HTML

Animated Calendar Icon

icon, calendar

编辑器支持Emmet

快捷键

Animated Calendar Icon

icon, calendar

9个纯CSS实现的六边形旋转器动画图标

5个纯CSS实现的天气预报动画图标

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：