<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>墓亦龍-测试-跳动的心</title>
<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:
HTML5-跳动的心+详细注解?
最新推荐文章于 2024-07-11 16:15:52 发布