我有这个 CSS3 代码:
#box2 {
position: relative;
width: 500px;
border: 1px solid black;
box-shadow: -3px 8px 34px #808080;
border-radius: 20px;
box-shadow: -8px 5px 5px #888888;
right: 300px;
top: 113px;
text-align: justify;
-webkit-transition: all 1s;
font-size: large;
color: Black;
padding: 10px;
background: #D0D0D0;
opacity: 0;
}
@-webkit-keyframes mySecond {
0% {
right: 300px;
top: 13px;
background: #D0D0D0;
opacity: 0;
}
100% {
background: #909090;
right: 300px;
top: 63px;
opacity: 1;
}
}
#littlebox2 {
top: 053px;
position: absolute;
display: inline-block;
}
.littlebox2sentence {
font-size: large;
padding-bottom: 15px;
padding-top: 15px;
padding-left: 25px;
padding-right: 10px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#9CCEDA), to(#58A8D8));
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
-webkit-transition: background .25s ease-in-out;
border-bottom: 2px solid red;
border-right: 2px solid red;
border-top: 2px solid red;
-webkit-transition-property: color, background;
-webkit-transition-duration: .25s, .25s;
-webkit-transition-timing-function: linear, ease-in-out;
color: #164ad7;
}
#bothcontainer2:hover ~ #box2 {
-webkit-transition: all 0s;
background: #909090;
right: 300px;
top: 63px;
-webkit-animation: mySecond .75s;
-webkit-animation-fill-mode: initial;
opacity: 1;
}
#bothcontainer2:hover .littlebox2sentence {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#B2DFE9), to(#83BEF1));
color: black;
}
现场示例:http: //jsfiddle.net/md966/3/
如何使用渐变色制作动画?如果颜色是蓝色和红色,它可以正常工作(背景颜色过渡),但是当我用渐变色替换它时它不起作用。我找到了一些教程,但它们并没有真正帮助我。