前端每日实战:24# 纯 CSS 写出的层叠海浪特效

2018-05-17 admin

效果预览

按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。

https://codepen.io/comehope/pen/JvmBdE

可交互视频教程

此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/p/pEgDAM/cp2edUD

源代码下载

每日前端实战系列的全部源代码请从 github 下载:

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom,容器中包含一行文本和3条做海浪特效的 <span>:

<div class="sea">
    <p class="title">the sea</p>
    <span class="wave"></span>
    <span class="wave"></span>
    <span class="wave"></span>
</div>

居中显示:

html, body {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(antiquewhite, navajowhite);
}

设置容器样式:

.sea {
    width: 300px;
    height: 300px;
    background-color: whitesmoke;
    background-image: linear-gradient(
        darkblue,
        rgba(255, 255, 255, 0) 80%,
        rgba(255, 255, 255, 0.5));
    border-radius: 5px;
    box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
}

设置文字样式:

.sea {
    position: relative;
}

.sea .title {
    color: white;
    font-size: 24px;
    font-family: serif;
    text-align: center;
    line-height: 250px;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    position: absolute;
    z-index: 1;
    width: 100%;
}

制作海浪动画效果:

.sea .wave {
    position: absolute;
    top: -250px;
    left: -100px;
    width: 500px;
    height: 500px;
    background: deepskyblue;
    border-radius: 43%;
    filter: opacity(0.4);
    animation: drift linear infinite;
}

.sea .wave:nth-of-type(1) {
    animation-duration: 5s;
}

.sea .wave:nth-of-type(2) {
    animation-duration: 7s;
}

.sea .wave:nth-of-type(3) {
    animation-duration: 9s;
}

@keyframes drift {
    from {
        transform: rotate(360deg);
    }
}

加大海浪的波动幅度,增加颜色差异:

.sea .wave {
    transform-origin: 50% 48%;
}

.sea .wave:nth-of-type(3) {
    background-color: orangered;
    filter: opacity(0.1);
}

最后,隐藏容器外的内容:

.sea {
    overflow: hidden;
}

大功告成!

原文链接:https://segmentfault.com/a/1190000014895634

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-32394.html

文章标题:前端每日实战:24# 纯 CSS 写出的层叠海浪特效

相关文章
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
破解前端面试(80% 应聘者不及格系列):从 闭包说起
不起眼的开始 招聘前端工程师,尤其是中高级前端工程师,扎实的 JS 基础绝对是必要条件,基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察候选人 JS 基础的时候,我经常会提供下面这段代码,然后让候选人分析它实际运行的结...
2017-06-02
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
前端交流QQ群
我们建立了一个前端交流QQ群供大家交流,有什么问题都可以在群里提问,欢迎你的加入,也希望我们大家能够在群里互帮互助,同时也能学到东西。 我们相信,前端有你更精彩! 为了让更多的小伙伴加入我们,欢迎大家转发扩散! 长按以上二维码加入我们 ...
2016-04-01
AJAX的浏览器支持
AJAX 的要点是 XMLHttpRequest 对象。 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。 IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 Jav...
2015-11-12
Riot.js:不足1KB的MVP客户端框架
Riot.js是一款MVP(模型-视图-呈现)开源客户端框架,其最大的特点就是体积非常小,不足1KB,虽然体积小,但它可以帮助用户构建大规模的Web应用程序。 Riot.js是由Moot公司开发,目前最新版本为v0.9.2,遵循MIT开源许...
2016-03-11
typeof、instanceof和contructor的区别
typeof:以字符串的形式返回变量的原始类型,typeof在两种情况下会返回&quot;undefined&quot;:一个变量没有被声明的时候,和一个变量的值是undefined的时候,注意,typeof null也会返回object,...
2015-11-12
回到顶部