文章目录

布局及动画应用animationtransformtransitionanimation

综合应用实例代码实例解释

作用用于控制元素的显示类型如块级元素、内联元素、无显示等。

常见属性值及示例

block使元素显示为块级元素会独占一行并且可以设置宽度、高度、内外边距等属性。

例如

div

}inline使元素显示为内联元素不会独占一行宽度和高度属性会根据内容自适应并且垂直方向的外边距和内边距等属性可能不会像块级元素那样正常起作用。

例如

span

作用用于创建灵活的布局方便实现水平或垂直方向的对齐、分布等布局效果。

基本属性及示例

容器属性父元素

}flex-direction定义主轴的方向有row水平方向从左到右、row

reverse水平方向从右到左、column垂直方向从上到下、column

.container-row

}justify-content用于在主轴上对齐子元素有flex-start从主轴起点开始对齐、flex-end从主轴终点开始对齐、center在主轴中心对齐、space-between子元素之间均匀分布两端对齐、space-around子元素周围均匀分布。

例如

.container

grow为2其他项目为1则前者占据的剩余空间将是其他项目的两倍。

例如

.item-grow

作用用于对元素进行旋转、缩放、平移和倾斜等变换操作。

常见函数及示例

translate(50px,

100px);会将元素在水平方向移动50px在垂直方向移动100px。

.transform-translate

property指定要应用过渡效果的CSS属性。

例如transition

property:

height;表示宽度和高度属性变化时应用过渡效果。

transition

duration过渡效果的持续时间以秒s或毫秒ms为单位。

例如transition

duration:

function指定过渡的时间曲线如ease默认慢-快-慢、linear匀速等。

例如transition

timing

delay过渡效果的延迟时间以秒s或毫秒ms为单位。

例如transition

delay:

}在这个示例中当鼠标悬停在按钮上时按钮的背景颜色会在0.3秒内以ease的时间曲线从蓝色过渡到红色没有延迟。

Float用法

作用用于使元素向左或向右浮动使得文本或其他内联元素可以环绕在它周围。

常见属性值及示例

img

}需要注意的是当使用float布局时可能需要清除浮动使用clear:

.clear-fix:after

}在父元素的类中添加clear-fix可以在浮动元素之后清除浮动确保父元素能够正确地包含浮动元素。

animation

animation是CSS中用于创建动画的一个简写属性它可以将多个与动画相关的属性组合在一起。

其基本语法如下animation:

name

name指定要应用的动画名称这个名称是通过keyframes规则定义的动画序列的名称。

duration动画的持续时间以秒s或毫秒ms为单位。

例如3s表示动画持续3秒。

timing-function指定动画的时间曲线用于控制动画在每个阶段的速度。

常见的值有ease默认慢

慢、linear匀速、ease

bezier(n,n,n,n)自定义贝塞尔曲线等。

delay动画的延迟时间以秒s或毫秒ms为单位。

例如1s表示动画延迟1秒后开始。

iteration-count动画的播放次数。

可以是一个数字如3表示播放3次也可以是infinite无限次播放。

direction指定动画的播放方向。

常见的值有normal正常方向从起始关键帧到结束关键帧、reverse反向从结束关键帧到起始关键帧、alternate交替先正常播放然后反向播放重复此过程、alternate

reverse先反向播放然后正常播放重复此过程。

fill-mode指定动画在播放之前和之后如何应用样式。

常见的值有none默认动画结束后回到初始状态、forwards动画结束后保持在结束状态、backwards在延迟期间应用起始关键帧的样式、both结合forwards和backwards的效果。

play-state控制动画的播放或暂停状态。

常见的值有running播放和paused暂停不过通常通过JavaScript来动态改变这个值。

keyframes

out的动画它会让元素的透明度从0完全透明变化到1完全不透明。

这个动画应用到一个div元素上动画持续时间为3秒时间曲线是ease

out淡入淡出效果没有延迟会无限次交替播放先淡入再淡出然后再淡入如此循环。

元素移动和旋转动画

定义keyframes规则

}这个例子中keyframes规则定义了一个动画序列元素从初始位置0,0开始先移动到(100px,100px)并旋转180度然后移动到(200px,0)并旋转360度。

动画应用到一个img元素上持续时间为5秒以线性速度播放没有延迟并且无限次播放。

这样图片会在页面上一边移动一边旋转形成一个动态的效果。

综合应用实例

以下是一个将transform、transition和animation综合应用的实例通过一个简单的方块元素在鼠标悬停时产生多种动态效果来展示这三个属性的协同工作

!DOCTYPE

colorChange定义了一个名为colorChange的动画该动画使元素的背景颜色在lightblue浅蓝色、lightgreen浅绿色和lightcoral浅珊瑚色之间交替变化。

.box类样式

定义了一个宽度和高度均为100px的方块背景颜色为lightblue并居中显示在页面上。

使用transition:

transform

out;设置了过渡效果当transform属性发生变化时例如在鼠标悬停时将以ease

out的时间曲线在0.5秒内平滑过渡。

使用animation:

colorChange

alternate;应用了之前定义的colorChange动画。

该动画将以ease

out的时间曲线持续5秒无限次播放并且每次播放方向交替即从浅蓝色到浅绿色再到浅珊瑚色然后反过来。

.box:hover样式当鼠标悬停在方块上时应用transform:

scale(1.5)

rotate(45deg);使方块在放大到原来的1.5倍的同时顺时针旋转45度。

由于之前设置了过渡效果这个变换过程会平滑地进行。

通过这个例子展示了transform用于实现即时的元素变换transition用于创建平滑的过渡效果animation用于实现更复杂的动画序列三者结合可以创造出丰富多样的动态交互效果。