订单完成动画按钮特效
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.truck-button {
--color: #fff;
--background: #2B3044;
--tick: #16BF78;
--base: #0D0F18;
--wheel: #2B3044;
--wheel-inner: #646B8C;
--wheel-dot: #fff;
--back: #6D58FF;
--back-inner: #362A89;
--back-inner-shadow: #2D246B;
--front: #A6ACCD;
--front-shadow: #535A79;
--front-light: #FFF8B1;
--window: #2B3044;
--window-shadow: #404660;
--street: #646B8C;
--street-fill: #404660;
--box: #DCB97A;
--box-shadow: #B89B66;
padding: 12px 0;
width: 172px;
cursor: pointer;
text-align: center;
position: relative;
border: none;
outline: none;
color: var(--color);
background: var(--background);
border-radius: var(--br, 5px);
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(var(--rx, 0deg)) translateZ(0);
transform: rotateX(var(--rx, 0deg)) translateZ(0);
transition: border-radius.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0