html svg波浪,CSS3+SVG 实现波浪滚动效果
CSS3+SVG 实现波浪滚动效果
实现代码如下focus__a和focus__b是绝对定位,focus__b在focus__a之上
以下是HTML代码
以下是样式和CSS3动画代码
.focus__a {
background: url(images/focus_a.svg) repeat-x;
background-size: 450px;
-webkit-animation: ainuo_bgdwtop 3.5s infinite linear;
animation: ainuo_bgdwtop 3.5s infinite linear;
}
.focus__b {
background: url(images/focus_b.svg) repeat-x;
top: 5px;
background-size: 450px;
-webkit-animation: ainuo_bgdwbm 6s infinite linear;
animation: ainuo_bgdwbm 6s infinite linear;
}
@keyframes ainuo_bgdwbm{0%{background-position:0 top}100%{background-position:450px top}}
以下是focus_a.svg图的代码,直接文本形式保存成svg格式
以下是focus_b.svg图的代码,直接文本形式保存成svg格式
新增加另外一种办法
实现原理见代码
.waves {
/*position:relative;*/
position: absolute;
bottom: 0;
width: 100%;
height:15vh;
margin-bottom:-7px; /*Fix for safari gap*/
min-height:100px;
max-height:150px;
z-index: 5;
}
/* Animation */
.parallax > use {
animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}
.parallax > use:nth-child(1) {
animation-delay: -2s;
animation-duration: 7s;
}
.parallax > use:nth-child(2) {
animation-delay: -3s;
animation-duration: 10s;
}
.parallax > use:nth-child(3) {
animation-delay: -4s;
animation-duration: 13s;
}
.parallax > use:nth-child(4) {
animation-delay: -5s;
animation-duration: 20s;
}
@keyframes move-forever {
0% {
transform: translate3d(-90px,0,0);
}
100% {
transform: translate3d(85px,0,0);
}
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
.waves {
height:40px;
min-height:40px;
}
}
html svg波浪,CSS3+SVG 实现波浪滚动效果相关推荐
- html中怎样制作图片滚动,CSS3 制作的图片滚动效果
实现效果 实现代码 html CSS3 @keyframes slidy { 0% { left: 0%; } 20% { left: 0%; } 25% { left: -100%; } 45% { ...
- html div实现滚动效果,用纯CSS3实现的垂直视差滚动效果
HTML 导入代码模板: CSS3 Parallax Cover Section This is a cool vertical parallax scrolling effect that can ...
- CSS3 SVG波浪线条动画js特效
下载地址 CSS3 SVG波浪线条动画特效是一款简单的线条波浪滚动,线条弯曲动画特效. dd:
- 纯css3 svg 波浪底纹
搞一个 css3 svg波浪底纹 svg外层的div(即容器壳不能丢掉position:relative;) 底纹的高度可根据自己需要修改.waves中的height <!DOCTYPE htm ...
- html表格边框设置波浪线,SVG CSS3 按钮悬停边线环绕+波浪线+选择框动效
CSS 语言: CSSSCSS 确定 @import url(http://fonts.googleapis.com/css?family=Open+Sans); *, *::before, *::a ...
- html5 graphics with svg css3,HTML5 GRAPHICS WITH SVG AND CSS3
摘要: Want to create exciting HTML5 graphics without spending eternity in JavaScript? You can! This pr ...
- 12种超酷HTML5 SVG和CSS3浮动标签效果
这是一组效果很炫酷的SVG和CSS3表单浮动标签特效.这组浮动标签特效共12种效果,这些浮动标签效果部分在元素的伪元素上使用CSS transitions和CSS animations完毕,一部分则使 ...
- svg配合css3动画_带有Adobe Illustrator,HTML和CSS的任何网站的SVG动画
svg配合css3动画 A top trend in web design for 2020 is the increased use of SVG animations on web pages a ...
- SVG 和 CSS3 实现一个超酷爱心 Like 按钮
Python微信订餐小程序课程视频 https://blog.csdn.net/m0_56069948/article/details/122285951 Python实战量化交易理财系统 https ...
最新文章
- 组播路由协议基础——组播分发树
- metasploit终端命令大全 MSF
- Go语言教程,电子书,PDF格式
- Android设备 D获取,如何获取Android设备名称(常用ADB命令介绍)
- 中文宾州树库标记含义
- wttr.in -- a magical website
- MySql、Oracle、MSSQL中的字符串的拼接
- 【AD18】生成Gerber
- Vysor 1.7.6 chrome 插件破解
- unity3D游戏开发之iTween介绍和用法
- USBCAN卡解决新能源汽车CAN总线测试问题
- gentoo 下Local time zone must be set--see zic manual page解决办法
- 用python制作电子时钟包装_使用电子水墨屏和树莓派制作的时钟,Epaper_clock
- Java集合的subList方法分析
- linux mmc驱动框架,Linux mmc framework2:基本组件之mmc
- MATLAB摄像头实时图像处理
- GlassFish4安装部署
- 计算机病毒主要造成内存损坏,内存故障导致电脑频繁死机 内存损坏后的几种直接表现...
- 微型计算机的台式兼容是,微型计算机的台式兼容机是自己根据需要选择各个部件,配置出自己的计算机...
- 上网本终于可以休息了,我的脱机下载利器 数帅D600
热门文章
- linux net子系统-系统调用层
- android sdk离线安装方法,Android 4.0 SDK的离线方式安装
- 排期计划需要写哪些字段
- 树莓派开机启动python文件_树莓派开机自启动Py文件
- 物理机安装linux系统失败,物理机(服务器)安装centos6.5 无法启动报Error loading operating--(示例代码)...
- Spark MLlib — Word2Vec
- flume系列之:监控JMX reporter
- 牛批,Ceph RBD 备份与恢复完全指南
- 如何把一张照片的像素提高_如何提升照片的像素?
- 锁屏状态下,看到歌手图片