我必须承认我在 CSS 方面算不上天才...为了练习,我正在创建一个模拟啤酒杯的动画。
目前,通过一些示例,我已经实现了所需的动画: http://jsfiddle.net/yfb1fo8c/1/
还有我想要的形状:
#liquid {
background: black;
border-bottom: 500px solid #e39700;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
width: 300px;
color: #fff8eb;
position: absolute;
clip:auto;
overflow:hidden;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
}
但是当我尝试合并这两个想法时,我的形状完全崩溃了,或者没有动画:http://jsfiddle.net/ogpqj2kr/2/
有什么想法吗?
最佳答案
这是你想要的吗:http://jsfiddle.net/Paf_Sebastien/cqa7rfu7/ ?
(抱歉,我没有提供更多细节,因为我必须更改很多东西。基本上,您的“杯子”没有高度,所以您看不到波浪。无论如何我做了更多更改。)
这是你的新 CSS :
body {
padding: 0;
margin: 0 10px;
background: black;
}
#foam {
margin-top: 20px;
background: white;
width: 460px;
height: 100px;
z-index:1;
}
#liquid {
background: #000;
width: 460px; height: 500px;
position: relative;
clip:auto;
overflow:hidden;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
z-index:2;
background-image:
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(0,50,150)),
color-stop(0.50, rgb(0,150,255))
);
}
#liquid:before {
content: '';
position: absolute;
top: 0; left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 500px 80px 0 0;
border-color: #000000 transparent transparent transparent;
z-index: 10;
}
#liquid:after {
content: '';
position: absolute;
top: 0; right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 80px 500px 0;
border-color: transparent #000000 transparent transparent;
z-index: 10;
}
.wave{
bottom:0;
background:#fff;
display:inline-block;
height:10%;
width:10px;
position:absolute;
-webkit-animation-name: dostuff;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function: ease-in-out;
z-index:3;
}
@-webkit-keyframes dostuff{
0%, 100% {
height:10%;
}
50% {
height:20%;
}
}
关于javascript - 将动画插入到形状的 div 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29607749/