div+css实现放大镜通讯录搜索动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现放大镜通讯录搜索动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { width: 100vw; height: 100vh; background-image: linear-gradient(to right bottom, #2e2150, #2a1d4c, #271948, #231645, #1f1241); } .container { margin: auto; position: absolute; bottom: 0; left: 0; top: 0; right: 0; top: -125px; height: 300px; width: 300px; } .container .contact-card { margin: auto; position: absolute; bottom: 0; left: 0; top: 0; right: 0; width: 250px; height: 120px; background-color: #fcecf3; border-radius: 4px; border-bottom: 8px solid #d2afd3; animation: contact-card-animate 3s ease-in-out infinite; overflow: hidden; opacity: 0; } .container .contact-card:nth-child(2) { animation-delay: 1.5s; } .container .contact-card .avatar { margin: auto; position: absolute; bottom: 0; left: 0; top: 0; right: 0; left: -125px; width: 65px; height: 65px; background-color: #d2afd3; border-radius: 4px; z-index: 3; } .container .contact-card .avatar::before { content: ""; margin: auto; position: absolute; bottom: 0; left: 0; top: 0; right: 0; top: -15px; height: 22.5px; width: 22.5px; background-color: #996aa9; border-radius: 50%; } .container .contact-card .avatar::after { content: ""; margin: auto; position: absolute; bottom: 0; left: 0; top: 0; right: 0; top: 40px; height: 25px; width: 40px; background-color: #996aa9; border-top-left-radius: 50%; border-top-right-radius: 50%; } .container .contact-card .text { position: absolute; top: 42.5px; right: 40px; width: 100px; height: 7.5px; background-color: #996aa9; } .container .contact-card .text::before { content: ""; margin: auto; position: absolute; bottom: 0; left: 0; top: 0; right: 0; top: 17.5px; width: 120px; height: 7.5px; background-color: #996aa9; } .container .contact-card .text::after { content: ""; margin: auto; position: absolute; bottom: 0; left: 0; top: 0; right: 0; top: 32.5px; width: 110px; height: 7.5px; background-color: #996aa9; } @keyframes contact-card-animate { 0% { opacity: 0; top: -300px; width: 0px; } 1% { opacity: 1; top: -300px; width: 0px; } 10% { top: -300px; width: 250px; } 20% { top: 0px; width: 250px; } 25% { top: 0px; width: 250px; } 35% { top: 0px; width: 250px; } 50% { top: 300px; width: 250px; } 65% { opacity: 1; top: 300px; width: 0px; } 100% { opacity: 0; top: 300px; width: 0px; } } .container #magnifying-glass { margin: auto; position: absolute; bottom: 0; left: 0; right: 0; width: 150px; height: 150px; border: 14px solid #6fc5d3; border-radius: 50%; animation: magnifying-glass-animate 1.5s ease-in-out infinite; animation-delay: 0.375s; transform: rotate(37.5deg); left: 150px; top: 0; } .container #magnifying-gla.........完整代码请登录后点击上方下载按钮下载查看
网友评论0