纯css实现波浪动画,超级简单
2017-07-19 10:14
761 查看
前言:之前在博客上看到一位大神用css实现的水波动画,真是受益匪浅,原来本以为要会svg、canvas等技术,原来根本不需要,只需css简短的十几行代码就可以达到效果。关键是大神的这种思路,非常之得我们学习,不多说了,直接上代码。
HTML部分:
CSS部分:
原理:
原理十分简单,我们都知道,一个正方形,给它添加
好的,如果
50%,但是接近 50% ,我们会得到一个这样的图形:
注意边角,整个图形给人的感觉是有点圆,却不是很圆。
好的,那整这么个图形又有什么用?还能变出波浪来不成?
没错!就是这么神奇。:) 我们让上面这个图形滚动起来(rotate) ,看看效果:
可能很多人看到这里还没懂旋转起来的意图,仔细盯着一边看,是会有类似波浪的起伏效果的。
而我们的目的,就是要借助这个动态变换的起伏动画,模拟制造出类似波浪的效果。
图中的虚线框就是我们实际的视野范围。
怎么样,看到这里是不是一下就打开思路了。
最终代码:
最终效果图:
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%; } .wave:before, .wave: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; } .wave: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); } }
原理:
原理十分简单,我们都知道,一个正方形,给它添加
border-radius: 50%,将会得到一个圆形。
border-radius:用来设置边框圆角,当使用一个半径时确定一个圆形。
好的,如果
border-radius没到
50%,但是接近 50% ,我们会得到一个这样的图形:
注意边角,整个图形给人的感觉是有点圆,却不是很圆。
好的,那整这么个图形又有什么用?还能变出波浪来不成?
没错!就是这么神奇。:) 我们让上面这个图形滚动起来(rotate) ,看看效果:
可能很多人看到这里还没懂旋转起来的意图,仔细盯着一边看,是会有类似波浪的起伏效果的。
而我们的目的,就是要借助这个动态变换的起伏动画,模拟制造出类似波浪的效果。
图中的虚线框就是我们实际的视野范围。
怎么样,看到这里是不是一下就打开思路了。
最终代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wave { position: relative; width: 200px; height: 200px; background-color: rgb(118, 218, 255); border-radius: 50%; } .wave:before, .wave: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; } .wave: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); } }
</style>
</head>
<body>
<div class="container">
<div class="wave"></div>
</div>
</body>
</html>
最终效果图:
相关文章推荐
- 源码推荐(8.25):简单易用的Toast,实现水位波浪动画
- CSS+JavaScript实现简单的蜂窝动画(一)
- 关于css旋转动画效果的简单实现
- css实现博客简单动画-菜鸟初学
- 用react的ReactCSSTransitionGroup插件实现简单的弹幕动画
- div+css实现简单幻灯片动画
- 简单CSS技巧实现的Logo动画效果(很像导航栏上经常运用的效果,但有差别)
- 简单的CSS动画加JS实现转盘
- CSS实现三角效果的简单实例
- js中的函数封装,回调函数实现的简单动画效果
- iOS (高仿印物App)TableView给力动画的简单实现(二)
- jquery+css实现简单的窥镜效果
- 抽取类实现左右滑动Activity,及滑动简单动画
- HTML+CSS+JS实现缓冲动画
- JS实现的简单折叠展开动画效果示例
- CSS 实现加载动画之四-圆点旋转
- css实现加载动画
- 【html和css入门】实现简单的页首导航
- JS实现回到页面顶部动画效果的简单实例
- CSS@media媒体查询,实现简单的响应式布局