css3 制作阳光,CSS3 散射的阳光动画背景

CSS

语言：

CSSSCSS

确定

html,

body {

width: 100%;

height: 100%;

}

html {

background-color: #e76027;

overflow: hidden;

}

.con {

position: relative;

width: 200px;

height: 100px;

margin: -100px 80%;

-webkit-transform-origin: 50% top;

-ms-transform-origin: 50% top;

transform-origin: 50% top;

-webkit-transform: rotate(55deg);

-ms-transform: rotate(55deg);

transform: rotate(55deg);

z-index: 1;

}

.con .rec {

position: absolute;

left: 0;

top: 0;

height: 5000px;

width: 200px;

background-color: #fdfdfd;

opacity: .1;

-webkit-animation: blink 1s infinite;

animation: blink 1s infinite;

-webkit-transform-style: flat;

transform-style: flat;

-webkit-transform: perspective(500px);

transform: perspective(500px);

-webkit-transform-origin: 0 50px;

-ms-transform-origin: 0 50px;

transform-origin: 0 50px;

}

.con .rec:nth-child(1) {

-webkit-transform: rotateX(-69.2deg) rotateY(8.1deg) rotateZ(-13.5deg);

transform: rot