美文网首页CSS3
CSS3实现红心点赞特效

CSS3实现红心点赞特效

作者: AstarX | 来源:发表于2018-06-05 14:16 被阅读0次

    1.创建html

    <view class="feed" bindtap='addAnimateFun' id="feed1">
    <view class="heart {{addAnimate}}" id="like1" rel="like" style="background-position: {{cssAnimate}} center;"></view>

    </view>

    2. css

    .heart {
    background: url(http://demo.htmleaf.com/1511/201511131551/images/web_heart_animation.png);
    background-position: left;
    background-repeat: no-repeat;
    height: 100px;
    width: 100px;
    cursor: pointer;
    position: absolute;
    left: -14px;
    background-size: 2900%;
    }

    .heart:hover,
    .heart:focus {
    background-position: right;
    }

    @-webkit-keyframes heartBlast {
    0% {
    background-position: left;
    }
    100% {
    background-position: right;
    }
    }

    @keyframes heartBlast {
    0% {
    background-position: left;
    }
    100% {
    background-position: right;
    }
    }

    .heartAnimation {
    display: inline-block;
    -webkit-animation-name: heartBlast;
    animation-name: heartBlast;
    -webkit-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: steps(28);
    animation-timing-function: steps(28);
    background-position: right;
    }

    @-webkit-keyframes dorsyHover {
    0% {
    -webkit-box-shadow: 0 0 1px 1px #aaa30a;
    }
    50% {
    -webkit-box-shadow: 0 0 1px 1px #fdfbc4;
    }
    100% {
    -webkit-box-shadow: 0 0 1px 1px yellow;
    }
    }

    @-webkit-keyframes dorsyDelete {
    0% {
    -webkit-transform: rotate(0deg);
    }
    40% {
    -webkit-transform: rotate(10deg);
    }
    80% {
    -webkit-transform: rotate(-10deg);
    }
    100% {
    -webkit-transform: rotate(0deg);
    }
    }

    3.js 点击事件添加类名

    4.核心语义

    1.background

    1. background-position: left; (结束为right)
      3.animate-duration:1s;(动画运行时间)
      4.animation-iteration-count :n / infinite ;(循环次数 n 不限)
      5.animation-timing-function: steps(28);

    速度曲线,使用三次贝塞尔函数的数学函数来生成速度曲线

    参数为steps时:
    第一个参数指定了时间函数中的间隔数量(必须是正整数)
    第二个参数可选,接受 start 和 end 两个值,指定在每个间隔的起点或是终点发生阶跃变化,默认为 end。
    step-start等同于steps(1,start),动画分成1步,动画执行时为开始左侧端点的部分为开始;
    step-end等同于steps(1,end):动画分成一步,动画执行时以结尾端点为开始,默认值为end。

    steps() 第一个参数 number 为指定的间隔数,即把动画分为 n 步阶段性展示,估计大多数人理解就是keyframes写的变化次数

    相关文章

      网友评论

        本文标题:CSS3实现红心点赞特效

        本文链接:https://www.haomeiwen.com/subject/bdmpsftx.html