首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使下面给定形状的容器在高度= 130,宽度= 300的情况下颤动

要使下面给定形状的容器在高度= 130,宽度= 300的情况下颤动,可以通过使用CSS动画和关键帧来实现。

首先,我们需要创建一个包含所需形状的HTML元素,比如一个div容器。然后,使用CSS来定义容器的样式,包括宽度、高度和颜色等。

接下来,我们可以通过使用@keyframes规则定义一个动画序列,该序列描述了容器在指定时间内如何进行颤动。在动画序列中,可以使用transform属性来改变容器的位置、旋转或缩放等效果,以实现颤动的效果。

最后,将定义的动画序列应用到容器上,使其开始执行。可以通过使用animation属性来指定动画序列的名称、持续时间和重复次数等。

以下是一个示例代码,实现了一个简单的容器颤动效果:

HTML代码:

代码语言:txt
复制
<div class="container"></div>

CSS代码:

代码语言:txt
复制
.container {
  width: 300px;
  height: 130px;
  background-color: blue;
  animation: shake 1s infinite;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(10px) rotate(5deg);
  }
  50% {
    transform: translateX(-10px) rotate(-5deg);
  }
  75% {
    transform: translateX(10px) rotate(5deg);
  }
  100% {
    transform: translateX(0);
  }
}

在上述代码中,我们创建了一个名为.container的div容器,并定义了宽度、高度和背景颜色。然后,使用@keyframes规则定义了一个名为shake的动画序列,其中描述了容器在不同时间点的变化。最后,通过将动画序列应用到容器上的animation属性,使得容器开始执行颤动动画。

这是一个简单的示例,你可以根据需要进行调整和扩展。关于CSS动画和关键帧的更多细节和技巧,你可以参考相关的CSS文档和教程。

参考链接:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

为什么都2022年了还有人用Java写GUI?

此方法根据坐标(x,y)绘制具有给定宽度值和高度矩形,相对于容器对象: g.drawRect(100, 100, 40, 120); //矩形 上面的方法创建一个普通矩形(带尖边矩形)。...下面是一些示例代码,演示如何使用drawRect()Java中创建形状: import java.awt.*; import java.awt.geom.*; import javax.swing.*...该方法允许程序员绘制一条由给定宽度高度矩形限定曲线(或圆)。...例如: drawArc(45, 75, 150, 150, 0, 360) 如何在Java中绘制椭圆 drawOval(int x,int y,int width,int height)方法允许您绘制绑定在给定宽度高度矩形中椭圆...您可以使用各种整数值来查看使用drawOval()得到形状。值得一提是,如果您希望创建一个圆,宽度值应等于高度

1.9K30

【D3.js - v5.x】(2)绘图 | 比例尺 | 坐标轴 | 柱状图 | 过渡

使用 D3 body 元素中添加 svg 代码如下: var width = 300; //画布宽度 var height = 300; //画布高度 var svg = d3.select.../设定宽度 .attr("height", height); //设定高度 有了画布,接下来就可以画布上作图了。...矩形属性,常用有四个: x:矩形左上角 x 坐标; y:矩形左上角 y 坐标; width:矩形宽度; height:矩形高度; 要注意, SVG 中,x 轴正方向是水平向右...; //画布宽度 var height = 300; //画布高度 var svg = d3.select("body") //选择文档中body元素...动态图表,是指图表某一时间段会发生某种变化,可能是形状、颜色、位置等,而且用户是可以看到变化过程。 例如,有一个圆,圆心为 (100, 100)。

71520
  • 那些不常见,但却非常实用css属性(整理不易)

    我们可以看到上面图形如何裁剪,外面的看不见框始终是矩形,也就是说文字始终是按矩形样式周围环绕。 那么有办法让文字紧紧贴在裁剪图形周围呢?...都随你便,自己定义 6、object-fit / object-position object-fit 属性指定可替换元素内容应该如何适应到其使用高度宽度确定框。...fill 填满 图片会拉变形,宽度高度都被拉到父容器 100%,以适应父容器 object-fit: fill; ?...min-content 它宽度或者高度,会自动调整为,刚刚好容纳下子元素中那个“最小宽度值”最大元素即可,剩余超长要么换行,要么溢出 参考基准为子元素“最小宽度值”有多宽多高。...width: max(50vw, 300px); width: min(50vw, 300px); 15、clamp() clamp 函数会在定义 三个值之间,取中间那个值,是大小中间,不是位置中间

    1.9K10

    圣杯布局、双飞翼布局、Flex布局和绝对定位布局几种经典布局具体实现示例

    题目要求:针对如下DOM结构,编写CSS,实现三栏水平布局,其中left、right分别位于左右两侧,left宽度为200px,right宽度300px,main处在中间,宽度自适应。...,它布局要求有几点: 三列布局,中间宽度自适应,两边定宽; 中间栏要在浏览器中优先展示渲染; 允许任意列高度最高; 可以看出我们题目的要求跟圣杯布局和双飞翼布局要求一样。...下面我们看看具体实现方法。...接下来讲一下此实例具体实现: 1.首先将container块设置为一个Flex容器 .container{ display: flex; min-height: 130px; }   那么container...,left左边,可以通过Flex容器项目的属性“order”属性来设置: .left{ order: -1; background-color: green; } 对于order属性:定义项目的排列顺序

    96820

    SwiftUI 中实现视图居中若干种方法

    另外,在给定尺寸不明情况下( 未显式为矩形设置尺寸 ),上面的代码也需要进行一定调整。...这是由于 HStack 高度是由容器子视图对齐排列后高度决定。...Spacer HStack 中只能进行横向填充,并不具备纵向高度高度为 0 ),因此 HStack 最终需求高度与 Text 高度一致。...空间 )Text 最大可用宽度300Color 与 Text 将按照对齐指南 center 进行对齐( 看起来就是 Text 显示 Color 中间 )如果将代码改写成下面的方式就会出现问题:ZStack...尺寸为 Color 和 Text 两者最大宽度 x 最大高度,该尺寸是一个可变尺寸( 取决于 Text 文本长度 )当 ZStack 给出建议宽度大于 300 时,Text 可利用宽度将超过

    6.8K40

    前端系列第3集-如何理解css盒子型?

    : #ccc; } 如何使一个盒子在其容器中水平居中?...可以使用CSSmargin属性来实现盒子在其容器中水平居中。将盒子左右外边距设置为auto,就可以使盒子容器中水平居中。...;   height: 100px;   background-color: #fff;   margin: 0 auto; } 如何使一个盒子在其容器中垂直居中?...CSS盒子模型计算盒子宽度高度时,默认情况下是包括了所有这些部分大小。可以通过box-sizing属性来改变盒子盒模型,让它只包括内容区域和内边距大小,或者只包括内容区域大小。...BFC页面上是一个独立容器容器内部元素不会影响到外面的元素。 可以通过以下方式来创建BFC: float属性不为none。 position属性为absolute或fixed。

    24910

    我至今没想到,我也能在 CSS 中实现 SVG 动画了

    例如 具有宽度高度属性,而 元素具有定义其半径 r 属性。 同时需要注意一点:虽然大多数HTML元素可以有子元素,但大多数 SVG 元素不能有子元素。...元素及其属性 HTML 和 SVG 之间另一个重要区别是我们如何定位元素,特别是通过给定外部 元素 viewBox 属性。...同时该区域将根据 元素宽度高度属性进行缩放,以适应视口边界。 不过, 视口 viewport 宽度高度属性比例可能确实不同于 viewBox 属性宽度高度部分比例。...它能使我们能够独立绘制图像,并且无论上下文或渲染大小如何,所有元素都将正确定位。 下面我们一起来感受一下。 基础示例 CSS transition 属性允许我们定义属性变化速率和持续时间。...路径用一系列命令来描述,这些命令描述了应该如何绘制形状。由于我们图标由三个互不相连形状组成,我们有三条路径来描述它们。

    1.2K10

    CSS Flexbox 可视化手册

    弹性容器 display:flex使容器扩展至整个可用宽度。 这点与 display:inline-flex相反,它使容器缩小到内容宽度。 ?...默认情况下,flex-wrap被设置为 nowrap,这意味着如果容器不能适应在其内行中原始宽度项目,则这些项目将会缩小来进行适应。 如果它们因为某种原因无法收缩,则会溢出容器。...但是为什么弹性项目会占据整个屏幕高度呢? 第一部分中,容器高度设置为 100vh,因此可用空间被平均分为四行,来适合 300px项目的需要。...默认情况下所有的弹性项目都设置为 order: 0,这意味着所有项目都属于同一组,并且它们将按照原始顺序定位。 两个或多个组情况下,组会相对于它们整数值进行排序。...stretch选项使所有项目伸展到容器高度(如果设置)或最高项目的高度。 第一张图片显示容器高度设置为 100vh,未设置第二个高度。 align-content ?

    3.1K20

    「译」Flexbox 基本原理

    弹性容器 display: flex 使容器拓展整个可用宽度;与之相对,display: inline-flex 使容器宽度塌陷至与内容宽度相等。 ?...通过给项目设置 300px 宽度,nowrap 选项输出下面这个结果: ? 其中,每个项目收缩到大约 70px 以适应容器。 当属性值更新为 wrap 时,项目的宽度将等于原先值,300px。...但是为什么弹性项目会占据整个屏幕高度呢?第一部分,容器高度被设置为 100vh,因此可用空间被这四行平分以适应 300px 项目。...弹性布局是一维布局,虽然反转换行时候,项目会从下到上排列(方向为 row 情况下),但是依然保持着从左到右结构。改变只有交叉轴。...因此,它通过收缩项目来处理它们负向自由空间 [7]。 如下图所示,980px 容器存放着 5 个 300px 宽度容器

    2K30

    TensorFlow 2中实现完全卷积网络(FCN)

    最近遇到了一个有趣用例,其中有5个不同类别的图像,每个类别都有微小差异。此外图像纵横比也比平常高。图像平均高度约为30像素,宽度约为300像素。...Keras中,输入批次尺寸是自动添加,不需要在输入层中指定它。由于输入图像高度宽度是可变,因此将输入形状指定为(None, None, 3)。...最小图像尺寸要求 输入施加卷积块之后,输入高度宽度将降低基于所述值kernel_size和strides。...给定批次和批次之间每个图像都有不同尺寸。所以有什么问题?退后一步,回顾一下如何训练传统图像分类器。...该模型会自动学习忽略零(基本上是黑色像素),并从填充图像预期部分学习特征。这样就有了一个具有相等图像尺寸批处理,但是每个批处理具有不同形状(由于批处理中图像最大高度宽度不同)。

    5.2K31

    让图片完美适应:掌握 CSS object-fit与object-position

    当我们为图像应用不同宽度和/或高度时,我们实际上是改变内容框尺寸。如果内容框尺寸发生变化,图像仍然会填充内容框。...在下面的示例中,我们将图像宽度高度限制为100%,这样其内容框就与容器div大小相匹配: img { width: 100%; height: 100%; } 图像及其内容框现在紧密地适应容器...它选择使图像显示得更小那个。 显然,我们当前示例中,它会选择 contain,因为我们容器比图像小。...使用 object-fit 而不使用容器 在上面的示例中,我们一直使用 object-fit 来调整 div 容器图像大小,但我们在实践中看到原理没有容器情况下同样适用。...结果与图像设置为宽度高度为 100% 并包含在一个设置为 300px 乘300px div 中结果相同。

    68110

    01超精美渐变色动态背景完整示例【CSS动效实战(纯CSS与JS动效)】

    以上 css 代码,给定 background 渐变色,给予渐变色使用linear-gradient 或者 radial-gradient,在此使用 linear-gradient 表示给予线性渐变,...1.6 渐变线(重点) 渐变线渐变中是指渐变颜色停止线,渐变线可以指定位置,并且可以通过渐变线使渐变色居于某一个范围之内,渐变线使用一定是要在 2 种渐变色以上。...,通过定义这个点位置和渐变形状,完成渐变需求。...3.2 渐变色移动背景 一般网站中,有时我们可以看到一些渐变色背景并且移动示例,那么如何使渐变色进行移动呢?...定义动画前,我们还需要使用 background-size 属性对渐变色进行放大,否则无法移动渐变色背景,毕竟如果你不放大,那么这个渐变色就容器那么大,无法进行移动。

    5.8K10

    AI绘画专栏之 SDXL 插件之保持图片比例(41)

    AI绘画过程中,经常需要调整图像尺寸以满足不同需求。然而,调整尺寸时,我们往往会遇到一个问题:如何保持图像纵横比?...这是一个挑战,因为一旦我们改变了图像宽度高度,图像可能会变形,失去其原始比例和形状。 为了解决这个问题,我们可以使用AI绘画保持图片纵横比插件。...缩放到最大尺寸 单击后,宽度高度将根据配置最大值缩放 纵横比将保留,较小或等效尺寸将缩放以匹配 缩放到纵横比 单击后,当前尺寸将使用最大宽度高度缩放到给定纵横比 即4:3 of 256x512...= 512x384 9:16 of 512x256 = 288x512 1:1 of 256x300 = 300x300 您可以选择切换此选项以使用“最大尺寸”滑块值 即4:3 of 512 = 512x384...9:16 of 512 = 288x512 1:1 of 300 = 300x300 按百分比缩放 单击后,当前尺寸将乘以给定百分比,并保持纵横比 即-25% of 512x256 = 384x192

    64820

    Python 自动化指南(繁琐工作自动化)第二版:十九、处理图像

    图 19-12:将Logo放置右下角左坐标和上坐标应该是图像宽度/高度减去Logo宽度/高度代码将Logo粘贴到图像中之后,它应该会保存修改后Image对象。...这个对象有几个Image对象上绘制形状和文本方法。将ImageDraw对象存储一个类似draw变量中,以便在下面的例子中轻松使用。 绘制形状 下列ImageDraw方法图像上绘制各种形状。...然后,textsize()方法将返回一个宽度高度两整数元组,如果给定字体文本被写到图像上,它将是这样。您可以使用这个宽度高度来帮助您准确计算您想要在图像上放置文本位置。...如何找出一个Image物体图像宽度高度? 你会调用什么方法来获取 100×100 图像Image对象,不包括它左下四分之一?...还有,照片是大图;照片文件宽度高度都必须大于 500 像素。这是一个安全赌注,因为大多数数码相机照片宽度高度都是几千像素。 作为提示,下面是这个程序大概框架: #!

    2.5K50

    Flex弹性布局

    300px,容器中有6个宽度为60px项目,nowrap情况下,项目会强行等分容器宽度从而不换行,那么项目实际宽度也就只有50px了,而非我们自己设置60px....wrap表示换行,即项目不会等分容器宽度,而是根据自身宽度进行排列,如果超出父容器宽度则自然换行。...所以,项目之间间隔比项目与边框间隔大一倍。 align-items属性 align-items属性定义项目交叉轴上如何对齐。 flex-start:交叉轴起点对齐。...stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器高度。 完美居中 在下面的例子中,我们会解决一个非常常见样式问题:完美居中。...换行情况下生效 flex-start:与交叉轴起点对齐。

    1.5K10
    领券