当前位置：首页 > Web开发 > 正文

Web前端制作炫酷特效和动态icon

2024-03-31 Web开发

1.box-shadow属性除了常用于暗影效果、卡片等根本使用外，还可以用于实现对照炫酷的特效；

技术图片

类似这样的想过都是可以通过box-shadow属性制作的；资料来源于CSDN：很小白的小白

附上他的代码，

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin: 0px; padding: 0px; } body{ background: #000; } div{ width: 300px; height: 300px; position: absolute; left: calc(50% - 150px); top: calc(50% - 150px); border-radius: 50%; box-shadow: inset 0px 0px 50px #fff, inset 10px 0px 80px #f0f, inset -10px 0px 80px #0ff, inset 0px 0px 150px #f0f, inset -10px 0px 150px #0ff, 0px 0px 50px #fff, -10px 0px 50px #f0f, 10px 0px 50px #0ff; } </style> </head> <body> <div></div> </body> </html> ———————————————— 版权声明：本文为CSDN博主「很小白的小白」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文来由链接及本声明。原文链接：https://blog.csdn.net/qq_35401191/article/details/86666497

通过inset属性，制造内暗影和不加inset属性制作外暗影；然后对等的10PX -10PX 用差此外颜色，可以让摆布效果对称又炫彩；第三个PX我调了一下，应该是spread 暗影的巨细；

他这个调的已经挺都雅的，我是直接拿来用了；

2.CSS+DIV可以制作动态的很可爱的icon图样，如图所示

技术图片

此中下雨的效果代码：

STEP1: 整体HTML架构 <div class="icon rainy"> <div class="cloud"></div> <div class="rain"></div> </div> STEP2: 用CSS绘制云朵图标 CSS代码如下 body { max-width: 42em; padding: 2em; margin: 0 auto; color: #161616; font-family: ‘Roboto‘, sans-serif; text-align: center; background-color: currentColor; } .icon { position: relative; display: inline-block; width: 12em; height: 10em; font-size: 1em; /* control icon size here */ } .cloud { position: absolute; z-index: 1; top: 50%; left: 50%; width: 3.6875em; height: 3.6875em; margin: -1.84375em; background: currentColor; border-radius: 50%; box-shadow: -2.1875em 0.6875em 0 -0.6875em, 2.0625em 0.9375em 0 -0.9375em, 0 0 0 0.375em #fff, -2.1875em 0.6875em 0 -0.3125em #fff, 2.0625em 0.9375em 0 -0.5625em #fff; } .cloud:after { content: ‘‘; position: absolute; bottom: 0; left: -0.5em; display: block; width: 4.5625em; height: 1em; background: currentColor; box-shadow: 0 0.4375em 0 -0.0625em #fff; } .cloud:nth-child(2) { z-index: 0; background: #fff; box-shadow: -2.1875em 0.6875em 0 -0.6875em #fff, 2.0625em 0.9375em 0 -0.9375em #fff, 0 0 0 0.375em #fff, -2.1875em 0.6875em 0 -0.3125em #fff, 2.0625em 0.9375em 0 -0.5625em #fff; opacity: 0.3; transform: scale(0.5) translate(6em, -3em); animation: cloud 4s linear infinite; } .cloud:nth-child(2):after { background: #fff; } .rain{ position: absolute; z-index: 2; top: 50%; left: 50%; width: 3.75em; height: 3.75em; margin: 0.375em 0 0 -2em; background: currentColor; } .rain:after { content: ‘‘; position: absolute; z-index: 2; top: 50%; left: 50%; width: 1.125em; height: 1.125em; margin: -1em 0 0 -0.25em; background: #0cf; border-radius: 100% 0 60% 50% / 60% 0 100% 50%; box-shadow: 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), -1.375em -0.125em 0 rgba(255,255,255,0.2); transform: rotate(-28deg); animation: rain 3s linear infinite; /*设置动画 rain */ } STEP3: 下雨动画 /* 下雨动画 Animations */ @keyframes rain { 0% { background: #0cf; box-shadow: 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), -1.375em -0.125em 0 #0cf; } 25% { box-shadow: 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), -0.875em 1.125em 0 -0.125em #0cf, -1.375em -0.125em 0 rgba(255,255,255,0.2); } 50% { background: rgba(255,255,255,0.3); box-shadow: 0.625em 0.875em 0 -0.125em #0cf, -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), -1.375em -0.125em 0 rgba(255,255,255,0.2); } 100% { box-shadow: 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), -1.375em -0.125em 0 #0cf; } }

温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/32552.html

Web前端制作炫酷特效和动态icon

推荐文章

热门文章

标签

友情链接

关于本站

联系我们

特别鸣谢