CSS3动画-animation-波浪曲线

仿青年帮网站应用

css3, curve

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3642
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
     background: rgb(0, 171, 217)
 }
 .quxian {
     height: 300px;
     width: 100%;
     position: absolute;
     opacity: 0.6;
 }
 .quxian1 {
     background: url(/uploads/user_upload/36477/quxian1.png) repeat-x 0px center;
     top: -50px;
     left: 0;
     animation: quxian1 20s linear infinite;
     -webkit-animation: quxian1 20s linear infinite;
 }
 .quxian2 {
     background: url(/uploads/user_upload/36477/quxian2.png) repeat-x 0px center;
     top: -50px;
     left: 0;
     opacity: 0.2;
     animation: quxian2 40s linear infinite;
     -webkit-animation: quxian2 40s linear infinite;
 }
 @-webkit-keyframes quxian1 {
     from {
         background-position: 0px center;
     }
     to {
         background-position: 1920px center;
     }
 }
 @keyframes quxian1 {
     from {
         background-position: 0px center;
     }
     to {
         background-position: 1920px center;
     }
 }
 @-webkit-keyframes quxian2 {
     from {
         background-position: 0px center;
     }
     to {
         background-position: -1920px center;
     }
 }
 @keyframes quxian2 {
     from {
         background-position: 0px center;
     }
     to {
         background-position: -1920px center;
     }
 }

HTML

仿青年帮网站应用

css3, curve

编辑器支持Emmet

快捷键

仿青年帮网站应用

css3, curve

分别使用SVG path和CSS3 motion-path实现的粒子漂浮动画

使用H5动画演示CSS3变换原点（transform-origin）工作原理

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：