[分享]css3小红包

CSS3小红包是一个非常酷的样式，它可以让你的网站看起来更加具有现代感、时尚感，同时增加访问者的互动体验。这里是一个使用CSS3小红包的代码实例： .redpacket { : relative; w...

CSS3小红包是一个非常酷的样式，它可以让你的网站看起来更加具有现代感、时尚感，同时增加访问者的互动体验。

这里是一个使用CSS3小红包的代码实例：

 .redpacket {
    position: relative;
    width: 100px;
    height: 50px;
    margin: 50px auto;
    border-radius: 25px 25px 45px 45px;
    background: linear-gradient(to bottom, #E33F54 0%, #A02E3A 100%);
    box-shadow: 0px 0px 10px #D63040;
    transition: all 0.2s;
    cursor: pointer;
  }
  
  .redpacket:hover {
    transform: translateY(-5px);
    box-shadow: 0px 10px 10px #D63040;
  }
  
  .redpacket:before {
    content: "";
    position: absolute;
    top: 45px;
    left: 50%;
    margin-left: -15px;
    width: 0;
    height: 0;
    border: 15px solid transparent;
    border-top-color: #E33F54;
    transform: rotate(45deg);
  }
  
  .redpacket:after {
    content: "抢";
    position: absolute;
    top: 18px;
    left: 28px;
    font-size: 24px;
    font-weight: bold;
    color: #FFF;
    text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8);
  } 

这段代码使用CSS3的众多特性，如渐变、边框半径、盒子阴影、过渡等实现了小红包的效果。当鼠标悬停在小红包上时，还使用了transform和box-shadow属性让它变得更加立体和真实。

小红包的伪类:before和:after则分别用来制作小三角和文本，并使用绝对定位控制它们的位置。

在网页中加入这种小红包，可以作为促销活动的一种方式，也可以用作网站的交互效果，增加用户的黏性。无论如何，该样式都是一种非常实用而好看的技巧。