css实现表白爱心信封动画效果代码
代码语言:html
所属分类:表白
代码描述:css实现表白爱心信封动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 70px; padding: 0; height 100vh; display: flex; justify-content: center; align-items: center; background-color: #44a6c6; } #card { width: 0; height: 0; border-top: 100px solid #e8f4f8; border-right: 170px solid #c1e1ec; border-bottom: 100px solid #d4ebf2; border-left: 170px solid #c1e1ec; box-shadow: 10px 10px 5px #3793b2; } .heart { width: 32px; height: 32px; background-color: #ff1414; transform: translate(-50%, -50%) rotate(45deg); animation: heartbeat 1.4s infinite; } .heart:before { content: ""; position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; background-color: #ff1414; transform: translateY(-50%); border-radius: 50%; } .heart:after { content: ""; position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; background-color: #ff1414; transform: translateX(-50%); border-radius: 50%; } @keyframes heartbeat { 0% { transform: translate(-50%, -50%) rotate(45deg) scale(1); } 25% { transform: translate(-50%, -50%) rotate(45deg) scale(1); } 30% { transform: translate(-50%, -50%) rotate(45deg) scale(1.4); } 50% { transform: translate(-50%, -50%) rotate(45deg) scale(1.2); } 70% { transform: translate(-50%, -50%) rotate(45deg) scale(1.4); } 100% { transform: translate(-50%, -50%) rotate(45deg) scale(1); } } .heart1 { width: 32px; height: 32px; background-color: #ff1414; transform: translate(-50%, -160%) rotate(45deg); } .heart1:before { content: ""; position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; background-color: #ff1414; transform: translateY(-50%); border-radius: 50%; } .heart1:after { content: ""; position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; background-color: #ff1414; transform: translateX(-50%); border-radius: 50%; } .heart1 { animation: heart1 2.5s ease-out 1s infinite; } @keyframes heart1 { 0% {transform: translateY(-200%) translateX(0) scale(0.25) rotate(45deg); opacity: 1;} 100% {transform: translateY(-400%) translateX(0) scale(1) rotate(50deg); opacity: 0;} } .heart2 { width: 32px; height: 32px; background-color: #ff1414; transform: translate(-50%, -250%) rotate(45deg); } .heart2:before { content: ""; position: absolute; top: 0; bottom: 0; width: 100%; height: 100%;.........完整代码请登录后点击上方下载按钮下载查看
网友评论0