CSS3 animation 动画

时间：2022-09-03 10:06:04

今天看到一个很酷的logo看了下他用的是animation 动画效果，就拿来做例子

浏览器支持

Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。

Safari 和 Chrome 支持替代的 -webkit-animation 属性。

注释：Internet Explorer 9 以及更早的版本不支持 animation 属性。

定义和用法

animation 属性是一个简写属性，用于设置六个动画属性：

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

默认值： none 0 ease 0 1 normal
继承性： no
版本： CSS3
JavaScript 语法： object.style.animation="mymove 5s infinite"

语法

animation: name duration timing-function delay iteration-count direction;
值 描述
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。

下面是w3school的实例，

<!DOCTYPE html>

<html>

<head>

<style>

div

{

width:100px;

height:100px;

background:red;

position:relative;

animation:mymove 5s infinite;

-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/

}

@keyframes mymove

{

from {left:0px;}

to {left:200px;}

}

@-webkit-keyframes mymove /*Safari and Chrome*/

{

from {left:0px;}

to {left:200px;}

}

</style>

</head>

<body>

<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation 属性。</p>

<div></div>

</body>

</html>

这是站点logo使用的动画效果

<div id="logo"></div>

#logo {
    animation: 1s steps(16) 0s reverse none infinite running logo;
    background: transparent url("seclogo.png") no-repeat scroll 0 0;
　 width: 195px;
    height: 150px;
}
 
@-webkit-keyframes logo {
    from { background-position: 0px; }
    to { background-position: -3120px; }
}
@-moz-keyframes logo {
    from { background-position: 0px; }
    to { background-position: -3120px; }
}
@-o-keyframes logo {
    from { background-position: 0px; }
    to { background-position: -3120px; }
}
好简单就出了一个跳动的动作，很强大啊， 调整steps（16）中的数字还能实现左右滑动效果 ，1s自然就是跳动的频率了，不过加快动作好像不行，慢动作却是可以。
附上seclogo.png图 大家可以测试看看，这是他们原网站的www.66pc28.com的logo,虽然这logo看上去有些不协调的字体，但效果还是可以得，借鉴中。
 
CSS3 animation 动画
 

CSS3 animation 动画的更多相关文章

  1. css3 animation动画特效插件的巧用

    这一个是css3  animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...

  2. css3 animation动画技巧

    一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...

  3. CSS3 animation动画

    CSS3 animation动画 1.@keyframes 定义关键帧动画2.animation-name 动画名称3.animation-duration 动画时间4.animation-timin ...

  4. css3 animation&lpar;动画&rpar;笔记

    在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Keyframes",我们把他叫做“关键帧”,玩过flash的朋友可能对这个东西并不会陌生.下面我们就一起 ...

  5. css3 animation 动画属性简介

    animation 动画属性介绍 animation 属性是一个简写属性,用于设置动画属性: 1. animation-name----规定需要绑定到选择器的 keyframe 名称. 语法:anim ...

  6. css3 animation动画事件

    当使用css3时,会遇到利用@keyframes来定义动画事件,利用以下3个事件,能够捕捉当前元素的动画: AnimationEnd //动画结束时 AnimationStart  //动画開始 An ...

  7. CSS3 animation动画，循环间的延时执行时间

    如下代码,其中的delay值为3s,但是animation按现在的规则,这个delay是指动画开始前的延时,在动画循环执行间,这个delay是不生效的. .item{ webkit-animation ...

  8. css3 animation动画使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 关于css3 Animation动画

    在介绍animation之前有必要先来了解一个东西,那就是“keyframes”,我们把他叫做“关键帧”: 在使用transition制作一个简单的transition效果时,包括了初始属性,最终属性 ...

随机推荐

  1. CF&num; Educational Codeforces Round 3 E&period; Minimum spanning tree for each edge

    E. Minimum spanning tree for each edge time limit per test 2 seconds memory limit per test 256 megab ...

  2. Java使用默认浏览器打开指定URL

    直接贴代码: 方法一: Runtime.getRuntime().exec("rundll32 url.dll,FileProtocolHandler http://www.baidu.co ...

  3. android 读取EXcel 文件 读取文件内存卡的权限

    android 采用Java的读取xls文件的方式实现. 需要导入第三方Jxl.jar 包.  代码改自 其他博主  : 这只摘录下 读取xls文件的部分代码,当然这个代码在安卓平台需要添加下面的权限 ...

  4. DBeaver入门

    1 安装好连接好数据库,查询操作 注意黄色字体1 2 3 4 执行sql操作

  5. C&num; windows程序应用与JavaScript 程序交互实现例子

    C# windows程序应用与JavaScript 程序交互实现例子 最近项目中又遇到WinForm窗体内嵌入浏览器(webBrowser)的情况,而且涉及到C#与JavaScript的相互交互问题, ...

  6. 分布式事务之TCC服务设计和实现注意事项

    分布式事务之TCC服务设计和实现注意事项-云栖社区-阿里云 https://yq.aliyun.com/articles/609854 分布式事务之TCC事务丶一个站在Java后端设计之路的男青年个人 ...

  7. xshell 禁用铃声 提示音

    xshell 的铃声在操作时比较烦,所以通常会关闭. 操作方法: 工具 > 选项 > 高级, 在“终端”选项下的 “禁用铃声” 前面打上勾, 确定即可.

  8. &lbrack;c&sol;c&plus;&plus;&rsqb; programming之路（3）、转义字符及内存

    一.转义字符 #include<stdio.h> void main(){ printf("hello \nworld\a");// \n换行 \a机器响一声 getc ...

  9. 初学html的单词笔记

    font-size: 文字大小color: 顏色solid: 边框线text-align: 間距center: 文字放在中間<head> 网页头部<title> 网页标题&lt ...

  10. POJ 3468：A Simple Problem with Integers（线段树区间更新模板）

    A Simple Problem with Integers Time Limit: 5000MS   Memory Limit: 131072K Total Submissions: 141093 ...

相关文章