首页 css 正文

我要投稿

css3放大-CSS3变换比例缩放｜transition转场动画调整

bendan520 css

2023-08-21 0 9,941 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

我想给学而行营销网图文列表里的图片加点动态互动——别躺着不动，太安静了！

我见过其他网站css3放大，鼠标在图片上移动，图片就会适当缩放。这种微妙的动态体验感觉还是不错的。

老哥知道这是css3可以实现的功能。尝试一下。

由于变化是在鼠标移动之后发生的，所以首先在css文件中，需要将图片的hover缩小为一个样式，并将缩放比例列为1.1。如下：

.index-list-tu li a img:hover {-webkit-transform:scale(1.1,1.1);-moz-transform:scale(1.1,1.1);transform:scale(1.1,1.1);}

怀着向往css3放大，看看变化。

结果：动态有，但动作太快，不流畅，感觉很突兀。就像之前用flash制作动画一样，缺少中间转场（这个知识点来自于早已死掉的flash）。

（我没玩过动态gif录屏，我用ps做了一个动画来模拟一下。）

看来没那么简单，还需要把css3的transition（过渡）写在图片对应的样式上。下面绿色的是缩小的过渡部分：

.index-list-tu li a img {width: 230px;height: 145px;border-radius:3px;float: left;transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5 s;}

有了这个添加，就可以实现这种流畅的图片微动效果了（参见学而行营销网首页图文列表）。

更多关于CSS3 Transform的知识和技巧，可以参考w3cschool提供的这个：CSS3 Transform属性 CSS3 Transition

我还发现了一个小问题：即使放大1.1倍，占用的空间也减少了。这也可以接受，但我个人认为最好保持在原来的框架内，以保持整体的整洁和美观。

然后找到图像周围的 div 类型（

)，向样式添加溢出。 CSS代码如下：

.notice .tab-pal .imgarea {宽度：28%；位置：相对；显示：内联块；溢出：隐藏；}

CSS是一个神奇的东西，就像一个取之不尽用之不竭的宝库。自从从事网页制作，接触CSS以来，我一直认为CSS很简单。如今十五年多过去了，我却发现：有很多我从来不知道的css知识和方法。

CSS3 添加了几个动漫属性css3 动画效果，可以设置这些属性来制作简单的动漫效果，而无需使用 JavaScript。CSS3 动画的属性分为三个主要类别：变换、过渡和动画。

变换

旋转

设置元素在秒针中旋转的角度，使用：

变换：旋转（X）;

参数 x 必须是以度或 0 结尾的角度数，这可以是正数表示相反。

规模

设置元素放大或缩小的乘数，用法包括：

变换：比例（a）;元素的 x 和 y 方向按因子缩放

变换：刻度（a，b）;元素在 x 方向上按 x 缩放，在 y 方向上按 b 缩放

变换：scaleX（a）;元素的 x 方向按因子缩放，y 方向不变

变换：缩放Y（b）;元素在 y 方向上按 b 的因子缩放，x 方向不变

翻译

使用以下方法设置元素的偏移量：

转换：翻译（a，b）;元素在 x 方向 a 上位移，y 方向在 b 上位移

转换：翻译X（a）;元素 x 方向偏移 a，y 方向不变

转换：翻译Y（b）;元素沿 y 和 b 的方向移动，x 的方向不变

扭曲

设置元素倾斜的角度，用法包括：

变换：倾斜（a，b）;元素 x 方向相对于秒针倾斜角度 a，y 方向以秒针角度 b 倾斜

transform：skewX（a）;元素x方向相对于秒针倾斜，角度a、y方向不变

变换：skewY（b）;元素 y 方向在第二个时钟角度 b 上倾斜，方向不变

上述参数必须是以度或 0 结尾的角度数，可以是正数来表示相反。

矩阵

为元素设置变量矩阵css3 动画效果，省略，因为矩阵变量太复杂。

起源

设置元素的挂点，用法包括：

变换原点：AB;元件的悬挂点为（a，b）。

元素的悬挂点是其旋转和倾斜的中心点。值 a 和 b 可以是宽度值、以 % 结尾的比率或左、上、右和下。

过渡

过渡属性

CSS 属性

指定转换的效果，其值是 CSS 属性名称。

过渡持续时间

动漫效果的持续时间，其值是以 s 结尾的秒数。

转换时序功能

指定元素状态的变化速度函数，其值基于贝塞尔曲线函数，如下所示：

转换延迟

动漫效果延迟开始执行的时间是以 s 结尾的秒数。

CSS3 动漫的生命周期如右图所示，从中可以清楚地看到时长和延迟之间的关系：

动画

CSS3 中真正的动漫属性是动画，而后来的变换和过渡只是 DOM 元素的变体或状态过渡。其实CSS3支持的动漫效果只是给动画补上，即先设置几个贯穿动画生命周期的关键状态（关键帧），然后动画会自行估计和模拟关键帧之间的过渡。这样，必须先设置关键帧，然后再设置动画的属性。

关键帧@keyframes的句子结构如下：

@keyframesNAME{

a%{

/*CSS 属性*/

b%{

/*CSS 属性*/

。

NAME表示动漫的名称;a%，b%表示以百分号结尾的百分比，用于设置关键帧在动漫生命周期中的位置;百分比旁边的 {} 必须写为关键帧状态下 CSS 属性的值。此外，如果相同的百分比值在@keyframes中多次出现，则后面出现将覆盖第一次出现;但是关键帧在@keyframes中是无序的。设置

关键帧后，可以继续设置动画。

动画名称

指定所选动漫的名称，即关键帧中的 NAME。

动画持续时间

与过渡持续时间相同。

动画计时函数

与转换定时功能相同。

动画延迟

与转换延迟相同。

动画迭代计数

设置动漫的执行次数，其值可以是数字或无限（循环执行）。

动画方向

设置动漫执行的方向，其值可以是正常或备用。

前缀

由于 CSS3 尚未发布，因此浏览器对它的支持不同。因此，在设置 CSS3 属性（包括以 @ 开头的新属性）时，通常需要添加浏览器前缀，例如 -webkit - 用于 Webkit 内核 Chrome 和 Safari，-moz 用于 FireFox，-o- 用于 Opera。忽略IE，IE实现通常使用过滤器而不是CSS3。

实例

下面的代码模拟了上面提到的大多数CSS3动漫属性，并且由于只使用了–webkit-前缀，因此它仅适用于Chrome或Safari。

网页代码：





CSS3动画



rotate
scale
translate
skew
origin
single property
whole property
change & resume
animation

CSS代码：

动画.css

div {
	width: 80px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	background: #06F;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	-webkit-border-radius: 10px;
	margin: 5px;
}
.rotate {
	-webkit-transform: rotate(0deg);
}
.rotate:hover {
	-webkit-transform: rotate(90deg);
}
.scale {
	-webkit-transform: scale(1);
}
.scale:hover {
	-webkit-transform: scale(1.5);
}
.translate {
	-webkit-transform: translate(0px, 0px);
}
.translate:hover {
	-webkit-transform: translate(50px, 50px);
}
.skew {
	-webkit-transform: skew(0);
}
.skew:hover {
	-webkit-transform: skewY(20deg);
}
.origin {
	-webkit-transform-origin: top left;
	-webkit-transform: rotate(0);
}
.origin:hover {
	-webkit-transform: rotate(45deg);
}
.single {
	width: 150px;
}
.single:hover {
	background: #f00;
	width: 200px;
	height: 100px;
	line-height: 100px;
	-webkit-transition-property: background;
	-webkit-transition-duration: 2s;
}
.whole {
	width: 150px;
}
.whole:hover {
	width: 200px;
	height: 100px;
	line-height: 100px;
	background: #f00;
	-webkit-transition-duration: 2s;
}
.resume {
	width: 150px;
	-webkit-transition-duration: 2s;
}
.resume:hover {
	width: 200px;
	height: 100px;
	line-height: 100px;
	background: #f00;
	-webkit-transition-duration: 2s;
}
.animation:hover {
	-webkit-animation-name: anim;
	-webkit-animation-duration: 2s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-direction: alternate;
	-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes anim {
	0% {
		width: 80px;
		height: 30px;
		line-height: 30px;
		background: #06F;
	}
	50% {
		width: 140px;
		height: 65px;
		line-height: 65px;
		background: #360;
	}
	100% {
		width: 200px;
		height: 100px;
		line-height: 100px;
		background: #f00;
	}
}

引用

收藏 (0) 打赏

感谢您的支持，我会继续努力的!