Tag: css shapes

填充水animation

我正在试图清理animation，使其看起来像是在灌水 。 我遇到了两个错误，甚至没有能够解决第三个错误： 它填满了错误的方式 它填充后重置为空（黑色） * 现在，我正在使用<img>标记，但是我想将这个效果移到body { background-image: }并且需要一些方法来指导如何做到这一点。 我到目前为止所尝试的： #banner { width: 300px; height: 300px; position: relative; } #banner div { position: absolute; } #banner div:nth-child(2) { -webkit-animation: wipe 6s; -webkit-animation-delay: 0s; -webkit-animation-direction: up; -webkit-mask-size: 300px 3000px; -webkit-mask-position: 300px 300px; -webkit-mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.00, rgba(0, 0, 0, 1)), color-stop(0.25, rgba(0, […]

我如何创build纯CSS的三维球体？

tl; dr： 我想用CSS创build一个实际的3d球体，而不仅仅是一个幻觉 注意：一些片段示例没有响应。 请使用全屏。 使用纯CSS，您可以像这样创build和制作一个3D立方体的animation ： #cube-wrapper { position: absolute; left: 50%; top: 50%; perspective: 1500px; } .cube { position: relative; transform-style: preserve-3d; animation-name: rotate; animation-duration: 30s; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes rotate { 0% { transform: rotate3d(0, 0, 0, 0); } 100% { transform: rotate3d(0, 1, 0, 360deg); ; } } .face […]

重叠的CSS 1个div的圈子

我正在寻找在CSS中创build这个重叠的圆形状： 基本上，只是堆积圈。 我环顾四周，我看到的所有解决scheme包括使用多个div元素的效果。 但是，这不能用一个单独的div，使用CSS3？ 我看着它是如何轻松完成的，并且认为，如果所有的颜色都一样的话，你会得到这样的药丸形状： http://jsfiddle.net/5wytm0r4/ #circles { background-color: red; width: 130px; height: 100px; border-radius: 50px; } <div id="circles"></div> 然后简单地画几个四分之一的卫星，你就完成了。 但是，我无法弄清楚如何在我的胶囊形格中绘制这些月亮形状。

以百分比（％）和像素（px）或em为边界半径

如果我使用边界半径的像素或em值 ，则即使边缘半径大于元素的最大边，边缘半径始终为圆弧或丸形 。 当我使用百分比时 ，边缘半径是椭圆形的，从元素每边的中间开始，形成一个椭圆形或椭圆形 ： 边界半径的像素值： div { background: teal; border-radius: 999px; width: 230px; height: 100px; padding: 40px 10px; box-sizing: border-box; font-family: courier; color: #fff; } <div>border-radius:999px;</div> 边界半径的百分比值： div { background: teal; border-radius: 50%; width: 230px; height: 100px; padding:40px 10px; box-sizing:border-box; font-family:courier; color:#fff; } <div>border-radius:50%;</div> 为什么百分比中的边界半径与像素值或em值设置的边界半径的作用方式相同？

创build闪电devise（如Flash）

我正尝试在CSS中重新创buildFlash（DC漫画）（或者Big Bang Theory的Sheldon Cooper穿的T恤）的闪电符号。 这将会像星级评级系统一样，只是一个“闪电评级系统”而已。 但是，因为我试图保持HTML到最低限度，我想只在CSS样式。 我已经到了： html, body { margin: 0; height: 100%; background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%); } .wrap { height: 50vw; width: 50vw; position: relative; margin: 0 auto; } .circ:hover{ background:gray; } .circ:hover .bolt{ background:gold; } .circ { height: 50%; width: 50%; background: […]

圆形加载animation

我正在尝试创buildApple的OS X圈子加载animation。 我到目前为止所尝试的： .animation-wrapper { width: 200px; height: 200px; border: 1px solid black; border-radius: 50%; position: relative; overflow: hidden; filter: brightness(0.8); -webkit-filter: brightness(0.8); } .pie-piece1 { position: absolute; width: 50%; height: 50%; bottom: 0; left: 0; background: linear-gradient(to right, rgba(255, 0, 0, 1) 0%, rgba(255, 255, 0, 1) 100%); } .pie-piece2 { position: absolute; width: […]

如何为网页上的文字绘制animation？

我想有一个网页有一个中心词。 我想用animation画出这个单词，这样页面就像我们想要的那样“写”出单词，即它从一个点开始，随着时间的推移画出线条和曲线，使得最终的结果是一个字形。 我不关心这是用<canvas>还是DOM完成的，我不关心它是用JavaScript还是CSS完成的。 没有jQuery会很好，但不是必需的。 我怎样才能做到这一点？ 我彻底search没有运气。

如何在HTML中创build泪珠？

如何创build一个这样的形状来显示在网页上？ 我不想使用图像，因为他们会缩放模糊 我试着用CSS ： .tear { display: inline-block; transform: rotate(-30deg); border: 5px solid green; width: 50px; height: 100px; border-top-left-radius: 50%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; } <div class="tear"> </div> 结果真的搞砸了。 然后我尝试了SVG： <svg viewBox="0 100 100"> <polygon points="50,0 100,70 50,100 0,70"/> </svg> 它确实得到了形状，但底部没有弯曲。 有没有办法创build这个形状，以便它可以在HTML页面中使用？

用圆形进度条倒计时器

我创build了一个倒数计时器。 我有一个被制成圆形的边框。 由于计时器趋向于零，圆形边框应该在秒内减less颜色。 我创build了JSFIDDLE HTML <div class="outer"> <button class="btn btn-default btn-timer">0.00</button> </div> JS代码 var displayminutes; var displayseconds; var initializeTimer = 1.5 // enter in minutes var minutesToSeconds = initializeTimer*60; $("#document").ready(function(){ setTime = getTime(); $(".btn-timer").html(setTime[0]+":"+setTime[1]) }); $(".btn-timer").click(function(){ var startCountDownTimer = setInterval(function(){ minutesToSeconds = minutesToSeconds-1; var timer = getTime(); $(".btn-timer").html(timer[0]+":"+timer[1]); if(minutesToSeconds == 0){ clearInterval(startCountDownTimer); console.log("completed"); } },1000) […]

有没有可能在CSS中创build一个angular度的angular落？

我想知道是否有任何方式来创build这个纯CSS的形状。 为了进一步扩展这个问题，这个形状需要在内部剪切图像（把它想象成一个蒙版 – 但是灰色边框必须是可见的）。 或者我最好在canvas / svg中创build它？