*{ margin: 0; padding: 0; } .heart{ position:absolute; left: 50%; top:50%; margin-left: -150px; margin-top: -135px; width: 300px; height:270px; background: transparent; /*box-shadow: 2px 2px 5px #000;*/ filter:drop-shadow(0px 0px 20px rgb(255,20,20));//阴影实现:filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值); animation: test 1s linear infinite; } .heart:before, .heart:after{ content: ""; position: absolute; left: 150px; width: 150px; height: 240px; background: rgb(255,0,0); border-radius: 150px 150px 0 0; transform:rotate(-45deg); transform-origin: 0 100%; } .heart:after{ left: 0; transform:rotate(45deg); transform-origin: 100% 100%; } @keyframes test{ 0%{ transform: scale(0.8,0.8); opacity: 1; } 25%{ transform: scale(1,1); opacity: 0.8; } 100%{ transform: scale(0.8,0.8); opacity: 1; } }
简单的CSS3小作品,理解过后有助于对CSS3的学习