想直接拿走的老板，链接放在这里：上传后更新
缘
创作随缘，不定时更新。
创作配景
刚看到csdn出运动了，赶时间，直接上代码，令人丧气的是：运动的范畴有要求，不是发够就行，刹时意志消沉。
html结构
- <div class="button"></div>
- .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>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
发表于 2025-10-12 07:40:20
