CSS

CSS爱心:把你的心我的心串一串

特别声明:如果您喜欢小站的内容,可以点击 终身VIP¥188.00元 包年VIP¥88.00元 包季VIP¥28.00 包月VIP¥10.00元 进行全站阅读。 如果您对付费阅读有任何建议或想法,欢迎发送邮件至: 864479410@qq.com,或添加QQ:864479410(^_^)

前面几个小节都要提到Box-Shadow,这个小节让我们来真正感受它的强大吧。话不多说,直接看图:

这个扑通扑通跳动的心,就是Box-Shadow制作的。如果你看过前面小节《CSS3 Box-Shadow Loading,创造无限可能》,应该看到这个效果,就可以自己动手做了。

下面我们一起动手试试吧

绘制心形

<div class="heart"></div>

css

.heart {
  font-size: 30px;
  width: 1em;
  height: 1em;
  color: red;
  background-color: currentColor;
  border-radius: 50%;
}

(0,0)坐标点,下面我们画出更多的点

.heart {
  ...
  box-shadow:
    /* 左边上方2个点 */
    -3.3em -3.3em, 
    -2.2em -3.3em,

    /* 右边上方2个点 */
    2.2em -3.3em, 
    3.3em -3.3em,

    /* 左边第二排四个点 */
    -4.4em -2.2em, 
    -3.3em -2.2em, 
    -2.2em -2.2em, 
    -1.1em -2.2em,

    /* 右边第二排四个点 */
    1.1em -2.2em, 
    2.2em -2.2em, 
    3.3em -2.2em, 
    4.4em -2.2em;
}

依次类推,我们画出全部的点

下面我们让心跳起来,看图一,我们的心是从一个点,变换成多个点,从而形成心形的。ok,我们就先不加box-shadow,动画的时候再加上

...
.heart {
  /* box-shadow ... 去掉 */
  animation: heart 1s infinite alternate;
}

@keyframes heart {
  to {
    box-shadow:
    /* 左边上方2个点 */
    -3.3em -3.3em, 
    -2.2em -3.3em,

    /* 右边上方2个点 */
    2.2em -3.3em, 
    3.3em -3.3em,

    /* 左边第二排四个点 */
    -4.4em -2.2em, 
    -3.3em -2.2em, 
    -2.2em -2.2em, 
    -1.1em -2.2em,

    /* 右边第二排四个点 */
    1.1em -2.2em, 
    2.2em -2.2em, 
    3.3em -2.2em, 
    4.4em -2.2em;
    color: hsla(0, 100%, 50%, 0.6);
  }
}

好像效果一般,没有图一那么扑通扑通的感觉,这个就没有那么生动了。是什么原因导致的了?

动画的速度曲线导致的,这里没有设置animation-timing-function。默认是ease,动画以低速开始,然后加快,在结束前变慢,我们采用cubic-bezier,贝塞尔曲线来对动画速度曲线进行描述

.heart {
  /* box-shadow ... 去掉 */
  animation: heart 1s infinite alternate  cubic-bezier(0.5, 1.7, 0.5, 1.5);
}

这样效果就和图一一致了哦。

小结

本小结知识:

1、Box-Shadow 坐标系

2、Box-Shadow 多阴影

3、animation 动画(仅执行一次:forwards,永久执行 infinite),alternate(动画轮流反向播放。)

4、animation 动画的速度曲线。linear 动画从头到尾的速度是相同的;ease 默认。动画以低速开始,然后加快,在结束前变慢;ease-in 动画以低速开始;ease-out 动画以低速结束;ease-in-out 动画以低速开始和结束;cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

小伙伴们,有问题可以评论区留言哦,欢迎大家点评。需要源码的小伙伴可以购买,私信我哦。

谢谢大家一直以来的支持。

源码下载地址

资源下载价格1立即支付    升级VIP后免费升级VIP
本站资源一次收费,永久下载!发现资源失效,联系站长恢复即可!由于源码具有可复制性、可传播性,一经购买,概不退货,购买前请再三确认!本站提供相关技术支持,网站底部联系即可。时间:周一 ~ 周五 9:30-18:00。谢谢合作!

VIP用户所有收费资源免费,登录后左上角点击 昵称 ,进入用户中心充值成为VIP会员!如果您已经登录,点击这里成为尊贵VIP用户!

(268)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注