CSS不规则按钮动画的实现/* 第一步:定义按钮样式 */ .button { display: inline-block; padding: 15px 30px; background-color:
CSS不规则按钮动画的实现
/* 第一步:定义按钮样式 */ .button { display: inline-block; padding: 15px 30px; background-color: #333; color: #fff; font-size: 18px; border-radius: 5px; position: relative; overflow: hidden; /* 确保文字不会被剪裁 */ } /* 第二步:定义伪元素 */ .button::before { content: ""; position: absolute; top: -25px; left: -25px; width: 0; height: 0; border: 25px solid transparent; border-top-color: #6f6; border-right-color: #9f9; border-bottom-color: #cfc; border-left-color: #9f9; transition: all 0.5s ease-in-out; transform: rotate(45deg); } .button::after { content: ""; position: absolute; bottom: -25px; right: -25px; width: 0; height: 0; border: 25px solid transparent; border-top-color: #cfc; border-right-color: #9f9; border-bottom-color: #6f6; border-left-color: #9f9; transition: all 0.5s ease-in-out; transform: rotate(45deg); } /* 第三步:定义鼠标悬浮时按钮的动画效果 */ .button:hover::before { width: calc(100% + 50px); height: calc(100% + 50px); top: -25px; left: -25px; } .button:hover::after { width: calc(100% + 50px); height: calc(100% + 50px); bottom: -25px; right: -25px; } /* 第四步:完成按钮效果 */
以上就是一个不规则按钮动画效果的实现代码。首先定义基础样式,然后通过伪元素before和after在按钮上加入两个不规则的三角形。再通过鼠标悬浮时对伪元素的transition进行控制,让按钮上的不规则三角形动起来。最后通过一些细节调整就可以得到完美的效果。我们可以根据需要自定义边框的颜色和宽度,也可以调整三角形的大小和位置,来达到更加丰富的效果。这是CSS的神奇之处,只需几行代码就能实现复杂的动画效果。
粉丝
0
关注
0
收藏
0