CSS3组件化之圆波扩散
2016-05-10 10:20
721 查看
本篇文章主要介绍用CSS3实现的水波扩散涟漪,圆波扩散,光圈扩散,雷达波向外散发动画。
预期效果应该是这样:
,其实应该比这个更优美,因为设计师提供的gif出现透明度丢失问题,所以建议用css3实现。
一、明确参数
1、半径
30,42,54
2、透明度
100%,50%,20%
3、颜色
#fb7070
二、实现方案
1、border-width + animation
太假了,整个动画一直固定在大圆圈内,内圆圈似乎在来回放大缩小,离期望值太远!
2、box-shadow + background-color +animation
中间实心圆貌似没怎么动啊,效果还凑合。
3、box-shadow + transform +animation
预期效果应该是这样:
,其实应该比这个更优美,因为设计师提供的gif出现透明度丢失问题,所以建议用css3实现。
一、明确参数
1、半径
30,42,54
2、透明度
100%,50%,20%
3、颜色
#fb7070
二、实现方案
1、border-width + animation
<div parent="box"> <a id="J_dot"></a> </div>
div[parent="box"] { position: relative; margin:50px auto; width:54px; height: 54px; } #J_dot{ float: left; width: 54px; height: 54px; box-sizing: border-box; border-style:double; border-color: #fb7070; border-radius: 100%; animation: circleAnimation 1s infinite alternate; } @keyframes circleAnimation { from { border-width:0; } to { border-width:27px; } } @-webkit-keyframes circleAnimation { from { border-width:0; } to { border-width:27px; } }
太假了,整个动画一直固定在大圆圈内,内圆圈似乎在来回放大缩小,离期望值太远!
2、box-shadow + background-color +animation
<div parent="box"> <div class="outer-circle"> <div class="inner-circle"></div> </div> </div>
div[parent="box"] { position:relative; margin:50px auto; width:54px; height:54px; } .outer-circle { animation: circleAnimationOut 1.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .inner-circle { animation: circleAnimationIn 1.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .outer-circle, .inner-circle { position: absolute; z-index: 10; width: 30px; height: 30px; background: transparent; border-radius: 100%; animation-iteration-count: infinite; } @keyframes circleAnimationOut { 0% { box-shadow: 0 0 0 0px rgba(251, 112, 112, 0.5); } 100% { box-shadow: 0 0 0 24px rgba(251, 112, 112, 0.2); } } @keyframes circleAnimationIn { 0% { box-shadow: 0 0 0 0px rgba(251, 112, 112, 0.5); background-color: rgba(251, 112, 112, 1); } 100% { box-shadow: 0 0 0 12px rgba(251, 112, 112, 0.5); background-color: rgba(251, 112, 112, 1); } }
中间实心圆貌似没怎么动啊,效果还凑合。
3、box-shadow + transform +animation
<div parent="box"> <div class="dot"></div> <div class="inner-circle"></div> <div class="outer-circle"></div> </div>
@keyframes circleAnimationIn { 0% { transform: scale(0.3); -webkit-transform: scale(0.3); opacity: 0.0; } 25% { transform: scale(0.3); -webkit-transform: scale(0.3); opacity: 0.1; } 50% { transform: scale(0.5); -webkit-transform: scale(0.5); opacity: 0.3; } 75% { transform: scale(0.8); -webkit-transform: scale(0.8); opacity: 0.5; } 100% { transform: scale(1); -webkit-transform: scale(1); opacity: 0.0; } } @keyframes circleAnimationOut { 0% { transform: scale(0.3); -webkit-transform: scale(0.3); opacity: 0.0; } 25% { transform: scale(0.3); -webkit-transform: scale(0.3); opacity: 0.1; } 50% { transform: scale(0.3); -webkit-transform: scale(0.3); opacity: 0.3; } 75% { transform: scale(0.5); -webkit-transform: scale(0.5); opacity: 0.5; } 100% { transform: scale(0.8); -webkit-transform: scale(0.8); opacity: 0.0; } } div[parent="box"] { position: relative; margin: 50px auto; width: 54px; height: 54px; } /* 保持大小不变的小圆点 */ .dot { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin-left: -9px; margin-top: -9px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background-color: #fb7070; /* 实心圆 ,如果没有这个就是一个小圆圈 */ z-index: 2; } /* 产生动画(向外扩散变大)的圆圈 第一个圆 */ .inner-circle { position: absolute; z-index: 1; width: 54px; height: 54px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 1px solid #fb7070; -webkit-animation: circleAnimationIn 2s ease-out; -moz-animation: circleAnimationIn 2s ease-out; animation: circleAnimationIn 2s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; box-shadow: 1px 1px 30px #fb7070; } /* 产生动画(向外扩散变大)的圆圈 第二个圆 */ .outer-circle { position: absolute; z-index: 1; width: 54px; height: 54px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 1px solid #fb7070; -webkit-animation: circleAnimationOut 2s ease-out; -moz-animation: circleAnimationOut 2s ease-out; animation: circleAnimationOut 2s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; box-shadow: 1px 1px 30px #fb7070; }
相关文章推荐
- css样式优先级详解
- 用CSS实现文本框尖角
- css在未知高度的情况下实现垂直居中
- CSS基本语法和选择器
- 什么是CSS?&CSS的三种使用方式
- 为html.EditorFor添加样式
- 用css控制一个DIV画图标。
- 认识SCI、EI、ISTP、SSCI、INSPEC、SCIE、IEEE、CSCD、CSSCI
- html自学笔记(css3字体以及动画)
- css制作三角形
- Css基本样式————背景
- h5与css3权威指南初级(一)
- 让低版本IE浏览器支持CSS3属性
- CSS选择器
- CSS 中的内联元素、块级元素以及display的各个属性的特点
- HTML基础知识四( 内嵌入式框架、 滑动字幕、多媒体元素、CSS)
- css中的居中问题
- CSS入门
- 【HTML &CSS】实现在一个网页内实现浏览图片
- CSS样式之优先级