CSS3旋转蜂蜜文案

蜜蜂是大自然里的勤奋工作者，他们采集着花粉和花蜜为我们提供最甜美的味蕾享受。CSS3旋转蜂蜜文案，给我们带来了别样的创意，跟着小编一起来感受风采吧！

.rot{
    animation: rotate 2s linear infinite;
}
@keyframes rotate{
from{
    transform: rotate(0deg);
}
to{
    transform: rotate(360deg);
}
}
.bee{
    display: inline-block;
    position: relative;
    width: 50px;
    height: 50px;
    background-image: url('bee.png');
    background-size: cover;
}
.bee:before{
    content: '蜂蜜';
    position: absolute;
    top: 120%;
    left: -70%;
    width: 140%;
    padding: 20px 10px;
    background: rgba(255, 251, 0, 0.8);
    border-radius: 10px;
    transform: rotate(-10deg);
}
    

先定义一个class为"rot"，其中包括了一个10秒线性无限旋转的动画。其中@keyframes规定了一个从0度到360度旋转的过程。然后定义一个class为"bee"，宽高为50px的蜜蜂图片，再新建一个伪元素:before，写上“蜂蜜”文案，设置样式汇集了所有"位置、大小、颜色及旋转角度的属性。最后将"bee"和"rot"两个class相结合，我们就可以看到一个在地球上旋转的蜜蜂，并且上面贴着一个悬浮的"蜂蜜"文案，十分有趣而又别致。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！