css小动画（大小变换 、水波纹、loading） |
您所在的位置：网站首页 › 773mb等于多少g流量 › css小动画（大小变换 、水波纹、loading） |
|
一、无限放大缩小 可以应用于跳动的气球等场景，效果如下: html部分 css部分 @keyframes scaleDraw { /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/ 0%{ transform: scale(1); /*开始为原始大小*/ } 25%{ transform: scale(1.1); /*放大1.1倍*/ } 50%{ transform: scale(1); } 75%{ transform: scale(1.1); } } .ballon{ width: 150px; height: 200px; background: url("images/balloon.png"); background-size: 150px 200px; -webkit-animation-name: scaleDraw; /*关键帧名称*/ -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/ -webkit-animation-iteration-count: infinite; /*动画播放的次数*/ -webkit-animation-duration: 5s; /*动画所花费的时间*/ /*-webkit-animation: scaleDraw 5s ease-in-out infinite;/* }或者是一起控制透明度和大小的变换，如图 html部分 css部分 .button{ margin: 100px; width: 30px; height:30px; background: orange; border-radius: 50px; animation: flipping 5s infinite; /*去除button默认边框*/ background-position-x: -7px; background-position-y: -7px; border: 1px; outline: none; } @keyframes flipping{ 0%{ opacity: .2; transform: scale(1); } 25%{ opacity: 1; box-shadow: 0 0 15px orange; transform: scale(1.4); } 50%{ opacity: .2; transform: scale(1); } 75%{ opacity: 1; box-shadow: 0 0 15px orange; transform: scale(1.4); } 100%{ opacity: .2; transform: scale(1); } }二、涟漪扩散 实质就是就是利用了动画的延迟属性，两层圆的动画相关的属性基本相同，除了最外层的圆多设置了animation-delay属性 html部分 css部分 .live{ position: relative; width: 100px; height: 100px; } .live img{ width: 100px; height: 100px; z-index: 0; } @keyframes living { 0%{ transform: scale(1); opacity: 0.5; } 50%{ transform: scale(1.5); opacity: 0; /*圆形放大的同时，透明度逐渐减小为0*/ } 100%{ transform: scale(1); opacity: 0.5; } } .live span{ position: absolute; width: 100px; height: 100px; left: 0; bottom: 0; background: #fff; border-radius: 50%; -webkit-animation: living 3s linear infinite; z-index: -1; } .live span:nth-child(2){ -webkit-animation-delay: 1.5s; /*第二个span动画延迟1.5秒*/ }
三、雷达 html部分css部分 .container { position: relative; } .dot { position: absolute; width: 10px; height: 10px; left: 160px; top: 160px; border-radius: 50%; border: 1px solid #33ccff; background-color: #33ccff; } .pulse { position: absolute; width: 88px; height: 88px; left: 120px; top: 120px; border: 2px solid #3399ff; border-radius: 50%; opacity: 0; } .p1 { animation: warn 2s ease-out infinite; } .p2 { animation: warn2 2s ease-out infinite; } /*.p1 { animation: warn 2s ease-out infinite; } .p2 { animation: warn 2s ease-out infinite; -webkit-animation-delay: 1.5s; }*/ @keyframes warn { 0% {transform: scale(0.3);opacity: 0.0;} 25% {transform: scale(0.3);opacity: 0.1;} 50% {transform: scale(0.5);opacity: 0.3;} 75% {transform: scale(0.8);opacity: 0.5;} 100% {transform: scale(1);opacity: 0.0;} } @keyframes warn2 { 0% {transform: scale(0.3);opacity: 0.0;} 25% {transform: scale(0.3);opacity: 0.1;} 50% {transform: scale(0.3);opacity: 0.3;} 75% {transform: scale(0.5);opacity: 0.5;} 100% {transform: scale(0.8);opacity: 0.0;} }
四、加载loading loading.png实质就是让包裹loading.png图片的元素360度循环的转动。 html部分 css部分 .loading{ width: 80px; height: 80px; animation: spin 1.2s linear infinite; } .loading img{ width:100%; height:100%; } @keyframes spin { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} }也可用字体图标来代替图片。 更多loading小动画参见纯CSS3加载Loading动画图 12款创意设计 5f8cw-u3geg.gif参考文章: CSS3 动画实现放大缩小、涟漪扩散效果、叠加图片循环来回显示 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |