绍兴网站推广,wordpress升级后空白,凡诺企业网站管理系统,全国互联网平台CSS基础笔记系列
《CSS基础笔记-01CSS概述》
什么是动画
动画是一种综合艺术#xff0c;它集合了绘画、电影、数字媒体、摄影、音乐、文学等多种艺术门类于一身。具体来说#xff0c;动画是通过在连续多格的胶片上拍摄一系列单个画面#xff0c;然后连续播放#xff0c;…CSS基础笔记系列
《CSS基础笔记-01CSS概述》
什么是动画
动画是一种综合艺术它集合了绘画、电影、数字媒体、摄影、音乐、文学等多种艺术门类于一身。具体来说动画是通过在连续多格的胶片上拍摄一系列单个画面然后连续播放产生动态视觉的艺术和技术。
动画的英文有很多表述如animation、cartoon、animated cartoon、cameracature等。其中较正式的“Animation”一词源自于拉丁文字根anima意思为“灵魂”动词animate是“赋予生命”的意思引申为使某物活起来的意思。
因此动画可以理解为使用绘画的手法创造生命运动的艺术。动画技术较规范的定义是采用逐帧拍摄对象并连续播放而形成运动的影像技术。
在CSS中动画可以通过keyframes规则来定义。可以使用keyframes规则来创建动画并在特定时间点定义动画的帧。这些帧描述了元素从一种样式逐渐变化为另一种样式的效果。
CSS动画的工作原理
CSS动画的工作原理
定义动画如动画的名称、持续时间、播放次数等属性。可以使用animation属性进行设置。创建关键帧通过keyframes规则可以定义一系列关键帧描述元素在不同时间点的样式。应用动画将定义好的动画应用到元素上。通过将动画名称作为属性值将其应用到元素的animation属性中。浏览器渲染浏览器接收到CSS样式后会根据定义的动画和关键帧计算出动画过程中的每一帧并将这些帧连续播放形成动画效果。
动画属性(animation) To create a CSS animation sequence, you style the element you want to animate with the animationproperty or its sub-properties. This lets you configure the timing, duration, and other details of how the animation sequence should progress. This does not configure the actual appearance of the animation, which is done using the keyframes at-rule as described in the Defining animation sequence using keyframes. animation常用的子属性如下
animation-name指定关键帧规则的name。animation-delay设置动画延迟时间。animation-timing-function设置动画速度即通过建立加速度曲线设置动画在关键帧之间是如何变化。animation-iteration-count设置动画重复执行次数。animation-direction设置动画是否往返normal为不执行往返alternate为执行往返。animation-play-state控制动画是否执行或暂停。
p {animation-duration: 3s;animation-name: rightToLeft;
}关键帧规则
关键帧定义了动画过程中元素状态的实际变化效果。通过 keyframes rule在动画序列中定义关键帧的样式来控制CSS 动画序列中的中间状态从而呈现出视觉上的动画效果。
语法
keyframes keyframes-name { qualified-rule-list
}qualified-rule-list:percentage{property: value}例如
keyframes slidein {from {margin-left: 100%;width: 300%;}to {margin-left: 0%;width: 100%;}
}要使用关键帧先创建一个带名称的 keyframes 规则以便后续使用 animation-name 属性将动画同其关键帧声明匹配。每个 keyframes 规则包含多个关键帧也就是一段样式块语句每个关键帧由一个百分比值作为名称代表在动画进行中在哪个阶段触发这个帧所包含的样式。可以按任意顺序列出关键帧百分比它们将按照其应该发生的顺序来处理。
关键帧可以使用百分比或关键词“from”和“to”来表示时间点。“from”等价于0%表示起始帧“to”等价于“100%”表示结束帧。
实现动画
一旦完成动画的时间设置接下来就需要定义动画的具体表现。通过使用keyframes建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。
示例1
实现一个文字颜色动态变化的效果。(基于《CSS基础笔记-01CSS概述》的代码)
/* 元素选择器即直接匹配 HTML 元素的选择器。 */
h1 {color: red;
}/* 用逗号将不同选择器隔开即可一次使用多个选择器 */
p,li {color: green;
}/* 去除list bullets */
li {/* list-style-type: none; *//* list-style-type: space-counter; *//* list-style-type: kannada;r */list-style-type: \1F44D;
}p { animation-name: colorChange; animation-duration: 4s;animation-iteration-count:infinite;
}keyframes colorChange { 0% {color: red;}50% {color: green;}100% {color: blue;}
}!doctype html
html langenheadmeta charsetutf-8 /titleTao Te Ching/titlelink relstylesheet hrefstyles.css //headbodyh1第一章论道/h1p stylewhite-space: pre-line;道可道非常道名可名非常名。 无名天地之始有名万物之母; 故常无欲以观其妙常有欲以观其徼。 此两者同出而异名同谓之玄。玄之又玄众妙之门。/pulli第二章/lili第三章/lili第四章/lili第五章/li/ul/body
/html动画效果
css_flicker
示例2
实现一个滑入的效果。
p { animation-name: colorChange; animation-duration: 4s;animation-iteration-count:infinite;
}keyframes colorChange { 0% {color: red;}50% {color: green;}100% {color: blue;}
}动画效果
css_slidein
