css:打造一个故障风格按钮button

故障风格的按钮

<!DOCTYPE html>
<html>
<head><title>test</title><link href="https://fonts.font.im/css?family=Oswald" rel="stylesheet">
</head>
<style type="text/css">body{display: flex;justify-content: center;align-items: center;min-height:100vh;background: yellow;}button,button::after{width:380px;height:86px;font-size:36px;font-family: 'Oswald', sans-serif;background:linear-gradient(45deg,transparent 5%,#ff013c 5%);color:white;border:0;line-height: 88px;letter-spacing: 3px;box-shadow: 6px 0px 0px #00e6f6;outline: transparent;position:relative;}button::after{--slice0:inset(50% 50% 50% 50%);--slice1:inset(80% -6px 0 0);--slice2:inset(50% -6px 30% 0);--slice3:inset(10% -6px 85% 0);--slice4:inset(40% -6px 43% 0);--slice5:inset(80% -6px 5% 0);content:"HOVER NOW";display: block;position:absolute;top:0;left:0;bottom:0;background:linear-gradient(45deg,transparent 3%,#00e6f6 3%,#00e6f6 5%,#ff013c 5%);text-shadow: -3px -3px 0 #f8f005,3px 3px 0px #00e6f6;clip-path:var(--slice0);}@keyframes shad{0%{clip-path:var(--slice1);transform:translate(-20px,-10px);}10%{clip-path:var(--slice3);transform:translate(10px,10px);}20%{clip-path:var(--slice1);transform:translate(-10px,10px);}30%{clip-path:var(--slice3);transform:translate(0px,5px);}40%{clip-path:var(--slice2);transform:translate(-5px,0px);}50%{clip-path:var(--slice3);transform:translate(-5px,0px);}60%{clip-path:var(--slice4);transform:translate(5px,10px);}70%{clip-path:var(--slice2);transform:translate(-15px,10px);}80%{clip-path:var(--slice5);transform:translate(20px,-10px);}90%{clip-path:var(--slice1);transform:translate(-10px,0px);}100%{clip-path:var(--slice1);transform:translate(0);}}button:hover::after{animation:shad 1.5s alternate infinite;}
</style>
<body><button>HOVER NOW</button>
</body></html>

css:打造一个故障风格按钮button相关推荐

Css打造一个简单的静态七巧板
偶然在微博上看到用css写一个七巧板,正好也有一些源代码,于是就试着敲了敲. 主要是利用了css3的transform,实现平移,旋转,变形,直接用看到的代码敲出来之后有些问题,因为宽度上下面绿色的三 ...
python制作一个菜单_用CSS打造一个图形化的汉堡菜单
Python部落(python.freelycode.com)组织翻译,禁止转载,欢迎转发. 最近,我发现Vitaly Rubstov写的运球投篮特效十分了不起,我简直遏制不住想要亲自用代码实现这个功 ...
css竖向箭头符号_用css打造一个三角形箭头
3)方法二种的方法虽然我们可以实现调用一次背景图片标示四种三角状态的情况,但是在颜色方面确实单一的,我们只能由一种颜色,那我们需要增加三角形同样在激发鼠标悬浮伪类响应的时候,我们应该怎么做呢?比如鼠标 ...
html图片怎么加动画效果,css打造一个动画效果的图片墙
今天我们将开始建立另一个有趣的CSS演示.这次我们将创建一个大的.无缝的照片墙.当用户将鼠标悬停于一个图像,一个透明的黑色渐变效果覆盖在其上面. Demo:点击这里 HTML代码第一步我们需要创建一 ...
仅用 CSS 实现赛博朋克 2077 风格视觉效果
点击上方关注前端技术江湖,一起学习,天天进步作者 dragonir 原文链接:https://juejin.cn/post/6972759988632551460 文章开始之前先简单了解下什么是 ...
python关于七巧板的代码_Css打造一个简单的静态七巧板
偶然在微博上看到用css写一个七巧板,正好也有一些源代码,于是就试着敲了敲. 主要是利用了css3的transform,实现平移,旋转,变形,直接用看到的代码敲出来之后有些问题,因为宽度上下面绿色的三 ...
纯CSS打造的Family tree（族谱）
Family tree(族谱),也称家谱,用来记录家族世系繁衍辈份关系.本文结合实例,不借助任何js脚本,使用纯CSS打造一个漂亮的Family tree(族谱),也可以应用的企业组织架构图中. 查看 ...
纯css打造菜单响应,纯 CSS 打造标准的导航菜单－1
本连载分三节讲述如何利用 CSS 打造一个符合标准.兼容各浏览器(IE6 除外.IE7 可以)的导航菜单. 菜单内容全部使用 ul,利用 CSS 将 ul 变成需要的样式,本节讲述最简单的:如何把原本 ...
button按钮onclick触发不了_手把手教你深入CSS实现一个粒子动效的按钮
按钮(button)可能是网页中最常见的组件之一了,大部分都平淡无奇,如果你碰到的是一个这样的按钮,会不会忍不住多点几次呢? 转载链接: https://github.com/XboxYan/note ...

css:打造一个故障风格按钮button

css:打造一个故障风格按钮button相关推荐

最新文章

热门文章