当前位置：首页 > news >正文

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

news 来源：原创 2025/5/24 6:35:05

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

缘
创作背景
html结构
css样式
完整代码
- 基础版
- 进阶版(动态版)
效果图

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

缘

创作随缘，不定时更新。

创作背景

刚看到csdn出活动了，赶时间，直接上代码，令人丧气的是：活动的领域有要求，不是发够就行，瞬间意志消沉。

html结构

<div class="button"></div>

css样式

.button {
	background-image: url('a.gif');
	border-radius: 50%;
    margin: 60px;
    padding: 60px;
    width: 200px;
    height: 200px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease; 
}
.button:hover {
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}
body{
    text-align: center;
}

完整代码

基础版

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

<title>页面特效</title>
<style type="text/css">
.button {
	background-image: url('a.gif');
	border-radius: 50%;
    margin: 60px;
    padding: 60px;
    width: 200px;
    height: 200px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease; 
}
.button:hover {
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}
body{
    text-align: center;
} 

</style>

</head>
<body>

	<div class="button"></div>

</body>
</html>

进阶版(动态版)

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

<title>页面特效</title>
<style type="text/css">
.button {
	background-image: url('a.gif');
	border-radius: 50%;
    margin: 60px;
    padding: 60px;
    width: 200px;
    height: 200px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    animation: dynamic-shadow 2s infinite;
}
.button:hover {
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}
@keyframes dynamic-shadow {
    0% {
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
    }
    50% {
        box-shadow: 15px 15px 25px rgba(0, 0, 0, 0.7);
    }
    100% {
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
    }
}
body{
    text-align: center;
} 

</style>

</head>
<body>

	<div class="button">看我看我</div>

</body>
</html>