web前端案例-纯css代码制作吃豆豆加载效果
2018-02-24 13:44
916 查看
html代码:<div class="demo">
<div class="pacman"></div>
<div class="dot"></div>css代码:
<style> @-webkit-keyframes up { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-30deg); } } @-moz-keyframes up { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-30deg); } } @-o-keyframes up { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-30deg); } } @keyframes up { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-30deg); } } @-webkit-keyframes down { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(30deg); } } @-moz-keyframes down { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(30deg); } } @-o-keyframes down { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(30deg); } } @keyframes down { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(30deg); } } @-webkit-keyframes r-to-l { 100% { margin-left: -1px; } } @-moz-keyframes r-to-l { 100% { margin-left: -1px; } } @-o-keyframes r-to-l { 100% { margin-left: -1px; } } @keyframes r-to-l { 100% { margin-left: -1px; } } body { background: #000; overflow: hidden; margin: 0; } body .pacman:before, body .pacman:after { content: ''; position: absolute; background: #FFC107; width: 100px; height: 50px; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; border-radius: 50px 50px 0 0; -webkit-animation: up 0.4s infinite; -moz-animation: up 0.4s infinite; -o-animation: up 0.4s infinite; animation: up 0.4s infinite; } body .pacman:after { margin-top: -1px; border-radius: 0 0 50px 50px; -webkit-animation: down 0.4s infinite; -moz-animation: down 0.4s infinite; -o-animation: down 0.4s infinite; animation: down 0.4s infinite; } body .dot { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin-top: -5px; margin-left: 30px; border-radius: 50%; background: #ccc; z-index: -1; box-shadow: 30px 0 0 #ccc, 60px 0 0 #ccc, 90px 0 0 #ccc, 120px 0 0 #ccc, 150px 0 0 #ccc; -webkit-animation: r-to-l 0.4s infinite; -moz-animation: r-to-l 0.4s infinite; -o-animation: r-to-l 0.4s infinite; animation: r-to-l 0.4s infinite; } </style>
文章分享到最后小编推荐一下我的前端学习群:575308719,不管你是小白还是大牛,小编我都挺欢迎,不定期分享干货,包括我精心整理的一份前端教程,欢迎初学和进阶中的小伙伴。
相关文章推荐
- web前端小案例-纯css制作水滴效果
- web前端小案例-纯css制作微笑小表情
- web前端基础案例-简短代码制作爱奇艺首页导航轮播特效
- web前端案例-css制作花束小动画
- web前端案例-老司机用css带你制作直升机飞行
- web前端小案例-css制作电脑平板手机变幻小动画
- web前端小案例-超级css制作七彩圆环旋转幻影
- Web前端开发最佳实践(9):CSS代码太太乱,重复代码太多?你需要精简CSS代码
- web前端基础:用jQuery制作双色表格代码分享
- 基于webpack的前端工程化开发解决方案探索(二):代码分割与图片加载
- css+js 实现在后台加载时前端出现等待的圆形图标,或者批量导入时出现等待图标提高用户体验,废话少说直接上代码 <style type="text/css"> body {
- 通用base.css —— 《编写高质量代码 web前端开发修炼之道》
- web前端小案例-边框线条制作
- <编写高质量代码--web前端开发修炼之道>之css总结
- css实现web前端最美的loading加载动画!
- 前端基础案例分享:制作百度换肤效果
- web前端小案例-纯css书架装载机
- Android中WebView在加载网页的时候,怎样应用本地的CSS效果?就是说怎样把本地的CSS嵌入到HTML中
- web前端代码规范——css代码规范
- web前端案例-65行代码写音乐伴奏爱心飘落场景