杨龙飞

杨龙飞

杨龙飞

杨龙飞

杨龙飞

杨龙飞

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}

@keyframes myfirst
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}

@-moz-keyframes myfirst /* Firefox */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}

@-o-keyframes myfirst /* Opera */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
</style>
</head>
<body>

<div></div>

<p><b>注释：</b>当动画完成时，会变回初始的样式。</p>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>
</html>

无限循环动画

.content .light{position:absolute;right:0px;background:white;-webkit-animation: twinkling1 1s infinite ease-in-out;animation: twinkling1 1s infinite ease-in-out;box-sizing:border-box;border:3px solid white;}
@keyframes twinkling1 {
    100% {width:20px;height:20px;border-radius:50%;background:yellow;visibility: hidden;border-color:rgb(255,65,34);}
    66% {width:20px;height:20px;border-radius:50%;background:rgb(255,65,34);border-color:white;}
    33% {width:20px;height:20px;border-radius:50%;background: yellow;border-color:rgb(255,65,34);}
    0% {width:20px;height:20px;border-radius:50%;background: yellow;visibility: visible;border-color:rgb(255,65,34);}
}
@-moz-keyframes twinkling1 /* Firefox */
{
    100% {width:20px;height:20px;border-radius:50%;background:yellow;visibility: hidden;border-color:rgb(255,65,34);}
    66% {width:20px;height:20px;border-radius:50%;background:rgb(255,65,34);border-color:white;}
    33% {width:20px;height:20px;border-radius:50%;background: yellow;border-color:rgb(255,65,34);}
    0% {width:20px;height:20px;border-radius:50%;background: yellow;visibility: visible;border-color:rgb(255,65,34);}
}

@-webkit-keyframes twinkling1 /* Safari 和 Chrome */
{
    100% {width:20px;height:20px;border-radius:50%;background:yellow;visibility: hidden;border-color:rgb(255,65,34);}
    66% {width:20px;height:20px;border-radius:50%;background:rgb(255,65,34);border-color:white;}
    33% {width:20px;height:20px;border-radius:50%;background: yellow;border-color:rgb(255,65,34);}
    0% {width:20px;height:20px;border-radius:50%;background: yellow;visibility: visible;border-color:rgb(255,65,34);}
}

@-o-keyframes twinkling1 /* Opera */
{
    100% {width:20px;height:20px;border-radius:50%;background:yellow;visibility: hidden;border-color:rgb(255,65,34);}
    66% {width:20px;height:20px;border-radius:50%;background:rgb(255,65,34);border-color:white;}
    33% {width:20px;height:20px;border-radius:50%;background: yellow;border-color:rgb(255,65,34);}
    0% {width:20px;height:20px;border-radius:50%;background: yellow;visibility: visible;border-color:rgb(255,65,34);}
}

css3动画知识点的更多相关文章

  1. myslide 插件开发知识点总结和 css3 动画性能问题的研究

    myslide 插件开发知识点总结和 css3 动画性能问题的研究 这篇文章主要是总结最近开发过程中遇到的问题.有几个问题又是不容易发现原因的问题,但是最后的结果又是很简单的. 1.手机端的 slid ...

  2. 用CSS3动画，让页面动起来

    以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...

  3. CSS3主要知识点复习总结+HTML5新增标签

    文件夹: 1.CSS 属性编写顺序 2.CSS3属性(内核前缀) 3.position相对/绝对定位 4.overflow:scroll等的差别 5.display属性应用 6.盒模型计算方法和Bug ...

  4. 显示层封装及实现与优化（无动画+css3动画+js动画）

    showhide.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  5. css3动画第一式--简单翻滚

    在w3cschool上面查阅css3的动画语法手册时,发现“css3 动画”栏目首页放了一个翻滚的div动画案例,觉得挺好看的,于是就自己模仿着写了一下,感觉还行O(∩_∩)O哈哈~ 查看原地址 下面 ...

  6. CSS3动画制作

    CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...

  7. 学习CSS3动画（animation）

    CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...

  8. CSS3动画几个平时没注意的属性

    一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...

  9. 用CSS3动画特效实现弹窗效果

    提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...

随机推荐

  1. WPScan初体验

    近日在朋友圈看某位dalao在Ubuntu上安装WPScan花了一个小时,于是洒家随手在Kali Linux上输入了wpscan,发现Kali里面已经装好了.于是决定玩两把WPScan. WordPr ...

  2. 通过 Chrome 在 Windows 中调试运行在 iphone-safari 上的 页面

    本文重点讨论如何在 Windows 系统中通过chrome 浏览器调试运行在 iPhone Safari 浏览器中的网页.如果你有一台 iMac/MacBook,可忽略该文档.iMac 环境下,直接通 ...

  3. 【问题解决】使用自定义控件时，vs停止工作

    问题表现:向页面中添加自定义控件时,vs卡住了,随便点击一下,然后窗口未响应,然后用资源管理器看到内存使用在飙升,监视进程会发现就是vs的进程出现了异常 问题的解决:菜鸟D在网上搜了一下,发现一个奇葩 ...

  4. WP8.1开发中关于媒体（图片）文件的生成操作，属性如何设置（内容/嵌入资源等）；

    (转载)WindowsPhone问题笔记-- 正确选择build action 解决媒体资源无法读取问题 链接:http://www.cnblogs.com/qinxg/archive/2012/07 ...

  5. Spark SQL 用户自定义函数UDF、用户自定义聚合函数UDAF 教程（Java踩坑教学版）

    在Spark中,也支持Hive中的自定义函数.自定义函数大致可以分为三种: UDF(User-Defined-Function),即最基本的自定义函数,类似to_char,to_date等 UDAF( ...

  6. 项目中通过Sorlj获取索引库中的数据

    在开发项目中通过使用Solr所提供的Solrj(java客户端)获取索引库中的数据,这才是真正对项目起实质性作用的功能,提升平台的检索性能及检索结果的精确性 第一步,引入相关依赖的jar包 第二步,根 ...

  7. Excel与XML相互转换 - C# 简单实现方案

    Excel与XML相互转换 - C# 简单实现方案 在日常工作中,我需要将数据存储在Excel中进行数据分析和处理,然后再将数据转换为XML格式进行跨平台的数据交换.网上搜索Excel转换为XML的实 ...

  8. 【译】Nodejs最好的ORM - TypeORM

    TypeORM github: https://github.com/typeorm/typeorm 这篇译文是从TypeORM github上的使用说明上翻译过来的,已经提交PR并merge到库中了 ...

  9. linux-网络数据包抓取-tcpdump

    用法格式: tcpdump [-i 网卡]  [选项]  '表达式' 选项说明如下: -i:interface 监听的网卡. -nn:表示以ip和port的方式显示来源主机和目的主机,而不是用主机名和 ...

  10. MySQL学习分享-->查询-->查询的分类

    MySQL的查询可以分为交叉联接.内联接.外联接.自然联接.straight_join 下面对于查询的学习,会用到以下四张表: create table t_commodity_type( `id` ...