首页 范文大全 古典文学 职场知识 中国文学 公文书信 外国名著 寓言童话 百家讲坛 散文/诗歌 美文欣赏 礼仪知识 民俗风情
  • 工作总结
  • 工作计划
  • 心得体会
  • 竞聘演讲
  • 会议发言
  • 爱国演讲
  • 就职演说
  • 开业开幕
  • 思想学习
  • 征文演讲
  • 经验材料
  • 述职报告
  • 调研报告
  • 工作汇报
  • 年终总结
  • 申报材料
  • 学习体会
  • 企划方案
  • 活动方案
  • 技巧经验
  • 模板范例
  • 思想宣传
  • 经济工作
  • 工作报告
  • 组织人事
  • 反腐倡廉
  • 慰问贺电
  • 先进事迹
  • 思想汇报
  • 入党申请书
  • 党会发言
  • 先进性教育
  • 入团申请书
  • 个人简历
  • 演讲稿
  • 调查报告
  • 实习报告
  • 和谐社会
  • 观后感
  • 读后感
  • 作文范文
  • 自我鉴定
  • 讲话稿
  • 自查报告
    • 蒲公英阅读网 > 范文大全 > 先进性教育 > 正文

    CSS动画基础：常用动画效果设置

    时间：2020-09-23 17:21:25 来源：蒲公英阅读网 本文已影响人 蒲公英阅读网手机站

    相关热词搜索：动画 常用 效果

    　CSS 动画基础：常用动画效果的设置 设页面中有<div class=”shape”></div>，若定义.shape 的样式规则为：

    　 .shape

    　 {

    　 position: absolute;

    　 left:125px;

    　 top:75px;

    　 width: 150px;

    　 height: 150px;

    　 border-radius:10% 50% 10% 50%;

    　 border:2px solid #f00;

    　 background-color: #ff0;

    　 } 可在页面中显示如图 1 所示的图形。

    　图 1

    　动画基本图形 以这个图形作为参与动画的对象，为其定义关键帧 anim，并设置 animation 属性，使之产生动画效果。

    　例如，定义如下的关键帧 anim

    　 @keyframes anim

    　{

    　 0%,15% { transform: rotate(0); }

    　 100%

    　 { transform: rotate(360deg);

    　}

    　 } 可在页面中呈现如图 2 所示的动画，图形旋转起来了。

    　图 2

    　图形旋转效果 编写的 HTML 文件内容如下。

    　<!DOCTYPE html>

    　<html> <title>图形的动画效果</title> <head> <style>

    　 .container

    　 {

    　 position: relative;

    　 margin: 50px auto;

    　 width: 400px;

    　 height:300px;

    　 background:#d8d8d8;

    　 overflow:hidden;

    　 border: 4px solid rgba(255, 0, 0, 0.9);

    　 border-radius: 10%;

    　 }

    　 .shape

    　 {

    　 position: absolute;

    　 left:125px;

    　 top:75px;

    　 width: 150px;

    　 height: 150px;

    　 border-radius:10% 50% 10% 50%;

    　 border:2px solid #f00;

    　 background-color: #ff0;

    　 animation:anim 5s linear infinite;

    　 }

    　 @keyframes anim

    　{

    　 0%

    　 { transform: rotate(0); }

    　 100%

    　 { transform: rotate(360deg);

    　}

    　 } </style> </head> <body> <div class="container">

    　 <div class="shape"></div> </div> </body> </html> 1．闪烁 闪烁动画效果的设置主要利用 opacity 属性为参与动画的对象设置一个透明度级别。其基本格式为：opacity: value;

    　其中，属性值 value 指定不透明度。从 0.0（完全透明）到 1.0（完全不透明）。

    　若修改关键帧 anim 如下：

    　 @keyframes anim

    　 {

    　 0%,50%,100%

    　 {opacity:1;}

    　 25%,75%

    　 {opacity:0;}

    　 } 则在页面中呈现如图 3 所示的闪烁动画效果。

    　图 3

    　闪烁 2．淡入淡出 利用 opacity 属性还可以实现淡入淡出的动画效果。

    　若修改关键帧 anim 如下：

    　 @keyframes anim

    　 {

    　 0%

    　{

    　opacity:1;

    　transform:translateY(0);

    　}

    　 100%

    　{

    　opacity:0;

    　transform:translateY(-225px);

    　}

    　 } 则在页面中呈现如图 4 所示的向上淡出动画效果。

    　图 4

    　向上淡出 若修改关键帧 anim 如下：

    　 @keyframes anim

    　 {

    　 0%

    　{

    　opacity:0;

    　transform:translateX(-275px);

    　}

    　 100%

    　{

    　opacity:1;

    　transform:translateX(0);

    　}

    　 } 则在页面中呈现如图 5 所示的从左淡入动画效果。

    　 图 5

    　从左淡入 仿照上面的例子，大家可以试试向下淡出、向左淡出、向右淡出、从上淡入、从下淡入、从右淡入等动画效果的设置。甚至可以设置从四个角向中心的淡入、从中心向四个角淡出的动画效果。

    　3．飞入 利用变换属性 transform:translate();让对象的位置进行变化，可以实现飞入动画效果。

    　若修改关键帧 anim 如下：

    　@keyframes anim

    　 {

    　 0%

    　{ transform:translate(-275px,-225px);

    　}

    　 100%

    　{ transform:translate(0,0);

    　}

    　 } 则在页面中呈现如图 6 所示的从左上角飞入动画效果。

    　图 6

    　从左上角飞入 4．缩放 缩放主要是利用变换属性 transform:scale(n)进行设置。

    　若修改关键帧 anim 如下：

    　 @keyframes anim

    　 {

    　 0%,100%

    　 { transform:scale(1);}

    　 50%

    　{ transform:scale(1.8);}

    　 } 则在页面中呈现如图 7 所示的放大与缩小动画效果。

    　 图 7

    　放大与缩小 5．翻转 利用属性 transform: rotateX(n);或 transform: rotateY(n);可以实现翻转动画效果。

    　若修改关键帧 anim 如下：

    　 @keyframes anim

    　 {

    　 0%

    　 {transform:perspective(400px) rotateY(0);}

    　 100% {transform:perspective(400px) rotateY(360deg);}

    　 } 则在页面中呈现如图 8 所示的水平（左右）翻转动画效果。

    　图 8

    　水平翻转 若修改关键帧 anim 如下：

    　 @keyframes anim

    　 {

    　 0%

    　 {transform:perspective(400px) rotateX(0);}

    　 100% {transform:perspective(400px) rotateX(360deg);}

    　 } 则在页面中呈现如图 9 所示的垂直（上下）翻转动画效果。

    　图 9

    　垂直翻转

    　若修改关键帧 anim 如下：

    　 @keyframes anim

    　 {

    　0%

    　{ transform:perspective(400px) rotateY(0);}

    　 40% { transform:perspective(400px) rotateY(170deg) scale(1.5);}

    　 50% { transform:perspective(400px) rotateY(190deg) scale(1.5);}

    　 80% { transform:perspective(400px) rotateY(360deg) scale(1);}

    　 100% {transform:perspective(400px) scale(1);}

    　 } 则在页面中呈现如图 10 所示的缩放翻转动画效果。

    　图 10

    　缩放式翻转 6．摇摆 让对象在一个较小范围内进行旋转，可以实现摇摆的动画效果。

    　若修改关键帧 anim 如下：

    　 @keyframes anim

    　 {

    　 20%

    　{ transform:rotate(15deg); }

    　 40%

    　{ transform:rotate(-15deg); }

    　 60%

    　{ transform:rotate(8deg);}

    　 80%

    　{ transform:rotate(-8deg); }

    　 100% { transform:rotate(0); }

    　 } 则在页面中呈现如图 11 所示的摇摆动画效果。

    　图 11

    　摇摆 若在摇摆过程同时让对象左右适当平移，修改关键帧 anim 如下：

    　 @keyframes anim

    　 {

    　0%,100%

    　 { transform:translateX(0);}

    　 15%

    　{ transform:translateX(-100px) rotate(-5deg);}

    　 30%

    　{ transform:translateX(80px) rotate(5deg);}

    　 45%

    　{ transform:translateX(-65px) rotate(-3deg);}

    　 60%

    　{ transform:translateX(40px) rotate(3deg);}

    　 75%

    　{ transform:translateX(-20px) rotate(-1deg);}

    　 } 则在页面中呈现如图 12 所示的左右摇摆动画效果。

    　图 12

    　左右摇摆 若在摇摆过程同时让对象进行适当缩放，修改关键帧 anim 如下：

    　 @keyframes anim

    　 {

    　 0%,100%

    　{

    　transform:scale(1)

    　rotate(0);}

    　 10%,20%

    　{ transform:scale(0.9) rotate(-8deg);}

    　 30%,50%,70%,90% { transform:scale(1.1) rotate(8deg);}

    　 40%,60%,80%

    　{ transform:scale(1.1) rotate(-8deg);}

    　 } 则在页面中呈现如图 13 所示的晃动动画效果，它也像在振铃。

    　图 13

    　晃动 7．往复运动 若修改关键帧 anim 如下：

    　 @keyframes anim

    　 {

    　 0%,100%

    　{

    　transform:translateX(0); }

    　 10%,30%,50%,70%,90%

    　{

    　transform:translateX(-15px); }

    　 20%,40%,60%,80%

    　{

    　transform:translateX(15px); }

    　 }

    　则在页面中呈现如图 14 所示的左右往复运动动画效果。

    　图 14

    　左右往复运动 若修改关键帧 anim 如下：

    　 @keyframes anim

    　 {

    　 0%,20%,50%,80%,100% { transform:translateY(0);}

    　 40% { transform:translateY(-50px); }

    　 60% { transform:translateY(50px); }

    　 } 则在页面中呈现如图 15 所示的上下弹跳动画效果。

    　图 15

    　上下弹跳 若修改关键帧 anim 如下：

    　 @keyframes anim

    　 {

    　 0%,100% { transform:translate(-20px,-20px); }

    　 25%

    　 { transform:translate(-20px,20px); }

    　 50%

    　 { transform:translate(20px,20px); }

    　 80%

    　 { transform:translate(20px,-20px); }

    　 } 则在页面中呈现如图 16 所示的四周循环往复动画效果。

    　图 16

    　四周循环往复运动

    　8．旋入 若修改关键帧 anim 如下：

    　 @keyframes anim

    　 {

    　0%

    　 { transform-origin:left bottom;transform:rotate(-180deg); opacity:0; }

    　 100%

    　{ transform-origin:left bottom;transform:rotate(0); opacity:1;}

    　 } 则在页面中呈现如图 17 所示的从左下角旋入动画效果。

    　图 17

    　从左下角旋入

  • [cng加气站实习心得]
  • 给女孩聊天的话题 和女生聊天的话
  • 【笔画3画的字取名_这么简单你还不来】笔画
  • 一年级体育下册教学计划 一年级科学下册书
  • [世界上国家间最大的陆地争议地区] 世界上
  • 【成功餐饮企业创业故事】 餐饮免费模式成
  • 人际关系面试题及答案【关于人际关系的面试
  • [女性哲学语句]哲学语句
  • 【三只小猪读后感4篇】 三只小猪盖房子读
    • 范文大全
    • 职场知识
    • 精美散文
    • 名著
    • 讲坛
    • 诗歌
    • 礼仪知识
    最新文章

    推荐访问

    大反思大讨论活动 保安全” 筑防线 “查思想 贡献伟大时代” “以青春之我 工作评议报告 创建活动综述 市社保局党支部 自述报告 “党员先锋示范岗” 党建德育工作 达标创星活动 “星级党支部”创建 评星定级管理 社会组织党支部 第四巡察组 新进年轻干部 委厅机关 党性教育培训班 履职能力建设专题培训班 新考录社区工作者 “头雁领航”重点培训班 党组织业务培训 能力提升培训会 赋能经济高质量发展 “五好”园区 三年攻坚行动 行政管理能力建设提升班 高质量发展能力提升培训班 市疾控系统 中基层管理人员 专业能力提升专题培训班 新发展预备党员 进驻工作 迎接审计组 讲评推进大会 “三抓三促”行动动员 “永不过时的红岩精神” 市委党史研究室 科学绿化现场会 深化以案促改 一体推进不敢腐不能腐不想腐 奋斗精神 专题辅导讲稿 坚守使命追求 涉密 《党史学习教育工作条例》 百年新征程 “百年定位” 党课教育

    本文CSS动画基础：常用动画效果设置由蒲公英阅读网整理提供，版权归原作者、原出处所有。

    Copyright © 蒲公英阅读网 All Rights Reserved.