随笔分类 -  CSS

摘要:最近看一下css3d的一些特性,想着也实验学习一下,制作个小demo之类的。就练习了一下。开发一个粗糙的选择木马效果,如图 其实就是找到角度和位置,计算每根柱子的旋转角度摆放到3d空间的置顶位置即可。然后利用css的animate属性让3d舞台无线旋转,就有了一简易的旋转木马效果。感兴趣的可以看一下 阅读全文
posted @ 2016-11-24 16:58 Jeremy阳仔 阅读(1671) 评论(0) 推荐(0)
摘要:以一个前端开发的身份绘制一个简单的蛋糕庆祝一下今天这个好日子吧,程序员庆生的乐趣与哀愁啊。写的比较简陋,感兴趣的看一下吧。 先发个效果图吧 蛋糕分为三个部分,底部蛋糕,顶层蛋糕和蜡烛部分。HTML的布局结构也是按照这三部分布局的。另外就是使用CSS定位和CSS3的rotate,内外阴影等效果调整部分 阅读全文
posted @ 2016-11-16 16:14 Jeremy阳仔 阅读(4042) 评论(0) 推荐(1)
摘要:因为很简单,所以先总结一下:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,将这两个元素变成三角形放置在源元素的两端即可。 (因为之前在生物公司工作过,觉得六边形更贴近生物分子、基因等概念,包括我们在网上搜索关于生物分子、基因 阅读全文
posted @ 2016-08-15 15:56 Jeremy阳仔 阅读(3020) 评论(0) 推荐(0)
摘要:一、效果图预览 (图一) (图二) 附注说明: 图一是浏览器宽度像素大于560px下的展示效果,图二是在浏览器宽度像素小于560px下的展现效果。使用的是CSS3的Media Query(媒体查询)实现的效果。 另外页面中圆形、圆角和三角同样使用了CSS3的特殊样式。这些基础的样式和效果在本文中不会 阅读全文
posted @ 2016-08-09 16:53 Jeremy阳仔 阅读(7036) 评论(2) 推荐(0)
摘要:一、效过图展示: 已经是比较久之前学习的文字效果了。但是还是很实用很有趣的。利用CSS3提供的text-shadow属性可以给页面上的文字添加阴影效果,因此可以替换掉之前使用过的一些繁琐的图片。到目前为止Safari、FireFox、Chrome和Opera等主流浏览器都支持该功能。 二、介绍CSS 阅读全文
posted @ 2016-08-09 13:55 Jeremy阳仔 阅读(6836) 评论(0) 推荐(1)