CSS制作移动动画效果

2024-04-07 21:19:03

一、常用概念：

1.Transform

Transform 属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等，它包含有以下属性：
（1）矩阵 matrix

（2）移动 translate

(3) 缩放 scale

（4）旋转 rotate

（5）扭曲 skew

（6）透视 perspective(n)：为 3D 转换元素定义透视视图。

2、transition

transition 属性设置元素当过渡效果，四个简写属性为：
transition-property：指定CSS属性的name，transition效果
transition-duration：transition效果需要指定多少秒或毫秒才能完成
transition-timing-function：指定transition效果的转速曲线
transition-delay：指定transition效果的转速曲线

3、animation

4、伪类(Pseudo-classes)

伪类(Pseudo-classes) 为不同状态的元素为其添加对应的样式，使用单冒号(:)表示伪类：
:hover 把鼠标放在链接上的状态
:active 已选中的链接

5、伪元素

伪元素用于创建一些不在文档树中的元素，并为其添加样式。使用双冒号(::)表示伪元素

::before 在元素内容之前插入额外生成的内容
::after 在元素内容之后插入额外生成的内容
:first-line 向文本的首行设置特殊样式，“first-line” 伪元素只能用于块级元素。
:first-letter 向文本的首字母设置特殊样式
::selection 对用鼠标键盘等已选取的文字部分应用样

二、移动动画实现

1、效果：

鼠标悬浮时：

实现代码：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Page Title</title><meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>body{width:100vw;height:100vh;display: flex;flex-direction: column;align-items: center;justify-content: center;}/* 2.鼠标移入画面向上移动 */
.img-wrapper {width: 300px;/* height: 138px; */
}.img-wrapper .img {/* width: 300px; */height: 200px;background-color: rgb(150, 204, 242);
}.img-wrapper .title {/* width: 100%; */margin-top: -28px;text-align: center;height: 28px;line-height: 28px;background-color: rgba(68, 130, 135, 0.8);transition: 0.4s;
}.img-wrapper:hover .title {/* width: 100%; */margin-top: -138px;text-align: center;height: 138px;line-height: 138px;background-color: rgba(68, 130, 135, 0.8);transition: 0.4s;
}
</style>
<body><p>鼠标移入画面向上移动</p><div class="img-wrapper"><div class="img"></div><div class="title">鼠标移入，我会上移居中</div></div>
</body>
</html>

CSS制作移动动画效果相关推荐

CSS Animatie是一款在线制作CSS3动画的工具，可以在线直接制作CSS3动画效果，生成代码...
CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码 CSS Animatie 彩蛋爆料直击现场 CSS Animatie是一款在线制作CSS3动画的工 ...
html5制作天气动画背景,CSS icon图标之纯CSS实现带动画效果的天气图标
CSS3动画属性并不是很多,但重点其实是你怎样去运用它,从简单的hover状态或复杂的小动画,都可以巧妙的用CSS3动画属性来实现. 今天主要是和大家分享一个比较有创意.实用的CSS天气图标动画,静态 ...
纯CSS制作的图形效果
纯CSS制作的图形效果很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容 ...
HTML+CSS制作一个动画
HTML+CSS制作一个动画效果图如下: HTML部分结构如下: <!DOCTYPE html> <html lang="zh-Hans"><hea ...
html5实现立体照片墙效果,利用css制作3D照片墙效果
利用css制作3D照片墙,具体代码如下所示: 无标题文档以上代码是准备工作,在html代码的body主体中放了一个div,里面包着你想要显示在照片墙上的照片,数量可以任意.接着开始着手写样式. bo ...
php 3d animation,如何用HTML5的Canvas制作3D动画效果
HTML5的诞生给web前端界带来了不小轰动,像什么动画旋转.图片滑块.图片轮播等等这些3D特效,也引发了不少朋友想要学习HTML5的好奇心.最近我一直在做canvas动画效果,发现canvas这个东 ...
CSS实现文字动画效果
今天来到了我们的第20个小项目的练习,距离我们100个小项目的练习,我们已经完成了五分之一了,剩下的五分之四,我们一起加油练习. 今天练习的这个小项目是一个CSS实现的文字动画效果,主要就是用在页面加 ...
html遮罩层动画制作,flash简单制作遮罩动画效果
flash简单制作遮罩动画效果QQ空间的开机动画大家应该都有,从最初的出现的一点到后面全部出现,如此神奇的效果到底是怎么做的呢,一起来看看吧!遮罩特效: 由于百度只能上传500k以内的照片,所以效果图 ...
css有哪些动画效果怎么实现的
css常见的动画效果:平移,缩放,旋转 css实现动画主要有三种方式: transition实现渐变动画 transform实现缩放平移效果动画 animation实现自定义动画 transition ...
CSS实现文字动画效果【每日一题】
今天练习的这个小项目是一个CSS实现的文字动画效果,主要就是用在页面加载时的效果,现在,我们一起来看一下这个项目的最终效果: HTML代码: <!DOCTYPE html> <htm ...

最新文章

热门文章