CSS3实现心跳效果

晚上不怎么想看书,做了这个心跳效果,主要用了CSS3,也顺带复习一下。

先上html结构,结构很简单

<div class="heart">
        <div class="topLeft"></div>
        <div class="topRight"></div>
        <div class="bottom"></div>
    </div>

三个div的目的就是通过平移旋转调整边框变成?形~
CSS结构如下:

*{
    padding:0;
    margin:0;
}
body{
    background-color: black;
}
/*实现缩放效果的时候对父元素操作即可*/
.heart{
    margin:100px auto; 
    width:200px;
    height:200px;
    position: relative;
    animation-name: shake;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
}
.heart div{
    /* 通过父元素找到所有相同的子元素 */
    width:100%;
    height:100%;
    background-color: pink;
    position: absolute;
    /*  一定得配合相对的元素来进行绝对定位 */
    /* 相对父元素进行绝对定位 */
    /* 脱离了文档流 */
    animation-name: shadow;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
}
.topLeft{
    /* 先平移  再旋转 */
    transform: translate(-100px,0) rotate(-45deg); 
}
.topRight{
    transform: translate(100px,0) rotate(45deg);
}
.bottom{
    transform: translate(0,100px) rotate(45deg);
}
.topLeft,.topRight{
    border-radius: 105px 105px 0 0 ;
    /* 左上 右上 左下 右下 */
}
/* 动画: 定义一个关键帧 为元素去调用这个动画  */
/* 关键帧 每一步中所执行的效果 */
@keyframes shake{
    0%{
        transform:scale(0.9,0.9);
        /* 对当前的效果进行缩放 */
    }
    100%{
        transform:scale(1.2,1.2);
    }
}
@keyframes shadow{
    0%{
        box-shadow: 0 0 0 pink;
    }
    100%{
        box-shadow: 0 0 50px pink;
    }
}

CSS3 2D转换 transform

可以对元素进行移动、缩放、拉伸、转动、拉长

  • translate()
transform:translate(50px,100px)

右下为正,左上为负

  • rotate()
transform:rotate(50deg)

顺时针旋转

  • scale()
transform:scale(2,4)

按照宽高放大倍数

  • skew()
transform:skew(30deg,20deg)

使元素按照X轴,Y轴翻转给定的角度

  • matrix()
    matrix() 方法把所有 2D 转换方法组合在一起。
    matrix() 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。

CSS3 @keyframes 规则

在CSS3中创建动画,需要学习@keyframes规则
要使得动画能够在页面中展示,三个要点

  • 动画的名称需要规定
  • 动画的时长需要规定
  • 元素要调用动画名称
动画属性
  • animation 所有动画属性的简写属性
  • animation-name 规定@keyframe名称
  • animation-duration 规定动画完成的时间
  • animation-iteration-count 规定动画被播放的次数
    默认为1,infinite:无限次播放
  • animation-timing-function 规定动画的速度曲线
animation-timing-function:linear;//从头到尾速度相同
animation-timing-function:easy;//默认,从低速加快,在结束前变慢
animation-timing-function:ease-in;//动画以低速开始
animation-timing-function:ease-out;//动画以低速结束
animation-timing-function:cubic-bezier(n,n,n,n)
  • animation-direction定义是否应该轮流反向播放动画
    normal:默认值,正常播放
    alternate:轮流反向播放
div{
width:100px;height:100px;
background:red; position:relative;
animation-name:myfirst;//动画名称
animation-duration:5s;//动画完成时间
animation-timing-function:linear;//动画的速度设置为匀速
animation-delay:2s;//动画从何时开始
animation-iteration-count:infinite;//动画的播放次数无限
animation-direction:alternate;//动画轮流反向播放
animation-play-state:running;//规定动画正在运行
}
@keyframes myfirst{
0%{background:red;left:0px; top:0px}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值