css3实现波纹特效、H5实现动态波浪效果


Posted in HTML / CSS onJanuary 31, 2018

css3实现动态波纹特效,由于css3里面有过渡和动画效果,现在利用css3实现动态波浪效果就很简单了,直接使用transform来实现就ok, 使得translateX 产生偏移就可以不断实现循环动态效果,这样就比传统的flash来实现更为简单。而且对页面也比较友好的。

比如实现以下的背景波纹特效:

css3实现波纹特效、H5实现动态波浪效果

html5结构:

<div class="wrap__uc-hdinfo">
    <div class="inner flexbox">
        <div class="uimg">
            <span class="img"><img src="images/uimg/uimg-def.jpg" /></span>
        </div>
        <a class="info flex1" href="#">
            <label class="name">露娜</label>
            <label class="type mt-10">普通会员</label>
            <label class="tel ff-ar">18621535487</label>
        </a>
        <i class="arr iconfont icon-youjiantou c-fff fs-24"></i>
        <a class="lktel" href="tel:15888886666"><i class="iconfont icon-dianhua1"></i></a>
    </div>
    <!--css3实现波纹-->
    <div class="wrap__uc-waves">
        <i class="wave w1"></i>
        <i class="wave w2"></i>
    </div>
</div>

css3代码:

/*css3波纹*/
.wrap__uc-waves{overflow:hidden;height:1rem;width:100%;position:absolute;bottom:0;}
.wrap__uc-waves .wave{width:15rem; transform-origin:center bottom; position:absolute;left:0;bottom:0;}
.wrap__uc-waves .w1{background:url(../images/icon__uc-hd-waves01.png) no-repeat;background-size:cover; height:.5rem; animation:anim_wave 5s linear infinite;}
.wrap__uc-waves .w2{background:url(../images/icon__uc-hd-waves02.png) no-repeat;background-size:cover; height:.7rem; animation:anim_wave 6s linear infinite;}
@keyframes anim_wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1)
    }
    50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.55)
    }
    100% {
        transform: translateX(-50%) translateZ(0) scaleY(1)
    }
}

总结

以上所述是小编给大家介绍的css3实现波纹特效、H5实现动态波浪效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
CSS3中border-radius属性设定圆角的使用技巧
May 10 HTML / CSS
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 HTML / CSS
CSS3新属性transition-property transform box-shadow实例学习
Jun 06 HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
Sep 06 HTML / CSS
HTML5的文档结构和新增标签完全解析
Apr 21 HTML / CSS
HTML5 MiranaVideo播放器 (代码开源)
Jun 11 HTML / CSS
基于html5 DeviceOrientation 实现微信摇一摇功能
Sep 25 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
Dec 06 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
Nov 19 HTML / CSS
boostrap modal 闪现问题的解决方法
Sep 01 HTML / CSS
Html分层的box-shadow效果的示例代码
Mar 30 HTML / CSS
css3动画过渡实现鼠标跟随导航效果
Feb 08 #HTML / CSS
CSS3 calc()会计算属性详解
Feb 27 #HTML / CSS
CSS3 clip-path 用法介绍详解
Mar 01 #HTML / CSS
CSS3混合模式mix-blend-mode/background-blend-mode简介
Mar 15 #HTML / CSS
CSS3截取字符串实例代码【推荐】
Jun 07 #HTML / CSS
CSS3地图动态实例代码(圆圈向外扩散)
Jun 15 #HTML / CSS
css3中的calc函数浅析
Jul 10 #HTML / CSS
You might like
php显示指定目录下子目录的方法
2015/03/20 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
PHP echo()函数讲解
2019/02/15 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
Javascript学习笔记6 prototype的提出
2010/01/11 Javascript
js 编程笔记 无名函数
2011/06/28 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
Javascript Event(事件)的传播与冒泡
2017/01/23 Javascript
JS模拟实现哈希表及应用详解
2018/05/04 Javascript
Node.js进阶之核心模块https入门
2018/05/23 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
2018/08/29 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
Python fileinput模块使用实例
2015/05/28 Python
如何使用七牛Python SDK写一个同步脚本及使用教程
2015/08/23 Python
深入理解python中的闭包和装饰器
2016/06/12 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
Python常用字符串替换函数strip、replace及sub用法示例
2018/05/21 Python
python xlsxwriter创建excel图表的方法
2018/06/11 Python
Python使用pymysql从MySQL数据库中读出数据的方法
2018/07/25 Python
set在python里的含义和用法
2019/06/24 Python
Python内置数据类型list各方法的性能测试过程解析
2020/01/07 Python
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
2014/02/10 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
2020/04/20 HTML / CSS
劳动之星获奖感言
2014/02/01 职场文书
2014年银行柜员工作总结
2014/11/12 职场文书
谢师宴学生致辞
2015/07/27 职场文书
暑假打工感想
2015/08/07 职场文书
小学科学课教学反思
2016/02/23 职场文书
vue组件vue-esign实现电子签名
2022/04/21 Vue.js
Nginx 安装SSL证书完成HTTPS部署
2022/04/28 Servers