css实现打电话计时动画交互效果代码
代码语言:html
所属分类:动画
代码描述:css实现打电话计时动画交互效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet"> <style> body { overflow: hidden; font-family: 'Open Sans', sans-serif; } .wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer; } .wrapper.animate { pointer-events: none; } .wrapper.animate .call { width: 400px; height: 400px; opacity: 1; overflow: initial; transition: all 800ms; } .wrapper.animate .call p, .wrapper.animate .call span { transform: scale(1); } .wrapper.animate .phone { -webkit-animation: rotate 0.5s linear 0s forwards; animation: rotate 0.5s linear 0s forwards; } .wrapper.animate .phone::after { width: 0; height: 0; } .wrapper.animate .phone::before { width: 0; height: 0; } .loading::after { content: '\2026'; /* ascii code for the ellipsis character */ overflow: hidden; display: inline-block; vertical-align: bottom; -webkit-animation: ellipsis steps(4, end) 2s infinite; animation: ellipsis steps(4, end) 2s infinite; width: 0px; position: absolute; } .close { position: absolute; top: 0; right: 0; width: 20px; height: 20px; cursor: pointer; } .close::before, .close::after { content: ''; display: block; width: 4px; height: 40px; background-color: #37dab4; position: absolute; border-radius: 25px; } .close::before { transform: rotate(45deg); } .close::after { transform: rotate(-45deg); } @-webkit-keyframes ellipsis { to { width: 1.05em; } } @keyframes ellipsis { to { width: 1.05em; } } .call { width: 0; height: 0; background: #37dab4; border-radius: 50%; box-shadow: 0 0 40px 0 #b0e8db; display: flex; justify-content: center; align-items: center; position: absolute; flex-wrap: wrap; flex-direction: column; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: all 0.5s; transition-delay: 0.2s; transform-origin: 50% 50%; opacity: 0; overflow: hidden; } .call::after { content: ''; display: block; width: 500px; height: 500px; position: absolute; border-radius: 50%; background: rgba(55, 218, 180, 0.1); transform-origin: 50% 50%; z-index: -1; transition: all 500ms; mix-blend-mode: color; -webkit-animation: scale-after 3s ease-out 3s infinite normal; animation: scale-after 3s ease-out 3s infinite normal; } .call::before { content: ''; display: block; width: 470px; height: 470px; position: absolute; border-radius: 50%; background: rgba(55, 218, 180, 0.1); transform-origin: 50% 50%; z-index: -1; transition: all 500ms; -webkit-animation: scale-before 3s ease-in-out 3.5s infinite normal; animation: scale-before 3s ease-in-out 3.5s infinite normal; mix-blend-mode: color; } .call p { color: #fff; font-weight: bold; font-size: 100px; margin: 0; transform: scale(0); transform-origin: 50% 50%; transition: all 0.5s; transition-delay: 1s; } .call span:not(.counter) { display: block; color: #fff; font-size: 30px; font-weight: 100; transform: scale(0); transform-origin: 50% 50%; transition: all 0.5s; margin-left: -15px; margin-top: 10px; transition-delay: 1s; } .phone { width: 200px; height: 200px; background: #fff; border-radius: 50%; box-shadow: 0 0 40px 0 #b0e8db; display: flex; justify-content: center; align-items: center; position: absolute; transition: al.........完整代码请登录后点击上方下载按钮下载查看
网友评论0