js+css实现手机振动点击接电话交互动画效果代码
代码语言:html
所属分类:动画
代码描述:js+css实现手机振动点击接电话交互动画效果代码
代码标签: js css 手机 振动 点击 接 电话 交互 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --main-bg-color: #64C8C8; --main-fg-color: #252059; --green-medium-color: #7ace67; --green-dark-color: #5dc346; --red-medium-color: #ea5d6f; --red-dark-color: #e5384f; } body { height: 100vh; width: 100vw; display: flex; justify-content: center; margin: 0; background: var(--main-bg-color); perspective: 800px; } .phone { width: 16rem; height: 30rem; border-radius: 1rem 1rem 1.4rem 1rem; background: var(--main-fg-color); position: relative; box-shadow: 0 0 0 0.3rem var(--main-bg-color); display: flex; align-items: center; justify-content: center; } .phone::after { width: 17rem; height: 31rem; content: ''; position: absolute; background: var(--main-fg-color); box-shadow: 0 0 0.6rem 1rem var(--main-bg-color); top: 0; left: 0; border-radius: 1.8rem 2rem; z-index: -1; } .screen { width: 14.2rem; height: 28.2rem; background: var(--main-bg-color); position: absolute; border-radius: 0.8rem 0.8rem; display: flex; justify-content: center; transition: background 400ms; overflow: hidden; } .camera { width: 6rem; height: 1.6rem; position: absolute; background: var(--main-fg-color); border-radius: 5rem; top: -0.8rem; } .button { width: 3rem; height: 3rem; position: absolute; border-radius: 5rem; bottom: -4rem; display: flex; align-items: center; justify-content: center; opacity: 0; transition: 400ms; cursor: pointer; z-index: 4; } .call { background: var(--green-medium-color); } .call-end { background: var(--red-medium-color); } .button span { color: white; } .call:hover { transform: scale(1.1); background: var(--green-dark-color); } .calling .call-end { opacity: 1; bottom: 0.8rem; } .calling .call-end:hover { transform: scale(1.1); background: var(--red-dark-color); } .wrapper { transform: rotateX(30deg) rotate(30deg); } .wrapper:hover { animation: vibrate 100ms linear infinite; } .wrapper.calling:hover { animation: none; } .wrapper:not(.calling):hover .call { opacity: 1; bottom: 0.8rem; } :is(.wrapper:hover, .calling) .screen { background: white; } .user { wid.........完整代码请登录后点击上方下载按钮下载查看
网友评论0