跳动的心
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>墓亦龍-测试-跳动的心</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style type="text/css">
.content{
width:900px;/*主体(跳动)-大小和位置*/
height:900px;
margin:0 auto;
position:relative;/*以此为基准画心*/
animation-name: dump;/*绑定*/
animation-delay: 0ms;/*延迟几秒后开始*/
animation-duration: 1s;/*完成的时间 */
animation-timing-function: ease-in-out;/*完成的速度方式 */
animation-iteration-count: infinite;/*播放的次数*/
}
.content .left,.content .right{
position:absolute;
width:600px;/*2倍的半径*/
height:900px;/*3倍的半径*/
border-radius:300px 300px 0 0;/*心头的半径*/
background: red;
filter: drop-shadow(0 0 45px rgb(255,20,20));/* 滤镜 + 阴影 */
}
@keyframes dump{/*此动画在规定的完成时间内各阶段的状态 */
0%{
transform: scale(0.8,0.8);/*动画的形式-缩放动态(缩放的比例)*/
opacity: 1;/* 透明度 */
}
50%{
transform: scale(1,1);
opacity: 0.5;
}
100%{
transform: scale(0.8,0.8);
opacity: 1;
}
}
</style>
</head>
<body style="background-color: black;">
<p class="content">
<p class="left" style="transform: rotate(-45deg);"></p>
<p class="right" style="transform: rotate(45deg);left: 212px;"></p>
</p>
</body>
</html>
具体的实现思路：①用一个p块元素，去实现心的跳动状态(收缩动作)。已它为基准，在它中画心。
②心的实现就是2个长方形各自旋转45度，并交叉重合。此长方形的一端为半圆形。