您现在的位置： 万盛学电脑网 >> 程序编程 >> 网页制作 >> DivCSS教程 >> 正文
CSS3动态效果学习笔记
作者：佚名 责任编辑：admin 更新时间：2022-06-22
@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;"><div class="cont1 conns">animation-delay：规定动画何时开始 </div></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>
- 上一个程序编程： 使用css实现全兼容tooltip提示框
- 下一个程序编程： CSS中样式覆盖优先顺序详解
