正文 

当前位置： 首页 > java > java框架

css3波纹特效h5实现动态波浪

web前端项目案例实战      2022-02-10     482

关键词：

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

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

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)
    }
}

 

h5棋牌房间如何安装现在分享一套搭建教程

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

css实现波浪纹，水波纹动画

1.示意图 2.结构 3.wave.html代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>CSS实战-波浪</title><styletype="text/css">.wave-box{border:1pxsol 查看详情

css3波浪特效

/*Water*/@keyframeswave-animation-1{0%{background-position:0top}100%{background-position:600pxtop}}@keyframeswave-animation-2{0%{background-position:0top}100%{background-position:600pxtop}}.water{posi 查看详情

css3实现的线条波浪动画效果(代码片段)

...CSS3animation动画和png图片制作的css3线条波浪动画效果。该特效中，使用了3张波浪线条的png图片，以及少量的CSS代码，制作出逼真的线条波浪动画效果。HTML结构该css3线条波浪动画效果的HTML结构如下：<divclass=&#... 查看详情

css3实现的线条波浪动画效果(代码片段)

...CSS3animation动画和png图片制作的css3线条波浪动画效果。该特效中，使用了3张波浪线条的png图片，以及少量的CSS代码，制作出逼真的线条波浪动画效果。HTML结构该css3线条波浪动画效果的HTML结构如下：<divclass=&#... 查看详情

css3+jquery实现按钮水波纹效果

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"><title>水波纹按钮< 查看详情

css3动画的实例讲解—用css3实现摩天轮特效

通过CSS中的animation属性来实现摩天轮旋转的动态效果。在开始之前，先说下animation属性，原理是逐帧动画，通过关键帧控制动画的每一步，来实现最终的动态效果。而常用到的几个属性分别是：1.animation-name，设置元素动画的名... 查看详情

h5css3特效

3.css3的特效1.2D转换属性是transform属性值translate()rotate()scale()skew()Translate平移语法translate(x,y)只有一个值代表水平平移2个值代表水平和垂直方向上平移的距离X和y可以为负值负值代表正数的相反方向兼容性的写法 Rotate旋转语法t... 查看详情

css3实现悬停波浪效果

<ahref=""class="a1">商家入口</a>.a1{ 　　background-color:orange; 　　display:inline-block; 　　width:100px; 　　height:35px; 　　text-align:center; 　　text-decoration:none; 　　//设置好元素的定位和边界 　　overflow:hi 查看详情

h5+css3+jquery实现webapp界面及简单功能

...sp;           主要实现了：1.模拟后台的json数据，动态生成li标签2.导航栏的下划线3.给li标签右边设置图片4.动态生成的li标签，设置选中的li的点击事件，将右边的图片 查看详情

超酷的计步器app——炫酷功能实现，自定义水波纹特效自定义炫酷开始按钮属性动画的综合体验

超酷的计步器APP——炫酷功能实现，自定义水波纹特效、自定义炫酷开始按钮、属性动画的综合体验好久没写博客了，没给大家分享技术了，真是有些惭愧。这段时间我在找工作，今年Android的行情也不怎么好，再加上我又是一... 查看详情

css3+h5学习（animation做动态渐变字）

 语法animation:namedurationtiming-functiondelayiteration-countdirectionfill-modeplay-state;name->动画名，自定义(不可缺参数)duration->动画完成时间，以秒记(不可缺参数)timing-function->动画进行的速度，liner（默认）/ease/ease-in/ea 查看详情

css3实现烟花特效--web前端

简单的烟花特效，比较简单，直接贴代码了……<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>css3实现烟花特效</title><style>*{margin:0;padding:0;}html{width:10 查看详情

h5特效

地址：http://www.cnblogs.com/sun927/p/5842852.html 几个别人总结的css3炫酷效果，有需要直接拿来用即可，包括以下几个效果：1。悬浮时放大2.悬浮时转一圈3.自动不停转圈4.颜色自动越来越浅.four{animation:mymovelinear5sinfinite;-webkit-animation... 查看详情

css3动画：波浪效果

实现效果如图所示：首先得准备三张图，一张是浅黄色的背景图loading_bg.png，一张是深红色的图loading.png，最后一张为bolang.png。css代码body{background:#ffe894;}.loading_bg{width:113px;height:111px;background:url(loading_bg.png)no-repeatlefttop;margin: 查看详情

css3实现loading动画特效

查看效果：http://hovertree.com/texiao/css3/43/代码如下：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>css3loading等待加载代码-何问起</title><style>@keyframesmove{from{tr 查看详情

css3:实现一个循序渐进的下划线和一个material波纹按钮(代码片段)

前言两个效果，一个是从无到有循序渐进的下划线效果；一个是谷歌扁平化按钮点击填充效果–简单粗暴易上手效果图实现原理下划线的很简单：就是before结合:hover，配合transition过渡来实现从无到有的渐进过程&#x... 查看详情

一个2d的水波纹的特效脚本

...加控制的，贴出以脚本。不过Texture的话，是一些列的水波纹的那种，我是实在找不到了=_=.usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;///利用摄像机到Canvas的距离放置PanelpublicclassEF_water 查看详情