想直接拿走的老板，链接放在这里：上传后更新
缘
创作随缘，不定时更新。
创作背景
刚看到csdn出活动了，赶时间，直接上代码。
html结构
<div class="cartoon-box"></div>
css_16">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>效果图
