html爱心代码简单,vivo手机可以打开的爱心代码是什么

html爱心代码简单,vivo手机可以打开的爱心代码是什么详细介绍

.container { width: 300px; height: 240px; margin: auto; position: relative; } @keyframes heartbeat-left { 0%, 100% { transform: scale(0.95) rotate(-45deg); transform-origin: 0 100%; } 50% { transform: scale(1.00) rotate(-45deg); transform-origin: 0 100%; } } @keyframes heartbeat-right { 0%, 100% { transform: scale(0.95) rotate(45deg); transform-origin: 100% 100%; } 50% { transform: scale(1.00) rotate(45deg); transform-origin: 100% 100%; } } .left, .right { position: absolute; top: 0; width: 150px; height: 240px; border-radius: 150px 150px 0 0; background: lightcoral; animation-iteration-count: infinite; animation-delay: 500ms; animation-timing-function: cubic-bezier(0, 0, 0, 1.74); animation-play-state: running; animation-duration: 2000ms; } .left { animation-name: heartbeat-left; left: 150px; transform: rotate(-45deg); transform-origin: 0 100%; box-shadow: inset 6px 6px 0 6px rgba(255, 255, 255, 0.1); } .right { right: 150px; transform: rotate(45deg); animation-name: heartbeat-right; transform-origin: 100% 100%; box-shadow: inset -6px -6px 0 6px rgba(255, 255, 255, 0.1); }