HTML CSS绘制新年祝福语

「PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛」

前言

为了参加掘金社区的春节创意投稿活动。新年的脚步在倒计时中慢慢的接近，刚刚过完世界公历的新年，又快迎来中国的农历春节。世界各国年的味道截然不同，过年的感受千差万别，而中国进入农历腊月，欢度春节的气氛就越来越浓厚了。为此使用HTML、CSS、新年祝福语动画。

用Html+Css 绘制新年祝福语

• 使用 css3 的 box-shadow 和 text-shadow 属性

  1. box-shadow(盒子阴影)

  box-shadow: box-shadow: -5px 5px 50px 4px #fa6c00; box-shadow: x轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展 阴影颜色 投影方式(默认值outset)

  • 属性说明：

    • offset-x: 必需，取正负值都可。水平阴影的位置
    • offset-y: 必需，取正负值都可。垂直阴影的位置
    • blur: 可选，只能取正值。blur-radius阴影模糊半径，0即无模糊效果，值越大阴影边缘越模糊
    • spread: 可选，取正负值都可。spread代表阴影的周长向四周扩展的尺寸，正值，阴影扩大，负值阴影缩小
    • color: 可选，阴影的颜色。如果不设置，浏览器会取默认颜色，通常是黑色，各浏览器默认颜色有差异，建议不要省略。可以是rgb(250, 0, 0), 也可以是有透明值的 rgba(250, 0, 0, 0.5)
    • inset/outset: 可选。投影方式 (默认值 outset)外部投影，也可修改为内部投影（inset）

    注意：投影方式 可以写在参数的第一个或者最后一个，其他位置无效

  2. text-shadow(字体阴影)

  text-shadow: 4px 1px 16px red; text-shadow: X轴 Y轴 Rpx color

  • 属性说明：（顺序依次对应）： 阴影的X轴(可以使用负值)    阴影的Y轴(可以使用负值)    阴影模糊值（大小）    阴影的颜色

让祝福语有一个动画效果

创建一个 CSS 动画 animation

animation: swing 3s ease-in-out infinite alternate;

animation: name duration timing-function delay iteration-count direction;

• 默认值：none 0 ease 0 1 normal

• 属性：

  • name: 规定需要绑定的选择器的 keyframe 名称
  • duration：规定完成动画所花费的时间，以秒或者毫秒计
  • timing-function：规定动画的速度曲线（有几个设置值）
  • delay：可选。定义动画开始前等待的时间，以秒或毫秒计。默认值是 0
  • iteration-count：属性定义动画的播放次数（n | infinite）n次或者无限次播放
  • direction：是否应该轮流反向播放动画 （normal | alternate）默认值normal, 动画正常播放; alternate 动画轮流反向播放

      @keyframes swing {
         0% { 
             transform: translateY(-100px);
             opacity: 0;
         }
         90% {
             opacity: 1;
             transform:translateY(10px);
         }
         100% {
             transform:translateY(0px);
         }
      }
  

效果如下

最后祝大家在新的一年里：身体健康平安，生活充实饱满，事业步步高升，心情阳光灿烂，财运滚滚而来，家庭美满幸福，新年开心快乐！