【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>效果圖
函數：用法詳解與實例分析)
)
)
