用户投稿目录
【前端动手玩创意】等待的转圈圈效果 (1)
【前端动手玩创意】google五星评分的星星(2)
【前端动手玩创意】CSS-3D卡片翻转效果(3) (今天难度颇高，想挑战再进来！)
【前端动手玩创意】一句CSS做出好看的hero section！(4)
【前端动手玩创意】创造一个Skill bar(5)
【前端动手玩创意】遮蔽广告(D卡未登入)脚本、自定义新增名单(6)
【前端动手玩创意】前端canvas截图的招式！竟然有三招，可存成SVG或PNG (7)
【前端动手玩创意】让你的PDF档案更难被抓取(8)
【前端动手玩创意】哇操！你敢信？花式写todo-list，body里面一行都没有也能搞？(9)
【前端动手玩创意】卡片製作，才不是！是卡片製作器！(10)
等待的转圈圈效果
写法解说
这个是使用到了CSS的效果，只要懂下面五个语法就可以完成啰！
笔记观念
border-radius: 50%;
可以弄出一个圆形
border-top
boder是边框，边框可以指定上下左右
keyframes
自行设定关键字的动画 通常会配合几% 例如 0% 就是最开始 100%就是动画最结束的样子
transform: rotate(360deg);
animation: infinite;
让动画无限重複
程式码写法
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><style>.loader { border: 16px solid #f3f3f3; border-radius: 50%; border-top: 16px solid #3498db; width: 120px; height: 120px; -webkit-animation: spin 2s linear infinite; /* Safari */ animation: spin 2s linear infinite;}/* Safari */@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); }}@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}</style></head><body><h2>How To Create A Loader</h2><div class="loader"></div></body></html>心得
这个等待效果看起来满难的(? 毕竟是个非常常见 实用的功能
没想到三言两语就完成了(*´∀)~♥`
真的是有点太轻鬆了呢(?
没关係 其实练习的重点不是这东西的难度 重点是你跨出去尝试哦!!
愿意去写他 就是进步 就是胜利
让我们未来继续动手玩创意吧~~
微信扫一扫打赏
支付宝扫一扫打赏
