zoukankan html css js c++ java

css3动画知识点

<!DOCTYPE html>
<html>
<head>
<style>
div
{
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>

<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% {20px;height:20px;border-radius:50%;background:yellow;visibility: hidden;border-color:rgb(255,65,34);}
    66% {20px;height:20px;border-radius:50%;background:rgb(255,65,34);border-color:white;}
    33% {20px;height:20px;border-radius:50%;background: yellow;border-color:rgb(255,65,34);}
    0% {20px;height:20px;border-radius:50%;background: yellow;visibility: visible;border-color:rgb(255,65,34);}
}
@-moz-keyframes twinkling1 /* Firefox */
{
    100% {20px;height:20px;border-radius:50%;background:yellow;visibility: hidden;border-color:rgb(255,65,34);}
    66% {20px;height:20px;border-radius:50%;background:rgb(255,65,34);border-color:white;}
    33% {20px;height:20px;border-radius:50%;background: yellow;border-color:rgb(255,65,34);}
    0% {20px;height:20px;border-radius:50%;background: yellow;visibility: visible;border-color:rgb(255,65,34);}
}

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

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

学而不思则罔，思而不结则殆，结而不看，一事无成

查看全文

相关阅读:
为了实现一个函数 clone ，可以对 JavaScript 中 5 种主要的数据类型（包括 Number、 St「ing 、 Object、 A「「ay、 Boolean ）进行值（深）复制。
说说你对语义化的理解
 vue 根据字符串的长度控制显示的字数超出显示省略号
 加密号码将中间四位改为*
前端项目部署错误：npm ERR! notarget No matching version found for event-stream@3.3.6
npm报错：A complete log of this run can be fund in:........
nrm插件的安装插件和使用
 Vue过渡搭配Velocity.js动画的基本使用
 Asp.Net Core&钉钉开发系列
 KnockoutJS知识规整目录

原文地址：https://www.cnblogs.com/windseek/p/6410265.html

css3动画知识点

杨龙飞

杨龙飞

杨龙飞

杨龙飞

杨龙飞