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>

文章来源：http://rongs100.com/index.php?m=content&c=index&a=show&catid=11&id=36

时间： 2024-09-22 01:25:09

CSS3动态效果学习笔记的相关文章

Jquery 学习笔记（三）240多个jQuery插件

Jquery 学习笔记(三) -240多个jQuery插件 2009年11月30日二 作者:   邦畿千里   概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架.其宗旨是-写更少的代码,做更多的事情.它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及的,它兼容 CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+). jQuery 是一个快速的,简洁的 javaScript

Jquery 学习笔记（一）Jquery初识

Jquery 学习笔记(一) -Jquery初识 2009年11月29日星期日 作者:   邦畿千里   概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架.其宗旨是-写更少的代码,做更多的事情.它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及的,它兼容 CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+). jQuery 是一个快速的,简洁的 javaScript 库,使

Ajax学习笔记---3种Ajax的实现方法【推荐】_AJAX相关

Ajax:  Asynchronous JavaScript and Xml , 异步js脚本和xml , 常用来实现页面局部的异步刷新, 对提高用户体验有很大帮助. Xml在多语言时较有优势, 但Ajax技术实际上较多采用Json对象而不是Xml来处理数据. (一) Ajax历史....了解性知识 Ajax归属于Web前端开发技术, 与javascript有着异常紧密的联系. Ajax就是一种实现异步通信无刷新的技术, 而这种技术可以有很多种实现方式. 浏览器的鼻祖网景(NetScape)公司

Ajax学习笔记---3种Ajax的实现方法【推荐】

Ajax:  Asynchronous JavaScript and Xml , 异步js脚本和xml , 常用来实现页面局部的异步刷新, 对提高用户体验有很大帮助. Xml在多语言时较有优势, 但Ajax技术实际上较多采用Json对象而不是Xml来处理数据. (一) Ajax历史....了解性知识 Ajax归属于Web前端开发技术, 与javascript有着异常紧密的联系. Ajax就是一种实现异步通信无刷新的技术, 而这种技术可以有很多种实现方式. 浏览器的鼻祖网景(NetScape)公司

JetSpeed学习笔记(一)

笔记 JetSpeed学习笔记(一) fuweilin 2005-4-7 前言 参加了公司的portal的兴趣小组,今天对portal进行学习.首先上网看了看一些portal的资料,对portal.portlet.portlet container以及JSR168等概念有个基本的了解.决定进一步实战的方式感受portal,于是学习JetSpeed.     1.  JetSpeed介绍JetSpeed是Apache组织开发的一个采用Java和XML的开放源代码的企业信息门户的实现.门户可以让终端

PHP输入输出流学习笔记

  这篇文章主要介绍了PHP输入输出流学习笔记,PHP输入和输出流是通过php://来访问的,它允许访问 PHP 的输入输出流.标准输入输出和错误描述符,内存中.磁盘备份的临时文件流以及可以操作其他读取写入文件资源的过滤器,需要的朋友可以参考下 PHP输入和输出流是通过php://来访问的,它允许访问 PHP 的输入输出流.标准输入输出和错误描述符, 内存中.磁盘备份的临时文件流以及可以操作其他读取写入文件资源的过滤器. php://stdin, php://stdout 和 php://std

PHP学习笔记 （1） 环境配置与代码调试

一配置PHP环境 1.了解什么是PHP PHP("PHP: Hypertext Preprocessor",超文本预处理器的字母缩写) PHP,是英文超级文本预处理语言Hypertext Preprocessor的缩写.PHP 是一种 HTML 内嵌式的语言,是一种在服务器端执行的嵌入HTML文档的脚本语言,语言的风格有类似于C语言,被广泛的运用 2.PHP的背景和优势 PHP的发展背景 1).1994年由Rasmus Lerdorf创建,开始是一个简单的Perl语言编写的程序,用统计

Node.js 学习笔记之简介、安装及配置

 本文是Node.js学习笔记系列文章的第一篇,主要给大家讲解的是在Windows和Linux上安装Node.js的方法.软件安装版本以0.12.0为例.希望大家能够喜欢.     简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台. Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好. 谁适合阅

node.js学习笔记（9） 和谐模式

众所周知,ECMAScript 是一种开放的.国际上广为接受的脚本语言规范. 它本身并不是一种脚本语言.正如在 Web 应用程序中执行有用操作的 bean 集合(例如,Netscape 的 AWT)是 Sun 的 JavaBean 规范的一种实现一样,JavaScript 是 ECMAScript 规范的一种实现. 2015年6月17日,ECMA国际发布了EcmaScript2015,即EcmaScript6(以下简称ES6)草案的正式版.ES6是继ES5之后的一次主要改进,语言规范由ES5.1