css实现带有未来科技感的冰火按钮美化效果代码
代码语言:html
所属分类:表单美化
代码描述:css实现带有未来科技感的冰火按钮美化效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { padding: 0; margin: 0; height: 100vh; background-image: url(//repo.bfw.wiki/bfwrepo/image/5fc1a9b3bd22e.png); background-size: cover; background-position: center center; display: flex; flex-direction: column; align-items: center; justify-content: center; } .button { border: 1px solid green; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transform: skewX(-10deg); height: 50px; width: 200px; border-radius: 20px 5px 20px 0px; position: relative; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; font: 15px sans-serif; font-weight: 300; text-shadow: 0 0 20px #fff; text-transform: uppercase; -webkit-animation: breath2 2s 0.5s infinite alternate; animation: breath2 2s 0.5s infinite alternate; transition: all 0.2s ease; cursor: pointer; } .button:before { content: ""; display: block; width: calc(100% - 22px); height: calc(50px - 8px); -webkit-animation: breath 2s infinite alternate; animation: breath 2s infinite alternate; left: 10px; top: 3px; position: absolute; background-color: transparent; border: 1px solid #fff; border-radius: 15px 3px 15px 3px; } .button.fire { border-color: #ffeca8; background-image: linear-gradient(to bottom, rgba(255, 138, 48, 0.6), rgba(240, 96, 29, 0.6)); box-shadow: 0 0 70px rgba(255, 138, 48, 0.6), 0 5px 20px rgba(255, 138, 48, 0.6), inset 0 1px #ffeca8, inset 0 -1px #ffeca8; color: #ffeca8; } .button.fire:before { box-shadow: inset 0 0 30px 0 #ffeca8; } .button.ice { border-color: #a8ecff; background-image: linear-gradient(to bottom, rgba(48, 138, 255, 0.5), rgba(29, 96, 240, 0.5)); box-shadow: 0 0 70px rgba(48, 138, 255,.........完整代码请登录后点击上方下载按钮下载查看
网友评论0