react实现鼠标按住不放确认操作动画效果代码
代码语言:html
所属分类:其他
代码描述:react实现鼠标按住不放确认操作动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;700&display=swap"); body, html { padding: 0; margin: 0; font-size: 20pt; } .app { display: grid; place-items: center; min-height: 100vh; background: linear-gradient(to bottom right, #6c0308, #ac2318, #dc4338); font-family: "Roboto", sans-serif; } button { border-color: transparent; background-color: transparent; font-family: inherit; font-weight: 300; font-size: 2rem; color: #f2f2f2; width: 20rem; height: 20rem; border-radius: 50%; border: solid #441500 0; display: grid; place-items: center; position: relative; transition: 0.2s; } button.confirmed { color: #ac2318; font-weight: 700; transition: 0.2s !important; } button .inner { background-color: #441500; display: grid; place-items: center; border-radius: 50%; transition: 0.3s; width: 10rem; height: 10rem; z-index: 3; } button.confirmed .inner { transform: rotate(360deg); transition: 0.4s; } button.confirmed .inner, button.confirmed .growing { background-color: #f1f1f1; transition: 0.4s !important; } button .inner, button .growing { border-radius: 50%; position: absolute; top: calc(50% - 5rem); left: calc(50% - 5rem); } button .growing { background-color: #441500; content: " "; width: 10rem; height: 10rem; z-index: 2; } button .growing, button { transition: 0.2s; } button:active { transition: 4000ms linear; } button:active .growing { transition: 4000ms ease-in; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rorate(360deg); } } </style> </head> <body > <div id="root"> </div> <script type="text/ja.........完整代码请登录后点击上方下载按钮下载查看
网友评论0