web前端小案例-纯css制作水滴效果
2018-02-25 14:10
761 查看
html代码:<div class="drip"></div>css代码:
<style> html, body { margin: 0; height: 100%; width: 100%; display: flex; background-color: #43A2CE; } .drip { width: 200px; height: 250px; display: flex; flex-wrap: wrap; justify-content: center; margin: auto; position: relative; } .drip:before { position: absolute; left: 92.5px; top: 0; content: ''; width: 15px; height: 15px; background-color: #FFF; border-radius: 50%; opacity: 0; animation: drip 4s ease infinite; } .drip:after { box-sizing: border-box; position: absolute; bottom: 0; left: 0; content: ''; width: 0px; height: 0px; border: solid 4px #FFF; border-radius: 50%; opacity: 0; animation: splash 4s ease infinite; } @keyframes drip { 10% { top: 0; opacity: 1; animation-timing-function: cubic-bezier(0.24, 0, 0.76, 0.14); } 25% { opacity: 1; top: 200px; animation-timing-function: ease-out; width: 15px; height: 15px; left: 92.5px; } 30% { opacity: 1; top: 160px; width: 5px; height: 5px; animation-timing-function: ease-in; left: 97.5px; } 33% { top: 200px; opacity: 0; animation-timing-function: ease-out; left: 97.5px; } 33.001% { opacity: 0; } 100% { opacity: 0; } } @keyframes splash { 0% { opacity: 0; } 25% { bottom: 50px; left: 100px; opacity: 0; width: 0px; height: 0px; } 25.001% { opacity: 1; } 33% { bottom: 0; left: 0; opacity: 0; width: 200px; height: 100px; } 33.001% { bottom: 50px; left: 100px; opacity: 1; width: 0px; height: 0px; } 43% { bottom: 0; left: 0; opacity: 0; width: 200px; height: 100px; } 43.001% { opacity: 0; } } </style>
最后小编推荐一下我的前端学习群:575308719,视频、源码、经验等大量干货分享,不管你是小白还是大牛,小编都欢迎,欢迎初学和进阶中的小伙伴。
相关文章推荐
- web前端案例-纯css代码制作吃豆豆加载效果
- web前端案例-老司机用css带你制作直升机飞行
- web前端小案例-css制作电脑平板手机变幻小动画
- web前端小案例-超级css制作七彩圆环旋转幻影
- web前端案例-css制作花束小动画
- web前端小案例-纯css制作微笑小表情
- web前端小案例-纯css书架装载机
- CSS世界:web前端开发,CSS3+HTML5网页制作
- 前端小案例-纯css做缩略图悬停效果
- web前端vue之CSS过渡效果示例
- web前端学习笔记---利用css+filter完成简单的图片透明效果
- 前端案例:170行css制作Apple手机开机动画
- web前端基础案例-简短代码制作爱奇艺首页导航轮播特效
- web前端小案例-边框线条制作
- Html+css+div+ul+li制作Web前端导航菜单。
- 前端基础案例分享:制作百度换肤效果
- 前端基础小案例:纯css制作旋转披萨
- web前端 javascript 实现瀑布流页面布局效果的框架 v1.0.1
- 3. web前端开发分享-css,js提高篇
- 利用css制作多彩文字效果