css动画 实验,CSS3 渐变动效实验（可动态调整）

CSS

语言：

CSSSCSS

确定

body {

background: #222;

}

div {

position: absolute;

width: 40%;

height: 60%;

box-shadow: 0px 0px 4px #111;

background-color: #111;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

border-radius: 3px;

}

div.linear {

background-image: linear-gradient(#004195, #64ccff);

}

div.linear-to-right {

background-image: linear-gradient(to right, #004195, #64ccff);

}

div.linear-to-top-right {

background-image: linear-gradient(to top right, #004195, #64ccff);

}

div.linear-deg-45 {

background-image: linear-gradient(45deg, #004195, #64ccff);

}

div.linear-deg-65 {

background-image: linear-gradient(65deg, #004195, #64ccff);

}

div.radial {

background-image: radial-gradient(#004195, #64ccff);

}

div.radial-circle {

background-image: radial-gradient(circle, #004195, #64ccff);

}

div.radial-circle-closest-side {

background-image: radial-gradient(circle closest-side, #004195, #64ccff);

}

div.radial-circle-top-right {

background-image: radial-gradient(circle at top right, #004195, #64ccff);

}

#gradients {

position: absolute;

background: #111;

color: #808080;

border: 0;

height: 30px;

text-indent: 5px;

margin: 0 auto;

left: 50%;

top: 5%;

transform: translateX(-50%);

outline: none;

cursor: pointer;

border-radius: 3px;

}