纯CSS实现圆形卡片的周边阴影

Ambient Shadow，漂亮的阴影特效。并且带有图像淡入淡出切换动画。可用于制作动画图标。

css3, shadow

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

:root {
    /* Image URL  */
    /* Image witdh */
    /* Image height */
    /* Image border radius */
    /* Shadow X axis (positive or negative) */
    /* Shadow Y axis (positive or negative) */
    /* Shadow opacity */
    /* Shadow blur range */
}
/* MAGIC START HERE */
/* ████████████████████████████ */

.AmbientShadow {
    width: 200px;
    width: 200px;
    height: 200px;
    height: 200px;
    font-size: 0;
    position: relative;
    -webkit-transition-property: width, height;
    transition-property: width, height;
    -webkit-transition-duration: 200ms;
    transition-duration: 200ms;
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275)
}
.AmbientShadow::before,
.AmbientShadow::after {
    content: "";
    background-image: url('/uploads/161001/normal2.jpg');
    -webkit-animation: switchBackground 6s infinite linear;
    animation: switchBackground 6s infinite linear;
    -webkit-animation-direction: both;
    animation-direction: both;
    border-radius: 46px;
    border-radius: 46px;
    background-size: cover;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}
.AmbientShadow::before {
    z-index: 0;
    padding: 50%;
    position: absolute;
    top: 20px;
    top: 15px;
    left: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.5;
    opacity: 0.5;
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="20" /><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="1.7870000000000001 -0.715 -0.072 0 0 -0.213 1.305 -0.072 0 0 -0.213 -0.715 1.9280000000000002 0 0 0 0 0 1 0" /><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1.5" intercept="-0.25" /><feFuncG type="linear" slope="1.5" intercept="-0.25" /><feFuncB type="linear" slope="1.5" intercept="-0.25" /></feComponentTransfer></filter></svg>#filter');
    -webkit-filter: blur(20px) saturate(200%) contrast(1.5);
    filter: blur(20px) saturate(200%) contrast(1.5);
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="40" /><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="1.7870000000000001 -0.715 -0.072 0 0 -0.213 1.305 -0.072 0 0 -0.213 -0.715 1.9280000000000002 0 0 0 0 0 1 0" /><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1.5" intercept="-0.25" /><feFuncG type="linear" slope="1.5" intercept="-0.25" /><feFuncB type="linear" slope="1.5" intercept="-0.25" /></feComponentTransfer></filter></svg>#filter');
    -webkit-filter: blur(40px) saturate(200%) contrast(1.5);
    filter: blur(40px) saturate(200%) contrast(1.5)
}
.AmbientShadow::after {
    position: absolute;
    z-index: 1;
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1.15" intercept="-0.07499999999999996" /><feFuncG type="linear" slope="1.15" intercept="-0.07499999999999996" /><feFuncB type="linear" slope="1.15" intercept="-0.07499999999999996" /></feComponentTransfer></filter></svg>#filter');
    -webkit-filter: contrast(1.15);
    filter: contrast(1.15);
    box-shadow: 0 5px 30px rgba(0, 0, 0, .2)
}
@-webkit-keyframes switchBackground {
    19% {
        background-image: url(var(--image1));
    }
    20%,
    30% {
        background-image: url('/uploads/161001/normal1.jpg');
    }
    100% {
        background-image: url(var(--image1));
    }
}
@keyframes switchBackground {
    19% {
        background-image: url(var(--image1));
    }
    20%,
    30% {
        background-image: url('/uploads/161001/normal1.jpg');
    }
    100% {
        background-image: url(var(--image1));
    }
}

HTML

Ambient Shadow，漂亮的阴影特效。并且带有图像淡入淡出切换动画。可用于制作动画图标。

css3, shadow

编辑器支持Emmet

快捷键

Ambient Shadow，漂亮的阴影特效。并且带有图像淡入淡出切换动画。可用于制作动画图标。

css3, shadow

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

纯CSS3实现的画布外菜单（入场时带边角变形动画）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：