transition

藤藤每日一练——CSS3 Animation Menu

藤藤每日一练——CSS3 Animation Menu

这是一个使用CSS3中的transition和transform两个属性制作的一个动画下拉菜单效果,整个效果未采用任何js脚本代码,其中下接的折叠效果是通过transform的rotate来实现的,而transition是用来控制动画更具线性,当然这个效果也用到了transform的3d旋转属性,感兴趣的可以围观一下。扩大你自己的视野。

CSS3 Letter

CSS3 Letter

这是一个很简单的案例,不过效果很有创意,一个标题“w3cplus”,默认只显示一个字母“w”,但当你的鼠标悬浮到这个标题上时,整个“w3cplus”会动态的给你展开,其实这个效果很类似于Letteringjs的效果,整个效果中letter-spacing属性的运用非常关键,然后配上CSS3的transition和opacity属性。

Colorful CSS3 Animated Navigation Menu

Colorful CSS3 Animated Navigation Menu

Colorful CSS3 Animated Navigation Menu是Martin Angelov制作的,今天看到这个效果很有意思,特意扒过来与大家分享。整个效果是CSS3使用了BootstrapFont Awesome字体图形制作了一个彩色的动画下拉菜单。其中运用到的CSS3属性有:nth-child()选择器,gradient制作渐变效果,@font-face配合:before伪选择器制作的ICON。其中最具特色的是使用max-height来控制下拉菜单的显示与隐藏。你有试过吗?没试过请继续吧!

Codrops CSS3 Lightbox 2

Codrops CSS3 Lightbox 2

Codrops CSS3 Lightbox总供有三个效果,今天把第二个效果放上来与大家分享,这是一个完美的Lightbox效果,是有CodropsMary Lou制作的,真的很完美,不得不让人折服。能把CSS3运用到如此完美。这个案例与第一个区别其实很小,只是在对图片缩放做了一下不同效果处理。在这个效果中把CSS3常用的属性几乎都用上了,比如说:@font-face制作特殊字体效果;border-radius制作圆角效果;box-shadow实出盒子阴影效果;text-shadow实现文字阴影效果;opacity制作透明效果;gradient制作的渐变背景图片;transition实现过渡的动画效果;animation制作的动画效果等等。而且最为精彩的部分,图片能随浏览器大小进对缩放。要是你对这个感兴趣,不仿看看。

Codrops CSS3 Lightbox

Codrops CSS3 Lightbox

Codrops CSS3 Lightbox总供有三个效果,今天把第一个效果放上来与大家分享,这是一个完美的Lightbox效果,是有CodropsMary Lou制作的,真的很完美,不得不让人折服。能把CSS3运用到如此完美。在这个效果中把CSS3常用的属性几乎都用上了,比如说:@font-face制作特殊字体效果;border-radius制作圆角效果;box-shadow实出盒子阴影效果;text-shadow实现文字阴影效果;opacity制作透明效果;gradient制作的渐变背景图片;transition实现过渡的动画效果;animation制作的动画效果等等。而且最为精彩的部分,图片能随浏览器大小进对绽放,要是你对这个感兴趣,不仿看看。

Full CSS3 Lightbox

Full CSS3 Lightbox

Full CSS3 Lightbox从标题上就知道是一个CSS3制作的一个全屏显示的Lightbox效果。这个效果是在前一个效果的基础做了一定的改良,修改的最显示的地方就是添加了一个假的关闭按钮,其实给Lightbox的全屏图片显示时添加了一个动画效果,有0.9放大到1,而图片居中效果依然使用的是table和table-cell属性。详细的请参考下面展示的案例代码。

Pure CSS3 Lightbox

Pure CSS3 Lightbox

这个Lightbox效果也是一个纯CSS3写的效果,这个效果的制作方法也不算复杂,相对来说比较简单。主要使用了CSS3的“:target”属性来控制对应大图的显示与隐藏,而且配用了transition属性来制作了动画效果,而且还有意思的是使用了table和table-cell来实现图片的居中效果。具体效果请看看详细代码。

Lightbox effect with Tabindex and CSS3

Lightbox effect with Tabindex and CSS3

这个Lightbox效果实现原理很简单,就是点击图片或者使用tab键,当图片得到焦点(:focus)时,图片会在当前位置被放大,同时移动Y轴的距离。整个制作过程中使用了HTML5的新标签figure和figcaption,包含图片以及图片标题,同时在figure相邻位置设置一个span标签,通过选择器来控制span标签制作一个overlayout的朦板效果。这个效果中仅用到CSS3属性也非常的简单,利用border-radius制作了图片边框的圆角效果,使用box-shadow制作了图片的阴影效果,最主要的是使用CSS3的选择器配合transition和transform属性制作了一个类似于Lightbox的效果。

CSS3重构百度图片首页中图片展示效果

CSS3重构百度图片首页中图片展示效果

今天使用百度图片搜索图片时,无意之中看到首页的图片展示效果具有旋转、阴影等效果。好奇之下查看其源码,使用了一些CSS3属性制作,但不知道出与什么原因,在制作这个效果中并不什么完美(我个人认为),于是动手自己整了一个,放上来与大家分享,希望大家喜欢

CSS3制作W3cplus的关注面板

CSS3制作W3cplus的关注面板

W3cplus第三版本皮肤更新好长一段时间了,早就想把站点上的一些CSS3效果分割成单独的案例出来,与大家分享,但受限于时间,今天抽空把页面底部面板效果整理出来了。首先这个效果是有原因的,因为这个效果是当初自己左拼右拼出来的一个效果,后来自我感觉还能接受。上线后也有很多同学问我是图片制作的吗?其实不是的,他是一个CSS3制作的效果。

页面

返回顶部