56net亚洲必赢-www.56.net-必赢56net登录网址

热门关键词: 56net亚洲必赢,www.56.net,必赢56net登录网址,必赢56net

CSS 方式实现的波浪效果

2019-11-30 20:38 来源:未知

纯CSS完结翻页效果,原理比较轻巧,书签协作隐蔽,代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="" xml:lang="zh" lang="zh">
<head profile="#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />

直白以来,使用纯 CSS 达成波浪效果都以十三分困难的。

<style>

因为完毕波浪的曲线须求依据贝塞尔曲线。

dl {
 position:absolute;
 width:240px;
 height:170px;
 border:10px solid #eee;
 }
dd {
 margin:0;
 width:240px;
 height:170px;
 overflow:hidden;
 }
img {
 border:1px solid black
 }
dt {
 position:absolute;
 right:3px;
 top:50px;
 }
a {
 display:block;
 margin:1px;
 width:20px;
 height:20px;
 text-align:center;
 font:700 12px/20px "宋体",sans-serif;
 color:#fff;
 text-decoration:none;
 background:#666;
 border:1px solid #fff;
 filter:alpha(opacity=40);
 opacity:.4;
 }
a:hover {
 background:#000
 }
</style>
</head>
<body>
<dl>
<dt><a href="#a" title="">1</a><a href="#b" title="">2</a><a href="#c" title="">3</a></dt>
<dd>
<img src="" alt="" title="" id="a" />
<img src="" alt="" title="" id="b" />
<img src="" alt="" title="" id="c" />
</dd>
</dl>
</body>
</html>

图片 1

同黄金年代,推而广之,能够做出其余的翻页的成效。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="" xml:lang="zh" lang="zh">
<head profile="#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />

而接收纯 CSS 的章程,完成贝塞尔曲线,额,一时是尚未很好的措施。

<style>

图片 2

dl {
 position:absolute;
 width:240px;
 height:170px;
 border:10px solid #eee;
 }
dd {
 margin:0;
 width:240px;
 height:170px;
 overflow:hidden;
 }
dt {
 position:absolute;
 right:1px;
 }

当然,依赖任何力量(SVG、CANVAS),是足以比较轻巧的实现所谓的波浪效果的,先看看,非 CSS 格局得以完成的浪花效果。

ul {
 margin:0;
 padding:0;
 width:260px;
 height:170px;
 list-style:none;
 background:url("") no-repeat 75% 20px;
 border:1px solid #ccc
 }
#b {
 background-position:75% center
 }
#c {
 background-position:75% 86%
 }
li {
 width:205px;
 height:27px;
 font:12px/27px "宋体",sans-serif;
 white-space:nowrap;
 overflow:hidden;
 }
dt a {
 display:block;
 margin:1px;
 width:30px;
 height:56px;
 text-align:center;
 font:700 12px/55px "宋体",sans-serif;
 color:#fff;
 text-decoration:none;
 background:#666;
 }
dt a:hover {
 background:orange
 }
</style>
<head/>
<body>
<dl>
<dt><a href="#a" title="">新闻</a><a href="#b" title="">娱乐</a><a href="#c" title="">体育</a></dt>
<dd>

 

 

动用 SVG 完结波浪效果

依据于 SVG ,是非常轻易画出一回贝塞尔曲线的。

会见效果:

图片 3

代码如下:

<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <text class="liquidFillGaugeText" text-anchor="middle" font-size="42px" transform="translate(100,120)" style="fill: #000">50.0%</text>
    <!-- Wave -->
    <g id="wave">
        <path id="wave-2" fill="rgba(154, 205, 50, .8)" d="M 0 100 C 133.633 85.12 51.54 116.327 200 100 A 95 95 0 0 1 0 100 Z">
        <animate dur="5s" repeatCount="indefinite" attributeName="d" attributeType="XML" values="M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z;
                                    M0 100 C145 100, 41 100, 200 100 A95 95 0 0 1 0 100 Z;
                                    M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z"></animate>
        </path>
    </g>
    <circle cx="100" cy="100" r="80" stroke-width="10" stroke="white" fill="transparent"></circle>
    <circle cx="100" cy="100" r="90" stroke-width="20" stroke="yellowgreen" fill="none" class="percentage-pie-svg"></circle>
</svg>

画出三遍贝塞尔曲线的基本在于 <path id="wave-2" fill="rgba(154, 205, 50, .8)" d="M 0 100 C 133.633 85.12 51.54 116.327 200 100 A 95 95 0 0 1 0 100 Z"> 那生机勃勃段。感兴趣的能够自动去切磋切磋。

 

<ul id="a">
 <li>·<a href="" title="">国际新闻国际消息国际信息</a></li>
 <li>·<a href="" title="">国际新闻国际信息国际新闻</a></li>
 <li>·<a href="" title="">国际音信国际新闻国际音讯</a></li>
 <li>·<a href="" title="">国际新闻国际新闻国际音信</a></li>
 <li>·<a href="" title="">国际新闻国际音信国际音信</a></li>
 <li>·<a href="" title="">国际音讯国际音讯国际新闻</a></li>
</ul>

接纳 canvas 达成波浪效果

动用 canvas 完成波浪效果的规律与 SVG 相近,都是运用路线绘制出三遍贝塞尔曲线并赋予动漫效果。

图片 4

接纳 canvas 的话,代码如下:

$(function() {
    let canvas = $("canvas");
    let ctx = canvas[0].getContext('2d');
    let radians = (Math.PI / 180) * 180;
    let startTime = Date.now();
    let time = 2000;
    let clockwise = 1;
    let cp1x, cp1y, cp2x, cp2y;

    // 初始状态
    // ctx.bezierCurveTo(90, 28, 92, 179, 200, 100);
    // 末尾状态
    // ctx.bezierCurveTo(145, 100, 41, 100, 200, 100);

    requestAnimationFrame(function waveDraw() {  
        let t = Math.min(1.0, (Date.now() - startTime) / time);

        if(clockwise) {
            cp1x = 90   (55 * t);
            cp1y = 28   (72 * t);
            cp2x = 92 - (51 * t);
            cp2y = 179 - (79 * t);
        } else {
            cp1x = 145 - (55 * t);
            cp1y = 100 - (72 * t);
            cp2x = 41   (51 * t);
            cp2y = 100   (79 * t);
        }

        ctx.clearRect(0, 0, 200, 200); 
        ctx.beginPath();
        ctx.moveTo(0, 100);
        // 绘制三次贝塞尔曲线
        ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, 200, 100);
        // 绘制圆弧
        ctx.arc(100, 100, 100, 0, radians, 0);
        ctx.fillStyle = "rgba(154, 205, 50, .8)";
        ctx.fill();
        ctx.save();  

        if( t == 1 ) {
            startTime = Date.now();
            clockwise = !clockwise;
        } 

        requestAnimationFrame(waveDraw);
    });
})

重在是采纳了动态绘制 ctx.bezierCurveTo() 贰回贝塞尔曲线实现波浪的移位效率,感兴趣的能够自行钻研。

 

<ul id="b">
 <li>·<a href="" title="">娱乐音信娱乐新闻娱乐音信</a></li>
 <li>·<a href="" title="">娱乐资源消息娱乐资源音信娱乐新闻</a></li>
 <li>·<a href="" title="">娱乐新闻娱乐音信娱乐音信</a></li>
 <li>·<a href="" title="">娱乐资源新闻娱乐资源音讯娱乐新闻</a></li>
 <li>·<a href="" title="">娱乐音讯娱乐新闻娱乐音讯</a></li>
 <li>·<a href="" title="">娱乐音讯娱乐音信娱乐音讯</a></li>
</ul>

纯 CSS 落成波浪效果

好,接下去才是本文的第大器晚成!使用纯 CSS 的法子,达成波浪的意义。

你 TM 在逗作者?刚刚不是还说接纳 CSS 无可奈何吗?图片 5

是,我们从不主意直接绘制出壹遍贝塞尔曲线,可是大家能够动用部分得益的方法,模拟达到波浪运动时的坚决守住,姑且把下边这种办法看作后生可畏种华而不实。

<ul id="c">
 <li>·<a href="" title="">体育音信体育信息体育音讯</a></li>
 <li>·<a href="" title="">体育音讯体育音讯体育音讯</a></li>
 <li>·<a href="" title="">体育音信体育音信体育音信</a></li>
 <li>·<a href="" title="">体育新闻体育音信体育音讯</a></li>
 <li>·<a href="" title="">体育新闻体育音讯体育音信</a></li>
 <li>·<a href="" title="">体育音讯体育消息体育音讯</a></li>
</ul>
</dd>
</dl>
</body>
</html>

原理

原理非常总结,大家都清楚,三个正方形,给它增多 border-radius: 50%,将会获得多少个圆形。

图片 6

style="font-size: 14px; font-family: verdana, geneva;">border-radius:用来安装边框圆角,当使用二个半径时规定叁个圆形。

好的,如果 border-radius 没到 二分之一,但是临近 八分之四 ,大家会获得二个如此的图片:

图片 7

留心边角,整个图形给人的认为是有一点点圆,却不是很圆。额,那不是废话吗 图片 8

好的,那整这么个图形又有怎样用?还是能变出波浪来不成?

对的!就是如此奇妙。:)大家让地点这一个图片滚动起来(rotate卡塔尔 ,看看效果:

图片 9

想必过多少人寻访这里尚未懂旋转起来的企图,稳重瞅着一面看,是会有临近波浪的沉降效果的。

而我辈的指标,正是要信赖这一个动态调换的升降动漫,模拟创制出像样波浪的效应。

实现

理当如此,这里看看是全景完成图,所以感到并不显明,OK,让我们用贰个个例子看看现实落到实处起来能达成什么样的效用。

我们采纳方面原理能够形成的生机勃勃种波浪运动背景效果图:

图片 10

背后漂浮的浪花效果,其实正是利用了上边的 border-radius: 45% 的圆柱形,只是放大了大多倍,视线之外的图片都 overflow: hidden ,只留下了一条边的视线,并且增添了有个别对应的 transform 变换。

style="font-size: 14px; font-family: verdana, geneva;">注意,这里背景是玉棕黄静止的,运动是原野绿的圆柱形。

代码也很粗大略,SCSS 代码如下:

body {
    position: relative;
    align-items: center;
    min-height: 100vh;
    background-color: rgb(118, 218, 255);
    overflow: hidden;

    &:before, &:after {
        content: "";
        position: absolute;
        left: 50%;
        min-width: 300vw;
        min-height: 300vw;
        background-color: #fff;
        animation-name: rotate;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    &:before {
        bottom: 15vh;
        border-radius: 45%;
        animation-duration: 10s;
    }

    &:after {
        bottom: 12vh;
        opacity: .5;
        border-radius: 47%;
        animation-duration: 10s;
    }
}

@keyframes rotate {
    0% {
        transform: translate(-50%, 0) rotateZ(0deg);
    }
    50% {
        transform: translate(-50%, -2%) rotateZ(180deg);
    }
    100% {
        transform: translate(-50%, 0%) rotateZ(360deg);
    }
}

style="font-size: 14px; font-family: verdana, geneva;">为了方便写 DEMO,用到的尺寸单位是 VW 与 VH,不太精通那多个单位的能够戳这里:vh、vw、vmin、vmax 知多少

只怕有部分同学,还留安抚题,OK,那大家把上边的功用降低10 倍,将视界之外的卡通片也补齐,那么实际上生成波浪的准绳是那样的:

图片 11

图中的虚线框即是大家其实的视线范围。

图片 12

值得商量的点

值得注意的是,要拜访,这里大家生成波浪,并不是应用旋转的扁圆形本人,而是使用它去切割背景,产生波浪的职能。那干什么不直接动用旋转的扁圆形本人模拟波浪效果呢?因为

  • 中等高,两侧低的功效不合乎物军事学原理,看上去拾贰分煮荳燃萁;

能够点走入看看下边那么些事例:

CodePen Demo -- pure css wave

 

使用纯 CSS 完毕波浪进程图

好,既然理解了这种办法,上面我们就选取纯 CSS 实现地方最最初运用 SVG 或许 CANVAS 本领落实的浪花进程图。

HTML 构造如下:

<div class="container">
    <div class="wave"></div>
</div>

CSS 代码如下:

.wave {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: rgb(118, 218, 255);
    border-radius: 50%;

    &::before,
    &::after{
        content: "";
        position: absolute;
        width: 400px;
        height: 400px;
        top: 0;
        left: 50%;
        background-color: rgba(255, 255, 255, .4);
        border-radius: 45%;
        transform: translate(-50%, -70%) rotate(0);
        animation: rotate 6s linear infinite;
        z-index: 10;
    }

    &::after {
        border-radius: 47%;
        background-color: rgba(255, 255, 255, .9);
        transform: translate(-50%, -70%) rotate(0);
        animation: rotate 10s linear -5s infinite;
        z-index: 20;
    }
}

@keyframes rotate {
    50% {
        transform: translate(-50%, -73%) rotate(180deg);
    } 100% {
        transform: translate(-50%, -70%) rotate(360deg);
    }
}

效果图:

图片 13

CodePen Demo -- Pure Css Wave Loading

即便功能差了一小点,可是相较于要利用学费越来越高的 SVG 只怕 CANVAS,这种纯 CSS 方法确实可选拔的情形越来越多,学习开销更低!

 

一些小本领

单独的让一个 border-radius 接近50 的长方形旋转,动漫效果只怕不是那么好,我们得以方便的增加部分别的转变因素,让动漫片效果看上去更忠实:

  • 在动漫进度中,动态的改造 border-radius 的值;
  • 在动漫进度中,利用 transform 对旋转椭圆进行轻微的位移、变形;
  • 上面也演示到了,多个椭圆同期转动,付与分裂一时候长的卡通,并且拉长轻微的反射率,让全部功用更佳逼真。

  

最后

层层 CSS 小说汇总在本身的 Github ,持续更新,接待点个 star 订阅收藏。

好了,本文到此甘休,希望对你有赞助 :卡塔尔(قطر‎

假如还会有何难点还是提议,能够多多交换,原创小说,文笔有限,胸无点墨,文中若有不正之处,万望告知。

版权声明:本文由56net亚洲必赢发布于体育新闻,转载请注明出处:CSS 方式实现的波浪效果