伪元素加过渡实现双开门动画效果

最新推荐文章于 2024-04-13 19:50:27 发布

原创最新推荐文章于 2024-04-13 19:50:27 发布 · 284 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3

本文介绍如何使用CSS3和伪元素实现一个响应式的图片轮播效果，通过:hover触发，图片背景在盒子里水平切换。适合前端开发者学习CSS布局和动画应用。

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

/* 1.盒子宽高与盒子背景图一致 */

.box{

margin: 100px auto;

width: 1366px;

height: 600px;

background-image: url(../02_平面转换/images/bg.jpg);

/* background-size: contain; */

/* 隐藏超出部分内容 */

overflow: hidden;

}

/* 2.伪元素和精灵图定位 */

.box::before,

.box::after{

/* 必须存在 */

content: "";

/* 伪元素默认行内元素 */

display: inline-block;

/* float: left; */

width: 50%;

height: 100%;

background-image: url(../02_平面转换/images/fm.jpg);

background-position: left 0;

/* 过渡动画 */

transition: all 0.5s;

}

.box::after{

background-position: right 0;

}

/* 左移动 */

.box:hover::before{

transform: translate(-100%);

}

.box:hover::after{

transform: translateX(100%);

}

</style>

</head>

<body>

</body>

</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Ｏn!y°念伱

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

前端自学笔记2：旋转效果的实现

qq_44986029的博客

04-15

1344

原理：第一步，先通过设置绝对定位，将小盒子向右、向下移动大盒子的50%；第二步，再通过平移，将小盒子向左，向上移动自身的50%。第一步实现/*给大盒子设置相对定位：*//*给小盒子设置绝对定位：*/left: 50%;top: 50%;效果如下：/*给小盒子设置样式*/

用html5,css3制作开门效果

weixin_44192217的博客

02-01

3238

制作一个开门效果的图片结构首先一个section里面包含俩个div,门打开的效果图片用section的背景url制作,俩个门效果用定位position制作让其浮动上去,然后分别加上transform-origin改变图片的定位点,在根据门开的方向改变旋转的Y轴正负角度代码如下![在这里插入图片描述](https://img-blog.csdnimg.cn/20200201141438291.png...

参与评论您还未登录，请先登录后发表或查看评论

利用HTML和CSS制作双开门效果

weixin_54454406的博客

04-13

1031

笔者在这里做两种效果，但是笔者还不会制作GIF的动态图，所以在这篇文章展示的效果会有些欠缺，还请各位谅解。效果解读：就是两扇门往两边移动，这样的效果比较容易制作。开门前的效果图：开门后的效果图：2.第二种方法是有一种推门的感觉，在这里要用到第二种属性，叫做旋转在这里读者简单的介绍一下旋转的使用。

HTML5+CSS3 WEB双开门案例

lsp54188的博客

02-18

635

将图片放到对应的目录实现双开门效果。

双开门案例（使用平移效果）

绿色水杯

08-24

1232

代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father {

html学习重难点总结

tjj_955的博客

12-20

976

1.选择器-伪类选择器 A标签的伪类选择器 1.1. <a></a>此标签还有一个提示属性，当鼠标移上去的时候有提示语句显示。 1.2. <a></a>此标签的伪类选择器有顺序，顺序具体如下：可以简洁记忆：l v h a 记住四个属性的首字母即可。注意：如果不按顺序编写此伪类标签无效。 2.边框属性的重点。 2.1 边框的圆角属性...

鼠标悬停实现开门动画的CSS3特效源码

该特效通过CSS3的强大功能，在用户将鼠标指针悬停在某个元素（如门形图片或模块）上时，触发“开门”式的动画效果，模拟现实世界中双扇门从中向两侧打开的动态过程。这种动画不仅具有强烈的视觉吸引力，还能有效引导...

【动态灯光效果实现】：Unity中利用DMX512插件制作灯光动画

[【动态灯光效果实现】：Unity中利用DMX512插件制作灯光动画](http://blog.fullwat.com/wp-content/uploads/2018/05/dmx-5.jpg) # 摘要本文深入探讨了DMX512协议在Unity环境下的应用，涵盖了从基础协议解析到高级...

我需要你写一段在虚幻引擎的技术框架中，动画编辑器是实现高质量角色与场景动画的核心组件，其技术原理与功能设计紧密围绕动画制作的专业性与灵活性展开，为开发者提供了从基础动画调节到复杂序列构建的全方位支持。动画编辑器的技术基础建立在骨骼动画系统之上。骨骼作为角色动作的驱动核心，通过层级结构定义关节间的运动关系。每个骨骼节点可独立控制旋转、平移与缩放，编辑器允许开发者精确调整这些参数，形成自然的动作姿态。权重分配技术则实现了蒙皮网格与骨骼的关联，通过调节顶点受骨骼影响的程度，确保角色模型在动作过程中呈现逼真的形变效果。关键帧技术是动画编辑器的核心机制之一。开发者通过在时间轴上设置关键帧，记录角色在特定时刻的姿态（如骨骼旋转角度、位置坐标），编辑器利用插值算法（线性插值、贝塞尔插值等）自动生成关键帧之间的过渡动作，确保动作流畅性。这种方式既允许对动作细节进行精准控制，又能通过调整插值曲线优化动作节奏，例如让角色起跳动作更迅猛或落地动作更舒缓。动画混合空间技术进一步提升了动作的自然度与适应性。混合空间基于一个或多个参数（如速度、方向）定义动作过渡逻辑，例如在二维混合空间中，X 轴代表移动速度，Y 轴代表转向角度，通过输入不同参数值，编辑器可实时混合多个基础动作（如站立、行走、跑步），生成平滑的过渡动作。这种技术使角色在复杂场景中的动作表现更加真实，如角色从静止状态向任意方向加速跑时，动作过渡自然且符合物理逻辑。动画蒙太奇功能则专注于复杂动作序列的管理与触发。开发者可将多个动画片段（如攻击连招、攀爬动作）组合成蒙太奇序列，通过蓝图或游戏逻辑实时控制播放顺序、速度与触发条件。例如在战斗系统中，角色的一次连续攻击动作由多个单帧攻击动画组成，蒙太奇功能确保这些动画按预设节奏播放，同时可根据敌人反馈或玩家输入灵活调整，增强交互性与节奏感。在与其他模块的协作方面，动画编辑器与蓝图编辑器的联动尤为关键。通过蓝图逻辑可实时控制动画状态切换，例如根据角色生命值触发受伤动画，或根据玩家操作切换不同的技能动画。同时，关卡编辑器中的场景元素（如触发器、交互物体）也可作为动画触发条件，实现角色与环境的自然互动，如角色靠近门时自动播放开门动画。这样的话介绍即可

最新发布

05-10

2. **机器学习辅助动画**：通过 Motion Matching 技术替代传统状态机，实现更自然的动作过渡[^9]。 3. **跨平台压缩策略**：针对移动端采用 ASTC 纹理压缩骨骼数据，降低内存带宽占用[^10]。 ---

视觉效果大揭秘：如何用Coze优化3D裸眼书籍动画

裸眼动画技术的发展为3D视觉艺术打开了新的大门，通过技术手段在不需要任何辅助设备的情况下，创造视觉上具有深度和立体效果的图像。这种技术依赖于我们的双眼视觉原理，利用左右眼的视角差异来模拟深度感知。 ## ...

双开门案例

m0_46279754的博客

02-14

499

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #container { position: absolute; left: 50%; top: 50%; .

CSS特效实现双开门

qq_53847322的博客

07-12

932

字体图标iconfont 位移transform:translate 旋转transform: rotate 缩放transform: scale 渐变background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.6));多重转换：transform: translateX(800px) rotate(360deg);

自适应三栏式

m0_55041880的博客

07-21

452

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc

vue实现双开门动画

张梦莹的博客

07-13

1268

需求：前一个页面离开时有双开门动画，后一个页面有缩放动画的效果。不太理解双开门动画的小伙伴，可以参考ppt的门动画版本迭代第一次迭代设计第一想法就是通过创建一个父元素，并为其添加两个子元素，分别给这两个子元素设置vue动画来实现。实现 //双开门动画组件 parent.vue <template> <transition name="door"> <div class="door"> <div class="door-left"

【Web前端学习之路】web进阶（移动web）黑马课程笔记

a123456_9的博客

04-29

417

1、字体图标库 Iconfont网站上下载字体图标，直接引入样式如果图库中没有想要的图标，则可以自己上传 2、平移转换（可以对标回忆一下基础班的“过渡”属性：transition）平面转换属性（位移、旋转、缩放）：transform 若x的值为负数，则向左移动；y的值为负数，则向上移动（可以记忆成margin left） translate（x， y）；位移-绝对定位居中使用translate快速实现绝对定位的元素居中 双开门效果示例 ..

关于伪元素如何添加过渡动画功能

weixin_44731038的博客

04-05

1470

关于伪元素如何添加过渡动画功能首先准备一个容器，在容器中添加伪元素及想添加的过渡属性初始值这里使用width举例我将width初始设置为0，过渡到100%；初始设置元素基本样式 <style> div{ position: relative; width: 100px; height: 30px; line-height: 30px; text-align: center;

css3实现开门动画

@Nose~he

03-29

2195

css3实现开门动画效果今天我们使用css3实现以下开门动画，首先我们来看一下效果图接下来我们来实现一下这个效果先进行布局，布局的实现由很多种，这里我们需要position和float进行布局，首先先把门放到正中央，我们可以利用以下代码实现 width: 300px; height: 300px; position: absolute; ...

html自动开门特效,利用CSS3实现开门效果实例源码

weixin_34861332的博客

05-31

662

先来看看效果图以下实例源码复制代码代码如下:css3开门.door{ position:relative; width:400px; height:300px; overflow:hidden; border:2px solid #000; background:#000;}.door:before,.door:after{ content:''; position:absolute; left:...

html自动开门特效,利用css3伪元素制作3d开门效果

weixin_42467661的博客

05-31

991

本教程是一个有趣的开关门效果，每个字母就是一个门，我们将使它能够从四个方向打开关闭，这里采用的技术主要是在伪元素上使用CSS transforms and transitions属性。注意：不是每一个浏览器都支持伪元素，最好是使用Chrome或Firefox浏览器观看。HTML结构:CJ8ACSS样式：为每一个字母的span添加一些基本样式。我们将会为这些字母添加3种样式，字母添加较深的颜色，使字...

CSS3伪元素结合Animation实现悬停动画效果

纯CSS3中的`::before`和`::after`伪元素结合`animation`实现鼠标悬停动画效果，是一种在现代前端开发中广泛应用的视觉增强技术。该技术通过仅使用CSS（无需JavaScript）即可为网页元素添加动态、交互式的动画效果，...