(CSS中级篇)网页纯CSS绘制效果绘汇总
文章平均质量分 73
majun0007
这个作者很懒,什么都没留下…
展开
-
图标元素动画效果
一、HTMLHomeSearchUserMailChat一、CSS@font-face { font-family: 'icon-font'; src: url('font/flat-ui-icons-regular.ttf'), url('font/flat-ui-icons-regular.eot'), url('font/fla原创 2017-02-11 19:23:04 · 1368 阅读 · 0 评论 -
各类加载loading动画效果
效果一: 一、HTMLLoading...二、CSS/*绿色背景*/body { background:#4ea980; margin:50px;}/*纯白色圈*/.loader { text-indent: -9999em; position: relative; width: 200px; height: 20原创 2017-02-12 11:10:17 · 41830 阅读 · 2 评论 -
1.CSS图像绘制之:关闭按钮
一、HTMLClose Me二、CSS/*使页面背景显示为绿色*/body { background:#2ECC71; margin:50px;}.close{ font-size:0px; display:block;}/*绘制上下2个白色长方形*/.close::before, .close::after{ conten原创 2017-02-12 13:50:01 · 2153 阅读 · 0 评论 -
3.CSS图像绘制之:三角图标
一、HTML Lorem ipsum Ne maluisset sententiae qui, mucius epicuri reprimique et cum, sumo saperet laboramus et pri. An ignota incorrupte quo, ex his dicta nominavi, erat consulatu eum cu. Eum ea原创 2017-02-12 14:18:41 · 393 阅读 · 3 评论 -
2.CSS图像绘制之:菜单按钮
一、HTMLMenu二、CSS/*使页面背景显示为绿色*/body {margin:50px;font-family:arial;background:#fbfbfb;}a{text-decoration:none;color:#999;/*使文字右移,为图标腾出显示空间*/text-indent:1.2em; font-size:32px原创 2017-02-12 14:02:40 · 637 阅读 · 0 评论 -
5.CSS图像绘制之:条纹背景
CSSbody { background:linear-gradient(#51B0E7 50%, #006084 50%); background-size:100% 20px;} CSSbody { background:#FFF; margin:50px; background:linear-gradient(45d原创 2017-02-12 17:39:22 · 1862 阅读 · 1 评论 -
4.CSS图像绘制之:字渐变按钮
一、HTMLBUTTON二、CSSa{font-size:5em; /*渐变背景*/background: linear-gradient(to right, #79f296, #27AE60); /*背景裁剪区域为文字区域*/-webkit-background-clip: text;color:transparent;}原创 2017-02-12 14:26:26 · 209 阅读 · 0 评论