昨天 UI 提交过来一个登录页的设计稿,要求背景有一个流星雨动画,做完之后觉得挺有趣,分享一下~ 一、流星动画 首先创建一个 div 作为画布 为了防止浏览器分辨率太大而影响视觉效果,给画布加了 max-width 和 margin:auto ...
话不多说,直接上代码,自己可以设置更漂亮的样子。我的比较丑 lt DOCTYPE html gt lt html gt lt head gt lt meta charset UTF gt lt title gt lt title gt lt style type text css gt 设置时钟的样子 .warp width: px height: px background: black mar ...
2018-10-17 23:54 0 1014 推荐指数:
昨天 UI 提交过来一个登录页的设计稿,要求背景有一个流星雨动画,做完之后觉得挺有趣,分享一下~ 一、流星动画 首先创建一个 div 作为画布 为了防止浏览器分辨率太大而影响视觉效果,给画布加了 max-width 和 margin:auto ...
ul{width: 300px;border: red;}ul li{width: 300px;height: 70px;line-height: 70px;background: #fff;text ...
今天给大家带来一个非常炫酷的CSS3加载Loading动画,它的特别之处在于,整个Loading动画呈现出了3D的视觉效果。这个Loading加载动画由12个3D圆柱体围成一个椭圆形,同时这12个圆柱体依次波浪式地起伏,从而传递给用户“正在加载”的信息。 效果预览 代码实现 HTML代码 ...
利用css3动画效果,做的一个平滑过渡的小特效,3d旋转的特效 ------------------------------------------------ 动画设置: 调用: <style> .demo { width: 100px ...
...
最终效果如图一,gif图片稍微有点卡顿,事实上代码在浏览器里执行得很流畅。这里面用到的css3技术非常简单,分别是border-radius、伪元素、css3关键帧以及animation动画。 首先整理一下大概的思路:整个圆分为AB两部分,左右都是半圆,上面盖了一个背景色为白色 ...
豆人部分: 吃豆人由两个半圆组成,先来实现上面的半圆。 首先绘制一个圆 接着将圆截 ...
前言 项目代码明细可以查看我Github上的源码:https://github.com/nelsonkuang/css3clock.js 快速浏览更多在线 Demo 想查看源代码,可以自行F12,或在github中直接查看源码,或者欢迎直接留言。 实现思路 主要是用CSS3控制时针 ...