开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

CSS动画-从中心增长(从中心点缩放到整个容器)

要实现一个从中心向四周扩展（缩放）的CSS动画，可以使用CSS的transform属性结合scale()函数，并通过transform-origin将变换原点设置在元素的中心。以下是一个完整的示例，展示如何实现这一效果：

HTML 结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS 动画示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="animated-box"></div>
    </div>
</body>
</html>

CSS 样式 (`styles.css`)

/* 设置页面背景和居中容器 */
body, html {
    height: 100%;
    margin: 0;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: #f0f0f0;
}

/* 定义动画元素 */
.animated-box {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    border-radius: 8px;
    /* 设置变换原点为中心 */
    transform-origin: center center;
    /* 初始状态：缩放比例为0 */
    transform: scale(0);
    /* 添加过渡效果 */
    transition: transform 1s ease-out;
}

/* 触发动画的状态（例如，悬停时） */
.animated-box:hover {
    transform: scale(2); /* 放大到原始大小的2倍 */
}

解释

HTML 结构：
- 一个容器 .container 包含一个需要动画效果的元素 .animated-box。
CSS 样式：
- 容器样式：
  - 使用 flex 布局将 .animated-box 居中显示在页面中。
  - 设置背景颜色为浅灰色以突出显示动画效果。
- 动画元素样式：
  - 设置固定的宽高和背景颜色。
  - 使用 transform-origin: center center; 将变换的原点设置在元素的中心，这样在缩放时，元素会从中心向四周扩展。
  - 初始状态下，使用 transform: scale(0); 将元素缩放为0，即不可见。
  - 添加 transition: transform 1s ease-out; 使变换过程有1秒的平滑过渡效果。
- 触发动画：
  - 在示例中，当用户将鼠标悬停在 .animated-box 上时，通过 :hover 伪类将 transform 属性更改为 scale(2)，使元素放大到原始大小的2倍。你可以根据需要调整缩放比例或触发动画的事件（例如点击、加载等）。

进一步优化

自动播放动画：如果你希望页面加载时自动播放动画，而不是依赖用户交互，可以使用CSS的 @keyframes 动画： @keyframes expandFromCenter { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } .animated-box { /* 其他样式保持不变 */ animation: expandFromCenter 1s ease-out forwards; } 这样，.animated-box 在页面加载时会自动从中心扩展到原始大小，并保持最终状态。
响应式设计：根据需要调整 .animated-box 的尺寸和动画参数，以适应不同的屏幕尺寸和设备。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

前端学习(8)~css学习(二)：背景属性

径向渐变：从一个中心点开始沿着四周产生渐变效果。重复渐变。...(100px at center,yellow ,green); 解释：围绕中心点做渐变，半径是150px，从黄色到绿色做渐变。...中心点的位置可以是：at left right center bottom top。如果以像素为单位，则中心点参照的是盒子的左上角。当然，还有其他的各种参数。格式举例： <!...，起始颜色，终止颜色）; 中心点位置：at left right center bottom top */ /*辐射半径为100px，中心点在中间...比如上方代码中，容器的占位大小一直都是 320px * 320px。这样的话，也方便我们做一些动画效果。

1.4K0 0

经验分享：多屏复杂动画CSS技巧三则

如： .element { animate: shake 4s 2s both infinite paused; } 只会让整个CSS声明挂掉的！...实际上，就是一个动画，所有CSS3 animation动画走同一个UI线程，这也是为何推荐使用CSS实现动画效果的原因。此写法没有兼容性问题，大家可以开开心心地使用。 2....但是，如果你和多元素CSS动画打交道，可能就需要改变下惯性思维了，很重要的一点就是“从以左上角为参考点变成以中心点为参考点”。 ? ?...我们在实现多元素动画效果时候，会出现两类角色：一是容器；二是容器里面诸多动画元素。...用代码来解释就是从左上角定位（或右上角定位）： .example { position: absolute; left: 100px; top: 100px;} 变成中心点定位+ margin偏移

1.3K2 0

2023年即将推出的CSS特性对你影响大不大？

Style Queries 样式查询容器查询规范允许查询父容器的样式值。目前在 Chrome 111 中部分实现，可以在其中使用 CSS 自定义属性来应用容器样式。...这与 :nth-child(2 of .special) 形成对比，后者将首先预过滤所有 .special 元素，然后从该列表中选择第二个。...，它允许您根据滚动容器的滚动位置控制动画的播放。...这意味着当您向上或向下滚动时，动画会向前或向后滑动。此外，对于滚动驱动动画，您还可以根据元素在其滚动容器中的位置来控制动画。...一个很好的例子是这个径向菜单布局，现在可以使用sin()和cos()函数进行设计和动画。在下面的示例中，点围绕中心点旋转。每个点不是围绕其自身的中心旋转然后向外移动，而是在 X 和 Y 轴上平移。

2133 0

CSS3 做一个旋转的立体3D正方形动效核心【前端就业课第二阶段】CSS 零基础到实战（07）

一、transform-origin transform-origin 用于更改当前元素的中心点，使元素在根据中心点做一些动效使做出更多的姿态。...（其实基点直接说中心点可能较为容易理解）：随后效果如下： transform-origin 除了xy外还有另外一个参数 z，z 表示 z 轴，完整语法：transform-origin...非标准矢量，例如空值和 [0, 0, 0]，将会使旋转不起作用，但是不影响整个CSS属性的其他效果。...div 作为左侧的盒子面，并且给予对应的背景色：在此我们可以看到，在给予对应颜色时还使用了 rotate3d 毒气进行沿着 y轴进行转化，但此时页面由于是正视关系，所以看不见，需要移动柜整个盒子的父容器...，所以在此我们在 box 样式中添加转动：此时页面显示如下：此时我们应该想到，直接使用中心点转化即可完成当前页面的转动使其归于正确的位置：改变对应的中心点，使其沿着最左侧

7422 0

经验分享：多屏复杂动画CSS技巧三则 - 腾讯ISUX

当下CSS3应用已经相当广泛，其中重要成员之一就是CSS3动画。并且，随着CSS动画的逐渐深入与普及，更复杂与细腻的动画场景也如雨后春笋般破土而出。...如： .element { animate: shake 4s 2s both infinite paused; } 只会让整个CSS声明挂掉的！...元素定位在容器中间容器以及容器内的动画元素可以看成是一个动画模块，为了这个模块可以轻松驾驭水平布局和垂直局部，里面的动画元素形成的整体一定要在容器的中间，不要被设计稿或周围环境影响。...但是，如果你和多元素CSS动画打交道，可能就需要改变下惯性思维了，很重要的一点就是“从以左上角为参考点变成以中心点为参考点”。 ? ?...用代码来解释就是从左上角定位（或右上角定位）： .example { position: absolute; left: 100px; top: 100px; } 变成中心点定位+ margin

1.7K2 0

【CSS3进阶】酷炫的3D旋转透视

webpack 的 LOGO 动画效果乍看不是很难，深入了解之后，觉得内部其实大有学问，自己折腾了一番，做了一系列相关的 CSS3 动画效果。...CSS3 制作一个三角形 div），注意 4 个三角形应该是重叠在一起的，然后将其中三个分别沿着三条边的中心点旋转 70.5 度（正四面体临面夹角），就可以得到一个正四面体。...注意沿着三条边的中心点旋转 70.5 度这句话，意思是每个图形要定位一次旋转中心，也就是 transform-origin 属性，它允许我们设置旋转元素的基点位置。...，然后以中心点为基准，每个圆形 div 绕 Y 轴旋转不同的角度，再让整个圆形容器绕 Y 轴动起来，就可以得到这样一个效果了。 ...本来想继续说 CSS3 filter CSS3滤镜 transparent、radial-gradient 透明与渐变这些个可以让动画效果变得更赞的一些 CSS3 属性，但是觉得本文篇幅已经很长，而且这两个属性有点偏离主题

2.1K4 0

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

线性渐变和径向渐变的不同在于渐变色方向不同，线性渐变的渐变方向可以指定为上下左右、角度以及对角渐变，径向渐变的方向则是基于某个中心点。...我们用其中一个颜色举例，例如 red 5%，表示这个红色在整个颜色范围的 5% 时停止纯色范围，开始进行渐变，这个范围指的是从初始位置开始到结束方向的百分比范围，例如如图：图片在这里的 red...2.3 渐变中心除了更改渐变形状，我们还可以更改径向渐变的中心点位置，例如如下代码： background: radial-gradient(at 10% 30%, red, green...边的距离 farthest-side 表示当前尺寸大小与中心点最远的边的距离 closest-corner 表示当前尺寸大小与中心点最近的角的距离 farthest-corner 表示当前尺寸大小与中心点最远的...在定义动画前，我们还需要使用 background-size 属性对渐变色进行放大，否则无法移动渐变色背景，毕竟如果你不放大，那么这个渐变色就容器那么大，无法进行移动。

6.3K1 0

CSS3

closest-side ：（渐变形状是圆形时）以距离中心点最近的一边为渐变半径，或者（渐变形状是椭圆形时）以距离中心点最近的水平或垂直边为渐变半径。 ?...closest-corner ：以距离中心点最近的一角为渐变半径。 ?...farthest-side ：和 closest-side 正好相反，（渐变形状是圆形时）以距离中心点最远的一边为渐变半径，或者（渐变形状是椭圆形时）以距离中心点最远的水平或垂直边为渐变半径。 ?...farthest-corner ：以距离中心点最远的一角为渐变半径。 ? cover ：和 farthest-corner 完全一样。 ?...transform-origin：移动变形的中心点 transform: rotate(45deg);transform-origin: 20% 20%; 3、3D

5651 0

「HTML&CSS」第二部分

属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度 div{ transform: rotate(0deg); } 二、设置元素旋转中心点...transform-origin) transform-origin 基础语法： transform-origin: x y; 重要知识点：注意后面的参数 x 和 y 用空格隔开 x y 默认旋转的中心点是元素的中心...宽和高都放大了二倍 transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致 transform:scale(0.5, 0.5): 缩小 scale 最大的优势：可以设置转换中心点缩放...，默认以中心点缩放，而且不影响其他盒子代码演示 div:hover { /* 注意，数字是倍数的含义，所以不需要加单位 */ /* transform: scale(...动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果动画的基本使用先定义动画在调用定义好的动画语法格式(定义动画) @keyframes

2093 0

【CSS3】CSS3 动画 ④ ( 使用动画制作地图热点图 )

一、需求说明实现如下效果 , 在一张地图上 , 以某个位置为中心点 , 向四周发散 ; 核心是实现向四周发散的波纹动画 ; 二、动画代码分析 1、地图背景设置地图背景设置 : 地图是...- 为该 div 盒子模型设置类名为 city --> 田为上述 city 标签元素设置 CSS...分析热点动画 , 发现内层的蓝色实心小圆圈是不变的 , 始终都存在 ; 然后放置 2 ~ 3 个可缩放的原型图片作为热点动画的波纹 ; 页面的布局如下 : 其中的 dot 盒子是中心小圆点...height: 70px; opacity: 1; } 100% { /* 放到最大时...maximum-scale=1.0,minimum-scale=1.0"> CSS3

3832 0

来来来，给您送🕐了

(45deg, blue, red); /* 从右下到左上、从蓝色渐变到红色 */ linear-gradient(to left top, blue, red); /* 从下到上，从蓝色开始渐变...指定至少这两个CSS3的动画属性绑定向一个选择器：规定动画的名称规定动画的时长给 body::after 添加 animation: animate 5s ease-in-out infinite...transform: translateY(10px); } 50%{ transform: translateY(-10px); } } 钟表容器动画...rgba(255,255,255,0.5); animation: animate 5s ease-in-out infinite; animation-delay: -2.5s ; } 容器底部阴影效果...径向渐变由中心点定义。为了创建径向渐变你必须设置两个终止色。这个图更明显我们的两个终止色是透明色。

3392 0

那些年下过的大雨

想了解一下用纯CSS和JS怎么实现一段下雨的动画，于是去CodePen上面搜了一下，发现了很多很有意思的东西。有空可以常去上面逛逛，在对技术产生敬畏的同时也能学到好多好多东西。.../** * 雨滴容器 * 宽度为15px，高度为120px * 0.5秒内从屏幕上方移动到屏幕90%的高度 * 模仿雨滴的下降过程 */ .drop { position: absolute...，然后像周围扩散，例如下面的水珠，模拟的其实就是从中心点的原点上跳过程。.../** * 水珠 * 中心定位 * 通过控制水花垂直方向位移，造成溅起效果 * 通过控制水平方向便宜，造成运动效果 */ @keyframes bounce1 { /* 中心点 */ 0%...// 整个动画的关键点 // 整个动画其实是由一条条细线组成，根据下落的时差，造成瀑布的效果 // 根据计算出的屏幕宽度，每条细线1px，然后在屏幕上均匀分布360色 function anim() {

8465 0

【CSS3】CSS3 2D 转换 - rotate 旋转 ④ ( 旋转案例 )

预先绘制了两个盒子模型 , 一个是空的盒子模型 , 在空盒子模型中 , 绘制了一个子盒子 , 子盒子是有实际元素的盒子模型 ; 有实际内容的子盒子模型 , 初始状态就沿着左下角为中心点...overflow: hidden; 样式 , 超出父容器边界的内容 , 就会自动隐藏 , 表现为下图的样式 : 二、代码示例 ---- 实际的盒子模型内容 , 是通过 div::before 伪元素添加进去的...元素是行内元素无法设置大小将其设置为行内块元素才能设置宽高 */ display: block; 为实际内容设置旋转相关的属性 : 旋转中心点..., 默认的初始角度 , 旋转的动画持续时间 ; /* 设置以左下角为中心旋转 */ transform-origin: left bottom;...content="IE=edge"> CSS3

3382 0

JavaScript时间轮盘：js元素圆形布局制作时间轮盘动画

> $(function(){ // 盒子元素 var el = $(".container"); //中心点横坐标...var dotLeft = (el.width()-$(".dot").width())/2; //中心点纵坐标 var dotTop = (el.height()-$(".dot").height...'transform': 'rotate(-'+ avd * index +'deg)' 这里注释，后续还会加上 }); }); // 这里减去box.width()/2就是为了中心点和元素刚好是正中心位置...上面的回调一直没有用，其实主要就是用来整个轮盘旋转动画的。...就是实现整个效果。

3.5K3 0

又来了！实现微信 “炸屎”大作战

3.粑粑被炸开利用 css 动画实现 4.所有人震动利用 css 动画实现总结以上我们大致想说的思路，也许你看思路就对其中一些的实现已经轻车熟路，那你可以跳过一部分。...我们可以看到粑粑是从炸裂的地方飞出来的，飞出来主要是7个粑粑，其中中间的最大，其他的随着离中心粑粑越远而越小，排列的方式是类似于一个圆，但是又不是那么规律。...由于用中心点为 (150,150) 为圆心计算比较麻烦，因此我将中心点移到了(0, 0)进行计算，最后再将所有计算出来的点都往 x 轴，y 轴平移 150。...// 一开始的出现时候的动画，从爆炸口冲出来 function initFece(end) { ......给粑粑添加随机角度让中心粑粑更趋向于爆炸口添加链式动画出现和下落 4.所有人震动这个功能只需要用简单 css 动画就能完成这里就不再详细讲啦，有兴趣的小伙伴可以实现一下放到评论里~ 结尾本次纯属于一个对这个效果好奇的探索

1.4K2 0

CSS3的3D变换和动画

"> .container { perspective: 800px; //这里是一个视角的位置， } perspective 800px是一个视角的位置，表示屏幕距离3d变化中心点的位置...一个容器 </...@keyframe规则属性 attr des css level @keyframes 规定动画。...Opera支持@keyframe，而chrome和safari需要加浅醉-webkit-，IE9及早期IE版本是不支持的，所以这些功能一般是在移动端使用一个demo 该demo的作用是使div的背景从红色变成绿色...，整个动画时间是5s [@keyframes](/user/keyframes) myfirst { from {background: red;} to {background: yellow;} }

1.2K1 1

CSS3的3D变换和动画

CSS3的3D变换 transform属性 attr des css level transform 向元素应用 2D 或 3D 转换。..."> .container { perspective: 800px; //这里是一个视角的位置， } perspective 800px是一个视角的位置，表示屏幕距离3d变化中心点的位置...一个容器 </...@keyframe规则属性 attr des css level @keyframes 规定动画。...，整个动画时间是5s [@keyframes](/user/keyframes) myfirst { from {background: red;} to {background: yellow;} }

1.6K6 0

JS+CSS 3实现图片滑块效果

分析该动画，可拆分成两个步骤：鼠标移入或者移出时，添加一个动画 class 实现该动画 class，实现移入移出动画图片瀑布流布局可参考 Vue 手写图片瀑布流组件(附源码) HTML 和 CSS...position: relative; 子 mask 容器设置 position: absolute;并撑满整个容器编写动画 class，不妨让左滑入 class 为 enter_left，则左边动画可写为...，100%时刚好到达父容器右边界，同理很容易写出各个方向的 css 动画 JS 判断滑块方向上一步我们已经完成了一大半，写出了各个方向的动画，难点是如何判断鼠标进入容器的方向我们可以画图分析，如下图...假设该矩形的中心点坐标为 x0(x0,y0),鼠标进出矩形的边界坐标点为 x(x,y) 根据斜率公式，可以得到: l1 斜率：k0 = height/width l2 斜率：-k0 l3 斜率：k=(y-y0...)/(x-x0) 观察图形可知，l1 和 l2 把矩形分成了 4 个块，我们很容易得到：若鼠标从右边进出，根据斜率：k>=-k0 && k x0; 根据对称性，若鼠标从左边进出，

5.3K3 0

CSS-2D-3D转换

50px); translateY(50px); 2D 转换旋转 rotate: 2D旋转可以让元素在2维平面内顺时针旋转或者逆时针旋转 rotate单位是 deg ,角度为: 顺时针、逆时针，默认是元素中心点...transform:rotate(50deg) 2D 转换中心点 transform-origin： x 和 y 用空格隔开，x y 默认转换的中心点是元素的中心点可以给x y 设置像素或者方位名词...right center） transform-origin: left bottom; 2D 转换之缩放 scale: 元素可以缩放，可以放大和缩小，x和y用逗号分隔 scale优势：可以设置转换中心点缩放...，默认以中心点缩放，而且不影响其他盒子 transform:scale(x,y); 只写一个参数，第二个数和第一个数一样，相当于 scale(2,2) 2D 转换综合写法: 顺序会影转换效果，如果有位移和其他属性的时候...，要将位移放到最前 transform: translate() rotate() scale() ---- 动画 animation : 可通过设置多个节点来控制一个或一组动画，常用来实现复杂动画效果

5931 0

中国第五届CSS大会分享：CSS TIME

具体动画keyframes代码: 该动画从0-100，K6帧，0%保持原始状态，20%做一个挤压的预备动作，40%向上弹跳40px并且做拉伸状，60%回落原地为下次反弹做挤压蓄力，80%反弹再次拉伸，最后...bottom蓝色盒子其实是不动的，动的是外部容器，容器在0%~50%进行弹跳动画，50%~100%保持静止状态 up红色盒子则是在0%~50%保持静止状态，在50%~100%进行弹跳动画两个动画，关键帧顺接拼接构成一个整体动画...100%位置，延迟2.9s后，执行动画时间为1.2s的循环动画，注意这里邮筒的变换原点transform-origin是在48% 100%位置，即水平方向的中间靠左，垂直方向的底部，不修改的话，是在元素中心点...50% 50%处，元素执行动画的时候，会以中心往上下弹动，所以需要修改变换中心点让邮筒以该点为动画变换中心，从下往上运动，稳住脚跟。...drop_1的关键帧拆分，从0%~50%是粒子从上往下掉落，50%~53%接触到弧形表面，出现短暂缓冲停顿，53%~70%呈向上反弹，并且同时出现水平方向的X向量，向左移动，85%~100%粒子透明度从

1.6K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭