我正在做一些 CSS 动画，我正在尝试创建带有圆形边框的碗形/半圆形，就像这样
到目前为止，我已经创建了一个半圆和波浪，我唯一缺少的是带有渐变的圆形边框，所以请指导我如何实现这一点，因为我是动画新手，这里是我所做的代码到目前为止，还指导我关于我的错误，以便我可以从错误中吸取教训，我还分享了我创建动画链接的文件的链接
// make some waves.
var ocean = document.getElementById("ocean"),
waveWidth = 11,
waveCount = Math.floor(window.innerWidth/waveWidth),
docFrag = document.createDocumentFragment();
for(var i = 0; i < waveCount; i++){
var wave = document.createElement("div");
wave.className += " wave";
docFrag.appendChild(wave);
wave.style.left = i * waveWidth + "px";
wave.style.webkitAnimationDelay = (i/50) + "s";
}
ocean.appendChild(docFrag);half-circle {
margin-top: 10%;
margin-left:40%;
width: 50px;
height: 65px;
border-bottom-left-radius: 460px;
border-bottom-right-radius: 460px;
border: 40px solid;
border-left: 40px solid #fce058;
border-right: 40px solid #cc9e3a;
border-bottom: 40px solid #e4bf49;
border-top: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
overflow:hidden;
position:absolute;
}
body{
height:auto;
margin:0;
}
#ocean{
position:absolute;
margin-top:10px;
width:200%;
min-height:100%;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(40,40,40)),
color-stop(0.50, rgb(45,45,45))
);
}
.wave{
background:#fff;
display:inline-block;
height:110%;
width:80px;
z-index:0;
position:absolute;
-webkit-animation-name: dostuff;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function: ease-in-out;
}
@-webkit-keyframes dostuff{
0%{
height:20%;
}
50%{
height:10%;
}
100%{
height:20%;
}
}
html,
body,
#bubbles { height: 100% }
body { overflow: hidden }
#bubbles { padding: 0px 0 }
.bubble {
width: 90px;
height:90px;
background: #f3f3f3;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
position: absolute;
z-index:99;
}
.x1 {
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
transform: scale(0.1);
opacity: 0.2;
background: #f3f3f3;
-webkit-animation: moveclouds 25s linear infinite, sideWays 4s ease-in-out infinite alternate;
-moz-animation: moveclouds 25s linear infinite, sideWays 4s ease-in-out infinite alternate;
-o-animation: moveclouds 25s linear infinite, sideWays 4s ease-in-out infinite alternate;
}
.x2 {
left: 410px;
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
transform: scale(0.1);
opacity: 0.5;
-webkit-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
-moz-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
-o-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
}
.x3 {
left: 500px;
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
transform: scale(0.1);
opacity: 0.3;
-webkit-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
-moz-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
-o-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
}
.x4 {
left: 310px;
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
transform: scale(0.1);
opacity: 0.35;
-webkit-animation: moveclouds 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
-moz-animation: moveclouds 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
-o-animation: moveclouds 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
}
.x5 {
left: 190px;
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
transform: scale(0.1);
opacity: 0.3;
-webkit-animation: moveclouds 27s linear infinite, sideWays 1s ease-in-out infinite alternate;
-moz-animation: moveclouds 27s linear infinite, sideWays 1s ease-in-out infinite alternate;
-o-animation: moveclouds 27s linear infinite, sideWays 1s ease-in-out infinite alternate;
}
.x6 {
left: 450px;
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
transform: scale(0.1);
opacity: 0.3;
-webkit-animation: moveclouds 17s linear infinite, sideWays 1s ease-in-out infinite alternate;
-moz-animation: moveclouds 17s linear infinite, sideWays 1s ease-in-out infinite alternate;
-o-animation: moveclouds 17s linear infinite, sideWays 1s ease-in-out infinite alternate;
}
.x7 {
left: 600px;
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
transform: scale(0.1);
opacity: 0.3;
-webkit-animation: moveclouds 23s linear infinite, sideWays 1s ease-in-out infinite alternate;
-moz-animation: moveclouds 23s linear infinite, sideWays 1s ease-in-out infinite alternate;
-o-animation: moveclouds 23s linear infinite, sideWays 1s ease-in-out infinite alternate;
}
.x8 {
left: 467px;
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
transform: scale(0.1);
opacity: 0.3;
-webkit-animation: moveclouds 24s linear infinite, sideWays 1s ease-in-out infinite alternate;
-moz-animation: moveclouds 24s linear infinite, sideWays 1s ease-in-out infinite alternate;
-o-animation: moveclouds 24s linear infinite, sideWays 1s ease-in-out infinite alternate;
}
.x9 {
left: 350px;
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
transform: scale(0.1);
opacity: 0.2;
-webkit-animation: moveclouds 20s linear infinite, sideWays 1s ease-in-out infinite alternate;
-moz-animation: moveclouds 20s linear infinite, sideWays 1s ease-in-out infinite alternate;
-o-animation: moveclouds 20s linear infinite, sideWays 1s ease-in-out infinite alternate;
}
.x10 {
left: 1500px;
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
transform: scale(0.1);
opacity: 0.3;
-webkit-animation: moveclouds 23s linear infinite, sideWays 1s ease-in-out infinite alternate;
-moz-animation: moveclouds 23s linear infinite, sideWays 1s ease-in-out infinite alternate;
-o-animation: moveclouds 23s linear infinite, sideWays 1s ease-in-out infinite alternate;
}
.x11 {
left: 137px;
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
transform: scale(0.1);
opacity: 0.3;
-webkit-animation: moveclouds 24s linear infinite, sideWays 1s ease-in-out infinite alternate;
-moz-animation: moveclouds 24s linear infinite, sideWays 1s ease-in-out infinite alternate;
-o-animation: moveclouds 24s linear infinite, sideWays 1s ease-in-out infinite alternate;
}
.x12 {
left: 150px;
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
transform: scale(0.1);
opacity: 0.2;
-webkit-animation: moveclouds 20s linear infinite, sideWays 1s ease-in-out infinite alternate;
-moz-animation: moveclouds 20s linear infinite, sideWays 1s ease-in-out infinite alternate;
-o-animation: moveclouds 20s linear infinite, sideWays 1s ease-in-out infinite alternate;
}
@-webkit-keyframes moveclouds {
0% {
top: 1000px;
}
100% {
top: -900px;
}
}
@-webkit-keyframes sideWays {
0% {
margin-left:0px;
}
100% {
margin-left:50px;
}
}
@-moz-keyframes moveclouds {
0% {
top:900px;
}
100% {
top: -900px;
}
}
@-moz-keyframes sideWays {
0% {
margin-left:0px;
}
100% {
margin-left:50px;
}
}
@-o-keyframes moveclouds {
0% {
top: 900px;
}
100% {
top: -900px;
}
}
@-o-keyframes sideWays {
0% {
margin-left:0px;
}
100% {
margin-left:50px;
}<div class="half-circle">
<div id="ocean">
<div id="bubbles">
<div class="bubble x1"></div>
<div class="bubble x2"></div>
<div class="bubble x3"></div>
<div class="bubble x4"></div>
<div class="bubble x5"></div>
<div class="bubble x6"></div>
<div class="bubble x7"></div>
<div class="bubble x8"></div>
<div class="bubble x9"></div>
<div class="bubble x10"></div>
<div class="bubble x11"></div>
<div class="bubble x12"></div>
</div>
</div>
</div>