js结合css3,使用JS和CSS3实现的旗帜飘扬动画

CSS

语言:

CSSSCSS

确定

body {

padding: 0px;

margin: 0px;

background-color: black;

text-align: center;

position: absolute;

top: 0px;

bottom: 0px;

left: 0px;

right: 0px;

overflow: hidden;

}

#canvas {

position: relative;

padding: 0px;

height: 320px;

width: 480px;

margin: 100px auto;

}

.flg {

position: relative;

height: 100%;

width: 6px;

margin: 0px -1px;

display: inline-block;

z-index: 1;

background-position: center 100px;

background-repeat: no-repeat;

background-attachment: fixed;

transform-style: preserve-3d;

animation: wave 1s ease-in-out infinite;

transform-origin: center center;

}

@keyframes wave {

0% {

height: 100%;

background-position-y: 100px;

transform: rotateZ(0deg) rotateX(0deg);

}

50% {

height: 98%;

background-position-y: 90px;

transform: rotateZ(5deg) rotateX(10deg);

}

100% {

height: 100%;

background-position-y: 100px;

transform: rotateZ(0deg) rotateX(0deg);

}

}

img {

display: none;

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/344820.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【渝粤题库】陕西师范大学200991教育统计学作业(高起本)

《教育统计学》作业(教育学) 一、名词解释 分层抽样描述统计集中量统计表总体和样本二列相关参数小概率事件中位数统计量和参数回归分析相关关系 二、填空题 1.从变化方向上看,两个变量之间的相关类型有正相关、 、 。 2.教育统计资料的来源…

【渝粤题库】陕西师范大学202007 高等数学(二) 作业

《高等数学(二)》作业 一、判断题 1、两向量夹角的范围为[0,π]。 ( ) 2、 向量a∥b当且仅当ab0。 ( ) 3、若在点处的偏导数存在,则在点处的方向导数存在。 ( ) 4、加上、…

功能Java示例 第6部分–用作参数

这是称为“ Functional Java by Example”的系列文章的第6部分。 我在本系列的每个部分中发展的示例是某种“提要处理程序”,用于处理文档。 在前面的部分,我们试图通过移动尽可能多的副作用,如IO,该系统的外部,以使我…

【渝粤题库】陕西师范大学202801 中国古代文学(五) 作业

一、选择题 1、元代出现了一大批杂剧的优秀作家,《析律志》说:“生而倜傥,博学能文,滑稽多智,蕴藉风流,为一时之冠”的作家是( ): A.王实甫 B.关汉卿 C.马致远 D.高明…

【渝粤题库】陕西师范大学210010 幼儿园管理学 作业(高起专、专升本)

《幼儿园管理学》考评作业 一、填空题 (1)我国学前教育各级机构权限的划分制度是 、 、 。 (2)管理内容的五大要素是 、 、 、 、 。 (3)幼儿园总务工作的特点是 、 、 、 。 (4)园长…

【渝粤题库】陕西师范大学292281中央银行学Ⅰ作业(高起专)

一、单选题 中央银行之所以成为中央银行,最基本、最重要的标志( )。 A. 集中存款准备金 B. 集中与垄断货币发行 C. 充当“最后贷款人” D. 代理国库( )是当今世界上最富于全球代表性和影响力的政府间国际金融组织&…

【渝粤题库】陕西师范大学500004 电动力学

《电动力学》作业 一. 单项选择题 半径为R的均匀磁化介质球,磁化强度为,则介质球的总磁矩为 A. B. C. D. 0 真空中做匀速直线运动的电荷不能产生 A. 电场 B. 磁场 C. 电磁辐射 D. 位移电流 线性介质中磁场的能量密度为 A. B. C. D. 磁场的矢量势是依据…

【渝粤题库】陕西师范大学800001 自然地理学

《自然地理学》作业 一.填空题 1.分隔地幔和地核的不连续界面是 。   2.摩氏硬度是7的矿物是 ,该矿物具有的光泽是 。   3.按照地震的成因不同,地震可分为 、 和 三种…

系统属性的JDK 12 Javadoc标记

JDK 12 Early Access Build 20 ( 2018/11/15 )可用,可以用来试用新的Javadoc标签{systemProperty} 。 新的{systemProperty} Javadoc标记在core-libs-dev邮件列表消息“ FYI:用于文档系统属性的新javadoc标记 ”中进行了讨论&…

国家开放大学2021春1079高等代数专题研究题目

教育 教育 试卷代号:1079 2021年春季学期期末统一考试 高等代数专题研究 试题 2021年7月 一、单项选择题(本题共20分,每小题4分) 1.下列运算中,( )是有理数域Q上的代数运算. A.a。ba B.a。bb …

【渝粤教育】广东开放大学 Android移动开发项目实践 形成性考核 (58)

题库查询系统退出 选择题 题目:下列选项中,属于Android Studio工具中创建项目时选择的按钮的是()。 答案: A、Start a new Android Studio project 题目:下列选项中,属于Log类中显示黑色的日志内…

qt服务器获取formdata文件,QT上传(PUT)文件

我正在使用QT将文件上传到Web服务器。QT上传(PUT)文件curl -X POST -H Content-Type:multipart/form-data-H Authorization: Token -F [email protected]_to_upload.txthttps://some.web.site/api/v2/files/contents/我使用大致是这样的QT调用尝试来完成相同的:QHtt…

vue cli3 绑定域名_使用CLI设置WildFly绑定地址并关闭

vue cli3 绑定域名仅使用命令行参数将WildFly绑定到主机名/ IP上非常容易。 我有一个简单的GNU / Linux盒子,可以用它玩各种东西,其中之一就是WildFly。 我使用以下命令开始在特定IP上监听WildFly: $> cd /opt/wildfly/wildfly-8.0.0.Be…

ajax post提交特殊字符,如何利用jQuery post传递含特殊字符的数据

在jQuery中,我们通常利用$.ajax或$.post进行数据传递处理,但这里通常不能传递特殊字符,如:“1、准备页面和控制端代码页面代码如下:$(function() {$("#btnSet").click(function() {var a $("#txtValue…

功能Java示例 第5部分–将I / O移到外部

这是称为“ Functional Java by Example”的系列文章的第5部分。 在上一部分中,我们停止了对文档的变异,并返回了数据的副本。 现在,我们需要移走一些I / O。 如果您是第一次来,最好是从头开始阅读。 它有助于了解我们从何处开始…

实现打包后修改服务器接口地址,vue打包之后生成一个配置文件修改接口

我们的vue代码打包上传到服务器之后,生成一个配置文件,里面可以配置域名或其它什么字段之类的,这样以后换了域名,只修改这个配置文件即可。第一步:安装generate-asset-webpack-plugin插件npm install --save-dev gener…

【渝粤教育】广东开放大学 javaweb 动态网站开发技术 形成性考核 (53)

选择题 题目:关于MVC模式说法正确的是_____ 题目:在MVC模式中,核心内容为_____ 题目:下面关于MVC的说法不正确的是_____ 题目:MVC设计模式将应用程序分为_____部分 题目:MVC中的M是指(&#xff…

我的世界无人维护的服务器,我的世界:如何进入9年无人管理的2B2T?全球最大战争服务器!...

原标题:我的世界:如何进入9年无人管理的2B2T?全球最大战争服务器!2b2t因混乱和9年无人管理而闻名于世,目前是全球最大的《我的世界》战争服务器,同时又是第二大Minecraft古老的服务器。​最近很多小伙伴都在…

【渝粤教育】广东开放大学 Python基础与应用 形成性考核 (21)

选择题 题目:Python语言语句块的标记是( ) 题目:Python程序的文件扩展名是( ) 题目:下列运算符中优先级最高的是( ) 题目:Python不支持的数据类型…

带有AWS DynamoDB的反应式Spring Webflux

AWS已经发布了Java版本2的AWS开发工具包 ,该开发工具包现在支持针对不同AWS服务的API调用的非阻塞IO。 在本文中,我将探讨如何使用AWS开发工具包2.x的DynamoDB API以及如何使用Spring Webflux堆栈公开响应式端点-这种方式,应用程序是端对端响…