【css酷炫效果】纯CSS实现球形阴影效果

最新推荐文章于 2025-05-11 11:26:37 发布

冰夏之夜影

最新推荐文章于 2025-05-11 11:26:37 发布

阅读量321

点赞数 9

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/u011561335/article/details/146343327

版权

【css酷炫效果】纯CSS实现球形阴影效果

缘
创作背景
html结构
css样式
完整代码
效果图

想直接拿走的老板，链接放在这里：上传后更新

缘

创作随缘，不定时更新。

创作背景

刚看到csdn出活动了，赶时间，直接上代码。

html结构


<div class="cartoon-box"></div>

css样式

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.cartoon-box {
    width: 200px;
    height: 200px;
	border-radius: 50%;
    background-image: url(a.gif);
    filter: 
        drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.5))
        drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.5))
        drop-shadow(0px 0px 12px rgba(0, 0, 0, 0.5))
        drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.5))
        drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.5));
    box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.5);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        filter: 
            drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.5))
            drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.5))
            drop-shadow(0px 0px 12px rgba(0, 0, 0, 0.5))
            drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.5))
            drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.5));
    }
    50% {
        transform: scale(1.1);
        filter: 
            drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.7))
            drop-shadow(0px 0px 12px rgba(0, 0, 0, 0.7))
            drop-shadow(0px 0px 18px rgba(0, 0, 0, 0.7))
            drop-shadow(0px 0px 24px rgba(0, 0, 0, 0.7))
            drop-shadow(0px 0px 30px rgba(0, 0, 0, 0.7));
    }
    100% {
        transform: scale(1);
        filter: 
            drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.5))
            drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.5))
            drop-shadow(0px 0px 12px rgba(0, 0, 0, 0.5))
            drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.5))
            drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.5));
    }
}

完整代码

<!DOCTYPE html>
<html lang="en"> 
<head>

<title>页面特效</title>
<style type="text/css">
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.cartoon-box {
    width: 200px;
    height: 200px;
	border-radius: 50%;
    background-image: url(a.gif);
    filter: 
        drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.5))
        drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.5))
        drop-shadow(0px 0px 12px rgba(0, 0, 0, 0.5))
        drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.5))
        drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.5));
    box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.5);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        filter: 
            drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.5))
            drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.5))
            drop-shadow(0px 0px 12px rgba(0, 0, 0, 0.5))
            drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.5))
            drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.5));
    }
    50% {
        transform: scale(1.1);
        filter: 
            drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.7))
            drop-shadow(0px 0px 12px rgba(0, 0, 0, 0.7))
            drop-shadow(0px 0px 18px rgba(0, 0, 0, 0.7))
            drop-shadow(0px 0px 24px rgba(0, 0, 0, 0.7))
            drop-shadow(0px 0px 30px rgba(0, 0, 0, 0.7));
    }
    100% {
        transform: scale(1);
        filter: 
            drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.5))
            drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.5))
            drop-shadow(0px 0px 12px rgba(0, 0, 0, 0.5))
            drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.5))
            drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.5));
    }
}
</style>

</head>
<body>

<div class="cartoon-box"></div>

</body>
</html>