CSS第十天学习总结—— CSS3 动画

动画 animation

  • 动画(animation)是CSS3中具有颠覆性的特征之一,

  • 可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。

  • 相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。

  • 初学者容易对 动画过渡 傻傻分不清楚

  • 过渡 只能看到一次变化过程 如 宽度 1000px 变化到 100px

  • 动画 可以设置变化的次数 甚至是无数次

在这里插入图片描述

步骤

制作动画分为两步:

  1. 在css中定义动画函数 @keyframes:关键帧
  2. 给目标元素调用动画函数

在这里插入图片描述

示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 我们想页面一打开,一个盒子就从左边走到右边 */
        
        /* 1. 声明动画函数 */
        /* keyframes关键帧,理解,定义动画就是定义动画过程中的几个关键帧,然后根据关键帧依次变化*/
        @keyframes move {
     
            /* 开始状态 */
            0% {
     
                transform: translateX(0px);
            }
            /* 结束状态 */
            100% {
     
                transform: translateX(1000px);
            }
        }
        
        div {
     
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 2. 调用动画 */
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

动画序列:

  • 0% 是动画的开始,100% 是动画的完成。这样的规则就是动画序列。
  • @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。
  • 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
  • 请用百分比来规定变化发生的时间,或用关键词 “from” 和 “to”,等同于 0% 和 100%。

总结

keyframes:关键帧,理解,定义动画就是定义动画过程中的几个关键帧,然后根据关键帧依次变化。

语法

动画常用属性

属性 描述
@keyframes 规定动画
animation 所有动画属性的简写属性,除了animation-play-state属性
animation-name 规定@keyframes动画的名称。(必须)
animation-duration 规定动画完成一个周期所花费的秒或毫秒,默认是0。(必须)
animation-timing-function 规定动画的速度曲线,默认是“ease”
animation-delay 规定动画何时开始,默认是0
animation-iteration-count 规定动画被播放的次数,默认是1,还有infinite
animation-direction 规定动画是否在下一周期逆向播放,默认是“normal”,alternate逆播放
animation-play-state 规定动画是否正在运行或暂停。默认是“running”,还有“paused”
animation-fill-mode 规定动画结束后状态,保持forwards,回到起始backwards

动画名称

animation-name:xxx; 设置要使用的动画名。

持续时间

animation-duration: 0; 设置动画播放的持续时间, 默认是0s

速度曲线

animation-

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
模板说明: 1.版本支持:discuzx3.4版本,discuzx3.3版本,discuzx3.2版本。包括网站首页,论坛首页,论坛列表页,论坛内容页,论坛瀑布流,资讯列表页(支持多个),产品列表页(支持多个),关于我们频道页。 2.模板论坛首页,列表页,内容页,以及文章页面数据采用DIY数据读取,方便新手老手运营以及后期维护,时尚大气简洁。模板添加了不少处动画效果,增加用户体验和粘度。 3.模板有很多细节都有体现,同时对官方模板文件结构和功能位置做了更为优化的设计处理,无论是在前端界面上还是在CCS代码优化上,兼容主流浏览器,ie8-ie10,谷歌火狐等。 4.模板对css3支持很多,用谷歌火狐以及ie9版本以上的朋友可以看到不错的动画效果。 安装说明: 1.先解压得到文件夹【Creative!】传到空间上的【template】文件夹下,然后进入后台:界面——风格管理 选择模版进行安装即可。选择成为默认 ;然后进入工具>>更新缓存 2.导入相关页面的的DIY文件 --导入DIY文件步骤-- ---第一步:进入后台门户频道栏目,添加频道; ---第二步:开启产品频道,建立频道列表页模板名选择“Creative!_产品列表页”,文章页模板名选择“Creative!_产品内容页”; ---第三步:开启关于我们频道,建立频道列表页模板名选择“Creative!_关于我们页面”; ---第四步:开启资讯频道,建立频道列表页模板名选择“Creative!_频道列表页”,文章页模板名选择“Creative!_频道内容页”; ---第五步:在已经开启的文章列表页面导入DIY文件夹里面的“频道列表.xml”文件; ---第六步:在文章内容页面导入DIY文件夹里面的“频道内容.xml”文件; ---第七步:在门户页面导入DIY文件夹里面的“门户首页.xml”文件; ---第八步:在论坛页面导入DIY文件夹里面的“论坛首页.xml”文件; ---第九步:在版块列表页面也就是帖子列表页面导入DIY文件夹里面的“帖子列表.xml”文件,提示全局应用选 是 ; ---第十步:在帖子内容页 导入DIY文件夹里面的“帖子内容.xml”文件,提示全局应用选 是 。 --------------------------------------------------- diy修改(模板的diy主要有两种,一种是动态调用的,一种是静态模块) 1.动态调用的进入diy高级模式,点击蓝色的编辑进入diy弹出框设置各个选项(模块包括首页幻灯片和各个数据调用的模块) 2.静态模块编辑diy修改里面的静态代码就可以了,替换文字和链接 --------------------------------------------------- 修改注意 1.logo修改路径:/template/Creative/deancss/logo.png 2.底部信息及文字在common文件夹中的footer.php文件中修改
上海工会管理职业学院 《网页设计》课程考核方案设计 2010 ~ 2011学年第 2 学期 "考核方案设计:个人作品网站的综合建立与设计(分阶段分层次考核职业能力) " " " "要求在完成网页设计课程内容的学习后,能够把所学到的设计知识与技能运用到 " "个人艺术设计作品推介的综合网站设计与建立中,完成一份以展示个人风采、展 " "现专业能力,向社会与公司推荐自我、谋求良职的一个专题网站设计平台方案。 " " " "图纸要求:完成一套不少于8张有链接关系、影音效果和平面展示效果的综合网站" "设计HTML文件一份和整体课程设计报告一份。要求:排版布局、行为效果、互动 " "表单、超级链接、视频音频、广告宣传等均有表现,展现个人设计师气质和作品 " "的独特性。(包括1张主页和7张子页面) " "考核方案具体内容: " "1、考察对于网页设计软件DREAMWEAVERCS3方法的运用: " "(1)能建立合理的站点结构。 " "(2)具有原创性的独特个人设计风格,色彩搭配协调。 " "(3)综合网站设计网页内容设置符合相关要求,积极向上。 " "(4)撰写课程设计报告书要求,展现整体网站构思思路。 " "2、考察对于DWCS3软件与AI\PS软件、排版设计的综合运用的掌握认知: " "能熟练运用DW、AI、PS、等软件行网页设计方案建立与表现。 " "考核方案评分标准: " "项目 " "子项目 " "分值 " " " "站点结构 " "合理设计网站结构,合理安排栏目( 5 分) " "合理利用表格、布局表格、图层、框架等定位方法( 5 分) " "合理利用模板的若干技术模块( 5 分) " "共15 分 " " " "页面风格 " "网页设计独到,主题突出,题材新颖、构思独特,形象生动,具有较强的表现力 " "和感染力,网页设计和谐统一( 5 分) " "共15 分 " " " " " "网页整体设计思路清晰,色彩搭配合理,布局紧凑美观,版块结构清晰(5 分) " " " " " " " "层次分明,链接合理清晰,便于浏览( 5 分) " " " " " "技术规范 " "网页作品目录结构合理,文件名称使用规范(首页一律使用 index.html )( 5 " "分) " "共50 分 " " " " " "网页格式为 HTML 、 HTM 、 ASP ( 5 分) " "图片和动画格式: SWF , PNG , BMP , JPG ( JPEG), TIF, GIF( 5 分) " "网页上使用的的图标、图片、动画或 FLASH 能正常显示( 5 分) " "至少包含15张自己用AI或PS 制作或处理的图片( 5 分) " " " " " " " "使用 CSS 样式表( 5 分) " "使用行为、HTML等网页动态效果( 5 分) " " " " " " " "网页使用的字体在所有计算机内均能正常显示,无乱码( 5 分) " "网页所有链接能够被激活,链接内容符合要求与主题相关(5 分) " " " " " " " "网页数据定位准确,无偏移、错位,在 Microsoft Internet Explorer 800×600 " "和 1024×768 分辨率下能正常显示,浏览速度快捷,在不安装新插件的情况下可 " "正常浏览( 5 分) " " " " " "网页内容 " "语言规范流畅,无错别字,能科学、完整地表达主题( 5 分) " "共10 分 " " " " " "内容积极、健康向上,不出现任何违反现行法律、法规和社会道德的内容和链接 " "( 5 分) " " " " " "撰写课程设计报告书要求 " "报告书中包括制作网站的整体过程,从策划设计到最后测试,要求结构合理,条 " "理清晰,语言流畅,在文章中适当位置插入网站中的页面图像( 10 分) " "共10 分 " " " "附加分 " "为鼓励网页作品的原创性,要求作者原创性内容符合要求并与主题相关(链接必 " "须在首页中体现)的可获得此项加分( 10 分) " " " "共10 分 " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " ----------------------- 网页设计——考核方案全文共3页,当前为第1页。 网页设计——考核方案全文共3页,当前为第2页。 网页设计——考核方案全文共3页,当前为第3页。
CSS3的变形(transform)、过渡(transition)、动画(animation)是CSS3中非常重要的特性,可以为网页设计带来更加丰富的交互效果和视觉体验。 1. 变形(transform) 变形是指通过CSS3中的transform属性对元素进行平移、旋转、缩放、倾斜等操作,从而改变元素的形状和位置。具体的变形方式包括: 平移(translate):移动元素的位置。 旋转(rotate):以元素中心点为轴心进行旋转。 缩放(scale):缩放元素的大小。 倾斜(skew):倾斜元素。 矩阵变形(matrix):通过矩阵变换实现复杂的变形效果。 示例代码: ``` div { transform: translate(50px, 50px); } ``` 2. 过渡(transition) 过渡是指在元素属性改变时,通过CSS3中的transition属性设置过渡时间和过渡效果,从而实现平滑的转换效果。具体的过渡方式包括: 过渡时间(transition-duration):设置过渡动画的时间,单位可以是秒(s)或毫秒(ms)。 过渡效果(transition-timing-function):设置过渡效果,常用的有linear、ease-in、ease-out、ease-in-out等。 过渡属性(transition-property):设置需要过渡的属性,可以是单个属性或多个属性。 过渡延迟(transition-delay):设置过渡动画的延迟时间。 示例代码: ``` div { transition: all 1s ease-in-out; } ``` 3. 动画(animation) 动画是指通过CSS3中的animation属性对元素进行动画效果的设置。具体的动画方式包括: 关键帧动画(@keyframes):定义一组动画序列,可以设置元素在不同时间点上的样式。 动画时间(animation-duration):设置动画持续时间,单位可以是秒(s)或毫秒(ms)。 动画速度(animation-timing-function):设置动画速度,常用的有linear、ease-in、ease-out、ease-in-out等。 动画延迟(animation-delay):设置动画延迟时间。 动画方向(animation-direction):设置动画播放方向,可以是正方向(normal)、反方向(reverse)、交替播放(alternate)等。 动画次数(animation-iteration-count):设置动画播放次数,可以是无限次(infinite)。 示例代码: ``` div { animation: myanimation 2s ease-in-out infinite; } @keyframes myanimation { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } ``` 以上就是CSS3中变形、过渡、动画的基本介绍和示例代码,希望对你有所帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值