元宵节给网站挂个灯笼

元宵节将至,给网站挂个灯笼,也增加点节日气氛。喜欢的朋友们可以自己复制代码调试一下,样式也可以自己修改。
效果图如下:

在网上参考了相关代码,实现方式很简单,首先添加一张背景图片,代码实现过程如下:

body{
        background: url("./test.png");
        -webkit-background-size: cover;
        -o-background-size: cover;                
        background-size: cover;             
    }

灯笼是用css样式画出来的,之前以为网上画的灯笼都是图片,原来都是用样式实现的,代码如下:


    

动画效果也是用css实现的,代码如下:

@-moz-keyframes swing {
            0% {
                -moz-transform: rotate(-10deg)
            }

            50% {
                -moz-transform: rotate(10deg)
            }

            100% {
                -moz-transform: rotate(-10deg)
            }
        }

        @-webkit-keyframes swing {
            0% {
                -webkit-transform: rotate(-10deg)
            }

            50% {
                -webkit-transform: rotate(10deg)
            }

            100% {
                -webkit-transform: rotate(-10deg)
            }
        }

你可能感兴趣的:(元宵节给网站挂个灯笼)