足球游戏_中国足彩网￥体育资讯$

简要咨询 咨询QQ 网站导航 网站搜索 手机站点 联系我们
搜公告
  • 搜公告
  • 搜职位
公众号
事业单位
首 页
足球游戏
事业单位
特岗教师
三支一扶
银行招聘
中国足彩网
选调遴选
学历升学
公 众 号
全站导航
当前位置：首页 > 范文|应用文 > IT技术专栏 > 脚本栏目
CSS3动态效果学习笔记
来源：易贤网 阅读：992 次 日期：2015-03-02 11:11:03
温馨提示：易贤网小编为您整理了“CSS3动态效果学习笔记”,方便广大网友查阅！

@keyframe 规定动画

一般是跟animation一起用

animation : 规定动画的名字 规定动画的时间 规定动画的速度曲线。

@keyframe 定义动画的名称{ 动画时长的百分比。{一个或多个合法的 CSS 样式属性} }

目前大部分浏览器都没有支持@keyframe 和animation;所以要分浏览器书写

@keyframe

1.safari和chrome浏览器

@-webkit-keyframes myfrom{

from {top:0;}

to {top:200px;}

}

2.Firefox浏览器

@-moz-keyframes myfrom{

from {top:0;}

to {top:200px;}

}

3.Opera浏览器

@-o-keyframes myfrom{

from {top:0;}

to {top:200px;}

}

animation

1.safari和chrome浏览器

@-webkit-animation : myfrom 5s infinite

2.Firefox浏览器

@-moz-animation : myfrom 5s infinite

2.Opera浏览器

@-o-animation : myfrom 5s infinite

例子

代码如下

<!DOCTYPE html>

<html>

<head>

<title>CSS3动态效果demo</title>

<meta charset="utf-8">

<meta name="keyword" content="CSS3动态效果demo">

<meta name="description" content="CSS3动态效果demo">

<meta name="author" content="戎sir">

<link rel="stylesheet" type="text/css" href="css.css">

</head>

<body>

<div class="main">

<div class="cont">

<div class="cont1 conns">

animation

动画属性

@keyframes：

规定动画

</div>

<span data="1">源代码</span>

</div>

<div class="cont">

<div class="cont2 conns">

animation-delay：

规定动画何时开始

</div>

<span data="2">源代码</span>

</div>

<div class="cont">

<div class="cont3 conns">

animation-iteration-count：

规定动画次数

</div>

<span data="3">源代码</span>

</div>

<div class="cont">

<div class="cont4 conns">

animation-direction：

规定下次动画逆向

</div>

<span data="4">源代码</span>

</div>

<div class="cont">

<div class="cont5 conns">

</div>

<span data="5">源代码</span>

</div>

<div class="cont">

<div class="cont6 conns">

</div>

<span data="6">源代码</span>

</div>

<div class="cont">

<div class="cont7 conns">

</div>

<span data="7">源代码</span>

</div>

<div class="cont">

<div class="cont8 conns">

</div>

<span data="8">源代码</span>

</div>

</div>

<div class="overbody hidden"></div>

<div class="commom" id="show1">

<textarea readonly="readonly" class="tip" style="border-bottom:1px solid #000;">&lt;div class="cont1 conns"&gt;animation-delay：规定动画何时开始 &lt;/div&gt;</textarea>

<textarea readonly="readonly" class="tipcss">

body{background-color: #000;}

.cont{

border: 1px solid #fff;

float: left;

width: 250px;

height: 250px;

position: relative;

box-sizing:border-box;

}

.conns{white-space: initial;}

.cont a{

position: absolute;

top:50px;

left: 5px;

color: #e3e3e3;

word-wrap: break-word;

display: block;

width: 5px;

text-decoration: none;

}

.cont1{

width: 100px;

height:80px;

margin:0 auto;

background-color: #999;

color: #fff;

padding: 10px;

position:relative;

overflow: hidden;

animation:myfrom 5s infinite;

-webkit-animation:myfrom 5s infinite;

}

@-webkit-keyframes myfrom{

from {top:0;}

to {top:150px;}

}

@keyframes myfrom{

from {top:0;}

to {top:150px;}

}</textarea>

</div>

<div class="commom" id="show2">

<textarea readonly="readonly" class="tip" style="border-bottom:1px solid #000;">&lt;div class="cont2 conns"&gt;animation 动画属性,@keyframes：规定动画 &lt;/div&gt;</textarea>

<textarea readonly="readonly" class="tipcss">

.cont2{

width: 80px;

height:80px;

margin:0 auto;

background-color: #999;

color: #fff;

padding: 10px;

position:relative;

overflow: hidden;

animation:myfrom 5s infinite;

-webkit-animation:myfrom 5s infinite;

animation-delay:2s;

-webkit-animation-delay:2s;

}

其余css同第一个

</textarea>

</div>

<div class="commom" id="show3">

<textarea readonly="readonly" class="tip" style="border-bottom:1px solid #000;">&lt;div class="cont3 conns"&gt;animation-iteration-count： 规定动画次数&lt;/div&gt;</textarea>

<textarea readonly="readonly" class="tipcss">

.cont3{

width: 80px;

height:80px;

margin:0 auto;

background-color: #999;

color: #fff;

padding: 10px;

position:relative;

overflow: hidden;

animation:myfrom 5s infinite;

-webkit-animation:myfrom 5s infinite;

animation-iteration-count:2;

-webkit-animation-iteration-count:2;

}

其余css同第一个

</textarea>

</div>

<div class="commom" id="show4">

<textarea readonly="readonly" class="tip" style="border-bottom:1px solid #000;">&lt;div class="cont4 conns"&gt;animation-direction： 规定下次动画逆向&lt;/div&gt;</textarea>

<textarea readonly="readonly" class="tipcss">

.cont4{

width: 80px;

height:80px;

margin:0 auto;

background-color: #999;

color: #fff;

padding: 10px;

position:relative;

overflow: hidden;

animation:myfrom 5s infinite;

-webkit-animation:myfrom 5s infinite;

animation-direction:alternate;

-webkit-animation-direction:alternate;}

其余css同第一个

</textarea>

</div>

<div class="commom" id="show5">

<textarea readonly="readonly" class="tip" style="border-bottom:1px solid #000;">&lt;div class="cont5 conns"&gt; &lt;/div&gt;</textarea>

<textarea readonly="readonly" class="tipcss">

.cont5{

margin: 6em auto;

font-size: 10px;

position: relative;

border: 1.1em solid rgba(255, 255, 255, 0.2);

border-left: 1.1em solid #ffffff;

-webkit-animation: cont5 1.1s infinite linear;

animation: cont5 1.1s infinite linear;

}

.cont5,.cont5:after{

border-radius: 50%;

width: 10em;

height: 10em;

}

@keyframes cont5{

from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}

to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}

}

@-webkit-keyframes cont5{

from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}

to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}

}</textarea>

</div>

<div class="commom" id="show6">

<textarea readonly="readonly" class="tip" style="border-bottom:1px solid #000;">&lt;div class="cont6 conns"&gt; &lt;/div&gt;</textarea>

<textarea readonly="readonly" class="tipcss">

body{background-color: #000;}

.cont6{

height: 120px;

width: 120px;

margin: 50px auto;

border-radius: 50%;

background:linear-gradient(left,#fff,#000);

background:-webkit-linear-gradient(left,#fff 10%,rgba(255,255,255,0) 40%);

background:-moz-linear-gradient(left,#fff 10%,rgba(255,255,255,0) 40%);

background:-o-linear-gradient(left,#fff 10%,rgba(255,255,255,0) 40%);

background:-ms-linear-gradient(left,#fff 10%,rgba(255,255,255,0) 40%);

position: relative;

-webkit-animation: cont6 1.1s infinite linear;

animation: cont6 1.1s infinite linear;

}

.cont6:before{

height: 50%;

width: 50%;

background:#fff;

content: '';

display: block;

border-radius:100% 0 0 0;

position: absolute;

top:0;

left: 0;

}

.cont6:after{

height: 75%;

width: 75%;

margin: auto;

background:#000;

content:'';

display: block;

border-radius:50%;

position: absolute;

top:0;left: 0;

right: 0;

bottom: 0;

}

@keyframes cont6{

from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}

to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}

}

@-webkit-keyframes cont6{

from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}

to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}

}</textarea>

</div>

<div class="commom" id="show7">

<textarea readonly="readonly" class="tip" style="border-bottom:1px solid #000;">&lt;div class="cont7 conns"&gt; &lt;/div&gt;</textarea>

<textarea readonly="readonly" class="tipcss">

body{background-color: #000;}

.cont7,.cont7:before,.cont7:after{

height: 25px;

width: 25px;

border-radius: 50%;

animation:cont7 1.8s infinite ease-in-out;

-webkit-animation:cont7 1.8s infinite ease-in-out;

}

.cont7{

position: relative;

top:0;

margin: 80px auto;

animation-delay:0.2s;

-webkit-animation-delay:0.2s;

}

.cont7:before{

content: '';

position: absolute;

left: -50px;

}

.cont7:after{

content: '';

position: absolute;

left: 50px;

animation-delay:0.4s;

-webkit-animation-delay:0.4s;

}

@keyframes cont7{

0%,

80%,

100% {box-shadow: 0 2.5em 0 -1.3em #ffffff; }

40% {box-shadow: 0 2.5em 0 0 #FFF;}

}

@-webkit-keyframes cont7{

0%,

80%,

100% {box-shadow: 0 2.5em 0 -1.3em #ffffff;}

40% {box-shadow: 0 2.5em 0 0 #FFF;}

}</textarea>

</div>

<div class="commom" id="show8">

<textarea readonly="readonly" class="tip" style="border-bottom:1px solid #000;">&lt;div class="cont8 conns"&gt; &lt;/div&gt;</textarea>

<textarea readonly="readonly" class="tipcss">

body{background-color: #000;}

.cont8{

width: 96px;

height: 48px;

border-radius: 50%;

border-bottom:50px solid #fff;

border-top:2px solid #fff;

border-left:2px solid #fff;

border-right:2px solid #fff;

position: relative;

top:0;

margin: 80px auto;

}

.cont8:before{

content: '';

position: absolute;

width: 12px;

height: 12px;

border-radius: 50%;

border: 18px solid #000;

top:21px;

background-color: #fff;

left: 0;

}

.cont8:after{

content: '';

position: absolute;

width: 12px;

height: 12px;

border-radius: 50%;

border: 18px solid #fff;

top:21px;

background-color: #000;

right: 0;

}</textarea>

</div>

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>

<script type="text/javascript" src="show.js"></script>

</body>

</html>

文章来源：

中国足彩网信息请查看IT技术专栏

中国足彩网信息请查看脚本栏目
【点此处就本文及相关问题在本站进行非正式的简要咨询（便捷快速）】 【点此处查询各地各类考试咨询QQ号码及交流群】
上一篇：IE9下DIV本来应该居中的结果显示为居左
下一篇：浏览器如何判断css优先级
易贤网手机网站地址：CSS3动态效果学习笔记
由于各方面情况的不断调整与变化，易贤网提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！
相关阅读脚本栏目
Bottle框架中的装饰器类和描述符应用详解10月30日
Python探索之SocketServer详解10月30日
Python探索之实现一个简单的HTTP服务器10月30日
python探索之BaseHTTPServer-实现Web服务器介绍10月30日
13个最常用的Python深度学习库介绍10月30日
深入理解Python中的*重复运算符10月30日
python logging日志模块详解10月30日
System表空间不足的报警问题浅析10月22日
Android开发自定义TextView省略号样式的方法10月22日
MySQL 清除表空间碎片的实例详解10月22日
Ubuntu下MySQL安装及配置远程登录教程10月22日
Python 2.x如何设置命令执行的超时时间实例10月22日
windows 64位下redis安装教程10月22日
Android 自定义 HorizontalScrollView 打造多图片OOM 的横向滑动效果10月22日
浅谈Node Inspector 代理实现10月22日
java web开发之购物车功能实现示例代码10月22日
Android开发中GridView用法示例10月22日
Django ORM框架的定时任务如何使用详解10月22日
SpringMail使用过程中的报错解决办法10月22日
Android 使用自定义RecyclerView控件实现Gallery效果10月22日
易贤网移动网站
最新信息
2024年11月红河州建水县坡头乡卫生院编外工作人员招聘公告
2024年楚雄师范学院招聘第三十批博士拟聘用人员公示
2024年昆明市事业单位选调工作人员进入集中面试考生名单公告
2025年曲靖经济技术开发区卓然学校教师岗位招聘公告
2024年昆明市中医医院见习人员招聘进入面试人员名单及面试公告
2024年昆明市中医医院三季度招聘部分岗位取消及降低开考比例公告
2024年下半年昆明市妇幼保健院招聘部分岗位取消及降低开考比公告
2024年丽江市招聘大学生乡村医生笔试成绩及面试名单公告
2024年文山市人社局第九期城镇公益性岗位人员招聘公告
2024年11月云南森宇食品有限责任公司招聘信息
公考类
云南公务员 贵州公务员 四川公务员 广西公务员 各省公务员 国家公务员 选调遴选
招聘类
事业单位 中国足彩网 特岗教师 三支一扶 志 愿 者 银行招聘 国企招聘
各类考试
学历升学 会计考试 职业资格 外语考试 医学考试 工程考试 教师资格
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号：滇ICP备2023014141号-1 足球游戏_中国足彩网￥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证：（云）人服证字（2023）第0102001523号
云南网警备案专用图标
联系电话：0871-65317125（9:00—18:00） 获取招聘考试信息及咨询关注公众号：hfpxwx
咨询QQ：526150442（9:00—18:00）版权所有:易贤网
云南网警报警专用图标