仿百度音乐播放器黑胶唱片效果

Author : lovecicy

使用CSS3实现黑胶唱片机的转动效果,点击暂停按钮停止转动,点击播放按钮继续转动。可以看下面的效果,狂炫酷拽屌炸天有没有? 主要用到的CSS3属性有: – animation – @keyframes – transform: rotate(); – animation-play-state 那么实现的过程是怎么样呢,我先喝口水,慢慢说。 1 HTML结构实现 这一步很简单,先用一个<div id=”cover”></div>包裹一个<img/>元素。为了实现碟片的效果,给<div></div>应用border-radius: 50%;,同时设置overflow: hidden,防止图片超出。为了方便起见,在cover外包一层<div id=”wrapper”></div>。这样,第一步就完成了,这时候应该可以看到一个原型的唱片了。 2 实现播放和暂停按钮 这里,我没有用图片或者字体,而是使用了CSS的边框属性实现。因为这两个按钮需要在图片中间,所以需要用[Read More]

standard

CSS3 布局神器–flexbox

Author : luckyGirl

flexbox,是一种新的布局模式–伸缩布局,是为呈现复杂应用与页面而设计的,与浮动或是多栏等块布局相比,它是更简单强大的分配空间与对齐内容的工具。   首先,让我们通过一个简单的例子,看看应用flexbox会有什么效果。这是个常用的三栏式布局模式,通常还会期望三块内容等高,不但能达到响应式布局,而且尽量保持中间区域面积大以保证主区域有足够大的显示空间,使用flexbox就可通过简单几行CSS满足以上需求。 接下来flexbox有哪些属性,是如何轻松愉快实现以上布局吧   一、伸缩器能做什么呢? 设置任何伸缩方向(上、下、左、右均可) 只通过样式重排显示顺序(使视觉顺序跟源码无关) 沿着单一粥折行 充分利用可用空间,扩展内容尺寸,使内容更加紧凑 灵活控制对齐方式   二、伸缩容器(flexbox)基本术语 设置元素 display:flex 或是 display:inline-flex,此元素就为一个伸缩容器,伸缩容器的每个子元素都会成为一个伸缩项目,当伸缩项目仅包含空白时,则浏览器将之视为 display:none   注:在不特殊设置时,默认渲染方向是从左到右,主轴方向[Read More]

standard

8款精致的纯CSS3按钮特效

Author : lovecicy

按钮是网页中用户交互的重要元素之一,一款吸引人眼球的按钮能更好的引导用户去点击,从而产生网站期望得到的效果。今天向大家分享8款外观精致的纯CSS3按钮特效组合,一起来看看。 1、漂亮的纯CSS3图标按钮组合 带图标的纯CSS3按钮组合,图标简洁清爽,按钮美观大方,很不错的一款按钮特效。 在线演示 / 源码下载 2、CSS伪元素实现的3D按钮 CSS伪元素实现的3D按钮,一共5组按钮,是一款绚丽的CSS3按钮特效。 在线演示 / 源码下载 3、超具立体感的CSS3 3D弹性按钮 CSS3 3D立体弹性按钮,这个按钮是使用纯CSS3制作的3D弹性按钮,你可以试着点击这个按钮,感觉非常有意思。 在线演示 / 源码下载 4、纯CSS3圆形社会化分享按钮 由网页素材大全网站整理发布的纯CSS3圆形社会化分享按钮,这款CSS3按钮十分清爽,也十分漂亮。 在线演示 / 源码下载 5、纯CSS3气泡效果的按钮组合 纯CSS3气泡效果的按钮组合,这款CSS3按钮非常具有创意,当你把鼠标移入按钮时,按钮中就会出现漂亮的气泡效果。我们有更多这样的按钮特效收藏在JS特效网站中。 在线演示 / 源码下载 6、3[Read More]

standard