css+js实现三维播放按钮点击翻转暂停动画效果代码
代码语言:html
所属分类:其他
代码描述:css+js实现三维播放按钮点击翻转暂停动画效果代码
代码标签: css js 三维 播放 按钮 点击 翻转 暂停 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.3.0.css"> <style> html { --size: 100px; } body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #c8c8e6; } #button-container { width: var(--size); height: var(--size); transition: 0.5s ease; transform: rotate3d(0, 1, 0, 0deg); transform-origin: 50% 50%; transform-style: preserve-3d; } #button-container.active { transform: rotate3d(0, 1, 0, -180deg); } button { display: block; aspect-ratio: 1/1; position: absolute; width: var(--size); color: #fff; font-size: 1.5rem; border: 1px solid white; outline: 0; transform-origin: 50% 50%; transition: 0.5s ease; cursor: pointer; backface-visibility: inherit; } button i { transform: skew(0, -15deg); } button#play-button { background-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0