![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS3
文章平均质量分 57
Dragon_GL
爱前端 爱代码的 斗笔一枚
展开
-
jQuery + CSS3 实现花瓣剥落特效
实现原理: 其实花瓣剥落实现与之前写的一篇jQuery实现流星雨特效的实现原理差不多。在脚本中动态创建用来放“花瓣”的节点, 然后,设置花瓣随机从浏览器上边缘随机位置落下,并设置下落过程的时间(一个范围内随机数)、终点(一个范围内随 机数)。另外用CSS 3让花瓣落下的过程中旋转起来,下面直接看实现代码吧。HTML C原创 2015-12-07 17:26:53 · 4240 阅读 · 0 评论 -
Win8风格界面效果
很久前写的代码了,今天用来试着演示使用codepen来显示代码和演示最终实现效果,现在这样展示代码和效果体验是不是很6! See the Pen <a href="http://codepen.io/G-Dragon/pen/beGgba/">Win8 Type UI</a> by G.Dragon (<a href="http://codepen.io/G-Dragon">@G-Dragon<原创 2016-05-28 19:35:00 · 1134 阅读 · 0 评论 -
HTML5模拟齿轮动画
这是一个基于HTML5的齿轮动画特效,我们将齿轮转动的物理学原理,转换为HTML5代码,在网页上实现了模拟齿轮转动的动画效果。该齿轮动画的最大特点是它由好多个齿轮组成,这对齿轮传动的算法要求就大大提高了,而且我们并没有用JavaScript,而是纯CSS3实现的。HTML<html><head> <meta charset="gb2312"> <link href="css/zzsc.css原创 2016-06-09 14:40:47 · 1988 阅读 · 0 评论 -
CSS3 媒介查询
一、 响应式设计响应式设计,设计可根据所显示的设备屏幕大小(视口宽度)而自动调节改变, 在不同的设备上呈现的会有所不同。按照可用的屏幕属性,响应式设计提供了 UI 的最佳效果。例如,如果网站布局上有一个占据 25% 的屏幕宽度的侧边栏,那么该侧边栏在不同大小的屏幕上的呈现是不同的。该侧边栏在较大的桌面监控器上是宽屏的,在较小的 智能手机屏幕上是极其窄的。而在最高的或最小的屏幕上,侧边栏很可能不再是原创 2017-03-02 23:25:23 · 600 阅读 · 0 评论 -
使用@include-media写媒介查询
官网地址: @include-media@include-media的口号是写简单、优雅和可维护的Sass媒介查询。include-media是什么?include-media 是一个Sass库,使用它 我们可以用一种容易和优雅的方式,自然和非常简单的语法编写CSS媒介查询。为什么我们需要这个库?我花了很长一段时间尝试不同的可用的库和mixin, 但是,最终它们都不能以优雅的方式满足我的需要。其翻译 2017-03-05 20:24:43 · 2639 阅读 · 0 评论