<>使用css3 animation实现心跳动的效果

直接上代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</
title> <style type="text/css"> .container { position: relative; margin: 100px; }
.heart { position:relative; width: 100px; height: 100px; background: red;
animation: hit .5s infinite alternate; transform: rotate(45deg); } .heart:before
{ position: absolute; left: -50px; content: ''; width: 100px; height: 100px;
background: red; border-radius: 50%; animation: hitLeft .5s infinite alternate;
} .heart:after { position: absolute; top: -50px; content: ''; width: 100px;
height: 100px; background: red; border-radius: 50%; animation: hitTop .5s
infinite alternate; } @keyframes hit { from { width: 100px; height: 100px; } to
{ width:150px; height: 150px; } } @keyframes hitTop { from { width: 100px;
height: 100px; top: -50px; } to { width: 150px; height: 150px; top: -75px; } }
@keyframes hitLeft { from { width: 100px; height: 100px; left: -50px; } to {
width: 150px; height: 150px; left: -75px; } } </style> </head> <body> <div class
="container"> <div class="heart"></div> </div> </body> </html>

技术
©2019-2020 Toolsou All rights reserved,
HashMap详解某东14薪变16薪,是诚意还是套路?浏览器内核(理解)java四大函数式接口(重点,简单)html写樱花树,写樱花树的作文让人意想不到的Python之樱花树(turtle库的华丽样式)os模块的简单使用