温州网站排名优化公司哪家好,网站里的做菠菜,网站备案信息模板,心理网站免费建设文章目录 css 布局及动画应用animationtransform#xff0c;transition#xff0c;animation 综合应用实例代码实例解释 css 布局及动画应用
Display用法 作用#xff1a;用于控制元素的显示类型#xff0c;如块级元素、内联元素、无显示等。常见属性值及示例#xff1a;… 文章目录 css 布局及动画应用animationtransformtransitionanimation 综合应用实例代码实例解释 css 布局及动画应用
Display用法 作用用于控制元素的显示类型如块级元素、内联元素、无显示等。常见属性值及示例 block使元素显示为块级元素会独占一行并且可以设置宽度、高度、内外边距等属性。例如
div {display: block;width: 200px;height: 100px;background-color: lightblue;margin: 10px;
}inline使元素显示为内联元素不会独占一行宽度和高度属性会根据内容自适应并且垂直方向的外边距和内边距等属性可能不会像块级元素那样正常起作用。例如
span {display: inline;background-color: yellow;padding: 5px;
}none元素不会被显示并且不会在文档流中占据空间。例如
.hidden-element {display: none;
}Flex布局相关CSS 作用用于创建灵活的布局方便实现水平或垂直方向的对齐、分布等布局效果。基本属性及示例 容器属性父元素 display: flex将容器设置为flex布局。例如
.container {display: flex;border: 1px solid black;
}flex-direction定义主轴的方向有row水平方向从左到右、row - reverse水平方向从右到左、column垂直方向从上到下、column - reverse垂直方向从下到上。例如
.container-row {display: flex;flex-direction: row;
}
.container-column {display: flex;flex-direction: column;
}justify-content用于在主轴上对齐子元素有flex-start从主轴起点开始对齐、flex-end从主轴终点开始对齐、center在主轴中心对齐、space-between子元素之间均匀分布两端对齐、space-around子元素周围均匀分布。例如
.container {display: flex;justify-content: space-between;
}项目属性子元素 flex-grow定义项目的放大比例。如果所有项目的flex - grow属性都为1则它们将等分剩余空间如果一个项目的flex - grow为2其他项目为1则前者占据的剩余空间将是其他项目的两倍。例如
.item-grow {flex-grow: 1;
}
.item-double-grow {flex-grow: 2;
}flex - shrink定义项目的缩小比例。例如当容器空间不足时flex - shrink属性控制子元素如何缩小。例如
.item - shrink {flex-shrink: 1;
}Transform用法 作用用于对元素进行旋转、缩放、平移和倾斜等变换操作。常见函数及示例 translate()用于平移元素。例如transform: translate(50px, 100px);会将元素在水平方向移动50px在垂直方向移动100px。
.transform-translate {transform: translate(50px, 100px);width: 100px;height: 100px;background-color: green;
}rotate()用于旋转元素。例如transform: rotate(45deg);会将元素顺时针旋转45度。
.transform-rotate {transform: rotate(45deg);width: 100px;height: 100px;background-color: orange;
}scale()用于缩放元素。例如transform: scale(1.5, 1.5);会将元素在水平和垂直方向都放大1.5倍。
.transform - scale {transform: scale(1.5, 1.5);width: 100px;height: 100px;background-color: purple;
}Transition用法 作用用于实现元素状态变化时的过渡效果如颜色变化、尺寸变化等。 基本属性及示例 transition - property指定要应用过渡效果的CSS属性。例如transition - property: width, height;表示宽度和高度属性变化时应用过渡效果。transition - duration过渡效果的持续时间以秒s或毫秒ms为单位。例如transition - duration: 0.5s;表示过渡效果持续0.5秒。transition - timing - function指定过渡的时间曲线如ease默认慢-快-慢、linear匀速等。例如transition - timing - function: ease - in - out;transition - delay过渡效果的延迟时间以秒s或毫秒ms为单位。例如transition - delay: 0.2s;表示延迟0.2秒后开始过渡。 完整示例
.button {width: 100px;height: 30px;background-color: blue;transition-property: background - color;transition-duration: 0.3s;transition-timing - function: ease;transition-delay: 0;
}
.button:hover {background-color: red;
}在这个示例中当鼠标悬停在按钮上时按钮的背景颜色会在0.3秒内以ease的时间曲线从蓝色过渡到红色没有延迟。
Float用法 作用用于使元素向左或向右浮动使得文本或其他内联元素可以环绕在它周围。常见属性值及示例 left元素向左浮动。例如
img {float: left;width: 100px;height: 100px;margin-right: 10px;
}- right元素向右浮动。例如.ad-box {float: right;width: 200px;height: 300px;background-color: lightgray;margin-left: 10px;
}需要注意的是当使用float布局时可能需要清除浮动使用clear: both;等属性来避免父元素高度塌陷等问题。例如
.clear-fix:after {content: ;display: table;clear: both;
}在父元素的类中添加clear-fix可以在浮动元素之后清除浮动确保父元素能够正确地包含浮动元素。
animation
animation的基本用法 animation是CSS中用于创建动画的一个简写属性它可以将多个与动画相关的属性组合在一起。其基本语法如下animation: name duration timing-function delay iteration-count direction fill-mode play-state;其中各参数的含义如下 name指定要应用的动画名称这个名称是通过keyframes规则定义的动画序列的名称。duration动画的持续时间以秒s或毫秒ms为单位。例如3s表示动画持续3秒。timing-function指定动画的时间曲线用于控制动画在每个阶段的速度。常见的值有ease默认慢 - 快 - 慢、linear匀速、ease - in慢 - 快、ease - out快 - 慢、cubic - 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来动态改变这个值。 animation的实例 简单的淡入淡出动画 首先定义keyframes规则来创建动画序列
keyframes fade-in-out {from {opacity: 0;}to {opacity: 1;}
}然后将这个动画应用到一个元素上
div {width: 100px;height: 100px;background - color: lightblue;animation: fade-in-out 3s ease-in-out 0s infinite alternate;
}在这个例子中创建了一个名为fade - in - out的动画它会让元素的透明度从0完全透明变化到1完全不透明。这个动画应用到一个div元素上动画持续时间为3秒时间曲线是ease - in - out淡入淡出效果没有延迟会无限次交替播放先淡入再淡出然后再淡入如此循环。元素移动和旋转动画 定义keyframes规则
keyframes move-and-rotate {0% {transform: translate(0, 0) rotate(0deg);}50% {transform: translate(100px, 100px) rotate(180deg);}100% {transform: translate(200px, 0) rotate(360deg);}
}- 应用动画到元素img {width: 50px;height: 50px;animation: move-and-rotate 5s linear 0s infinite;
}这个例子中keyframes规则定义了一个动画序列元素从初始位置0,0开始先移动到(100px,100px)并旋转180度然后移动到(200px,0)并旋转360度。动画应用到一个img元素上持续时间为5秒以线性速度播放没有延迟并且无限次播放。这样图片会在页面上一边移动一边旋转形成一个动态的效果。
transformtransitionanimation 综合应用实例
以下是一个将transform、transition和animation综合应用的实例通过一个简单的方块元素在鼠标悬停时产生多种动态效果来展示这三个属性的协同工作
!DOCTYPE html
html langzh-CNheadmeta charsetUTF - 8meta nameviewport contentwidthdevice-width, initial-scale 1.0titleTransform, Transition, Animation综合应用/titlestyle/* 定义动画 */keyframes colorChange {0% {background-color: lightblue;}50% {background-color: lightgreen;}100% {background-color: lightcoral;}}/* 定义元素的基本样式 */.box {width: 100px;height: 100px;background-color: lightblue;margin: 50px auto;/* 过渡效果 */transition: transform 0.5s ease-in-out;/* 动画 */animation: colorChange 5s ease-in-out infinite alternate;}/* 鼠标悬停时的样式 */.box:hover {/* 变换效果 */transform: scale(1.5) rotate(45deg);}/style
/headbodydiv classbox/div
/body/html代码实例解释
keyframes colorChange定义了一个名为colorChange的动画该动画使元素的背景颜色在lightblue浅蓝色、lightgreen浅绿色和lightcoral浅珊瑚色之间交替变化。.box类样式 定义了一个宽度和高度均为100px的方块背景颜色为lightblue并居中显示在页面上。使用transition: transform 0.5s ease - in - out;设置了过渡效果当transform属性发生变化时例如在鼠标悬停时将以ease - in - out的时间曲线在0.5秒内平滑过渡。使用animation: colorChange 5s ease - in - out infinite alternate;应用了之前定义的colorChange动画。该动画将以ease - in - out的时间曲线持续5秒无限次播放并且每次播放方向交替即从浅蓝色到浅绿色再到浅珊瑚色然后反过来。 .box:hover样式当鼠标悬停在方块上时应用transform: scale(1.5) rotate(45deg);使方块在放大到原来的1.5倍的同时顺时针旋转45度。由于之前设置了过渡效果这个变换过程会平滑地进行。
通过这个例子展示了transform用于实现即时的元素变换transition用于创建平滑的过渡效果animation用于实现更复杂的动画序列三者结合可以创造出丰富多样的动态交互效果。
