想直接拿走的老板，链接放在这里：上传后更新
缘
创作随缘，不定时更新。
创作背景
刚看到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>
效果图
