CSS
与HTML5专栏一起,主要记录一些特殊的CSS样例。
学而不思则忘
一切都可以
展开
-
盒子模型——相邻盒子的水平间距
两个相邻元素之间的水平间距等于左边元素的margin-right加上右边元素的margin-left:如果相加的margin-right和margin-left分别为正值,则拉开两元素的距离,否则拉近两者的距离。如果相加的和为 0 ,则两个元素无缝衔接如果和为负数,则右边元素重叠在左边元素上,重叠的深度等于负数的绝对值。<body> <span class="left">行内元素1</span> <span class="right">行内原创 2020-08-27 10:25:40 · 1033 阅读 · 0 评论 -
盒子模型——margin
padding属性定义的内边距用于内部扩展距离。如果需要向外扩展盒子于周围盒子的距离,则需要使用margin属性.margin属性用于定义盒子边框与周围其它盒子之间的空白区域,该空白区域称为盒子的外边距margin: 0 auto;用来设置元素在浏览器窗口水平居中父子元素边距的定义父子元素的边距既可以使用padding定义,也可以使用margin定义。当父子边距定义为内边距时,应在父级元素中使用padding属性设置内边距;当父子边距定义为外边距时,则应在子级元素中使用margin属性设置外边原创 2020-08-27 10:10:37 · 3229 阅读 · 0 评论 -
盒子模型——padding
内边距的特点1. padding可以撑大元素的尺寸padding可以撑开盒子的尺寸,但是设置的高度和宽度并不包含padding,所以,如果测量的时候包含了padding,在设置宽高的时候需要减去padding的数值2. 背景可以延伸到padding区域综上:盒子本身有宽度,当给盒子设置一个内边距,内边距会撑开盒子,多出来的宽度或高度恰好为padding的数值背景会延伸到padding区域...原创 2020-08-27 09:20:33 · 751 阅读 · 0 评论 -
盒子模型——border
border的属性:border: border-width border-style border-color;border-top: ;border-right: ;border-bottom: ;border-left: ;其中border后面的属性还可以分各个方向进行细分设置border-widthborder-width: ;border-top-width: ;border-right-width: ;border-bottom-width: ;border-left-原创 2020-08-27 09:05:04 · 383 阅读 · 0 评论 -
样式案例——让一块区域居中显示
红色区域显示效果的制作CSS代码.vip-privilege { position: relative; /* 因为要上移 */ top: -115rpx; width: 90%; /* 设置区域宽度 */ height: 330rpx; margin: 0 5%; /* 设置左右外边距各为 5% 这样和 width结合就居中 */ box-shadow: 4rpx 8rpx 2rpx 2rpx rgba(245, 245, 245, 0.8);原创 2020-08-25 20:17:56 · 243 阅读 · 0 评论 -
样式案例——图片背景左上角显示用户头像和用户名
样例实现效果如下该部分在页面顶部,背景是一张图片,在图片的左上角添加用户头像,用户名称,和其它信息。HTML代码: <view class="top-content"> <image class="top-image" src="/assets/img/buyvip/topbgc.png" mode="widthFix" /> <view class="user-info"> <image class="userinfo-a原创 2020-08-25 20:03:12 · 2088 阅读 · 0 评论 -
逐帧动画效果——简单篇
当我们制作一些通过属性变化无法实现的动画效果时,就需要使用逐帧动画。现在lllustrator 矢量图绘图软件中绘制好跑步动作的每一个环节(这里我借鉴书上的图):这里图像的每一帧内容都是 300x372像素的宽高。可以发现这张图片的像素是 3600x372像素,所以一共有十二帧。在网页中引入此图片:<div class="run"></div> .r...原创 2019-09-13 15:50:55 · 3001 阅读 · 0 评论 -
逐帧动画效果——复杂点
除了前面《简单篇》中的背景位置切换方式外,我们也可以用多张图片呈现的方式制作逐帧动画。首先,将每一帧动画单独保存为一个文件,这样就有了十二张图片。我们要做的就是让这十二张图片动起来。先准备十二个div元素,每个元素放置一张图片:<div class="run"> <div id="frame1" class="run-pic"></div> ...原创 2019-09-13 16:12:40 · 521 阅读 · 0 评论 -
3D翻页动画效果
之前,已经使用了 transform 和transition 相结合来制作3D动画效果,下面我们用新的方法来制作3D翻页效果。<ul class="book"> <li class="cover">第一页</li> <li class="page1">第二页</li> <li class="page2"&g...原创 2019-09-14 15:25:01 · 1832 阅读 · 0 评论 -
关闭按钮绘制
关闭按钮可以用Photoshop画,然后存为图片。但在这里,尝试用CSS来绘制这个形状,它的优点在于效果美观,便于定制和修改,且具有矢量缩放能力。先定义一个容器:<span class="close">Close Me</span>然后,设置两个伪元素,每个伪元素都是一条线,为了区分,加上白色和红色。 body{ ...原创 2019-09-16 20:01:28 · 615 阅读 · 0 评论 -
菜单按钮绘制
首先,使用一个a元素来作为DOM容器:<a href="">Menu</a>对a元素做一些样式设置: a{ text-decoration: none; color: #999; text-indent: 1.2em; /*使文字右移1.2个字符大小,为图标腾出空间*/ font-size: 3...原创 2019-09-17 13:44:48 · 328 阅读 · 0 评论 -
三角图标绘制
先设计一段html代码,以此来做示例:<article> <h1>Lorem ipsum</h1> <p>Ne maluisset sententiae qui, mucius epicuri reprimique et cum, sumo saperet laboramus et pri. An ign...原创 2019-09-17 16:07:30 · 303 阅读 · 0 评论 -
渐变色绘制
用CSS来实现颜色的渐变:<a href="">BUTTON</a>一、线性渐变:接下来,对a元素进行样式修改,并选取两种颜色来作为渐变的起点和终点: a{ display: inline-block; font-size: 2em; border-radius: 0.3em; text-dec...原创 2019-09-17 19:27:43 · 495 阅读 · 0 评论 -
加载动画效果——更复杂
最后,这里将制作一个更加复杂的动画:有八个白点组成,分别位于八个方位,然后八个白点依次放大和缩小。制作关键是做好每一个白点的动画和他们之间的连贯性。首先,根据前面学到的 box-shadow 属性,我们先创建八个白点的动画: body{ background: #4ea980; margin: 200px; } .loader{ ...原创 2019-09-13 13:34:13 · 256 阅读 · 0 评论 -
加载动画效果——复杂
前面两篇的动画效果只设计了第一帧和最后一帧,这次,我将学习更加复杂的动画效果前面代码一样,这里只贴出CSS样式代码: .loader { font-size: 20px; width: 1em; height: 1em; border-radius: 50%; position: relative; ...原创 2019-09-12 20:49:11 · 218 阅读 · 0 评论 -
加载动画效果——渐变
接着上一篇简单的加载动画,我们来实现渐变效果的加载动画: .loader{ text-indent: -9999em; /*隐藏文字*/ position: relative; width: 200px; height: 200px; border-radius: 50%; /*使形状轮廓为圆形*/ ...原创 2019-09-12 20:01:56 · 614 阅读 · 0 评论 -
CSS——常用属性
<h1>青春一去不复返</h1><p>青春往事,多么甜蜜;青春岁月,多么靓丽;青春流年,如火如荼。青春里,我们向着梦想前进。 跌倒过,伤心过,快乐过,痛苦过,孤独过,彷徨过,迷茫过。总是,在悠悠的岁月中徘徊; 总是,在如春的生命中成长;总是,在季节的交替中感悟人生四季的美妙与韵律; 总是,在多愁善感中体悟青春的美好与无奈。</p&...原创 2019-08-04 15:57:03 · 172 阅读 · 0 评论 -
CSS——框模型
框模型:决定了元素内容、外边距和边框的处理方式。以下面的HTML代码为例:<body> <div class="box"> <h1>box</h1> </div></body><style> body{ color: #ffffff; ...原创 2019-08-05 16:51:23 · 103 阅读 · 0 评论 -
CSS——阴影
一、设置文字阴影—— text-shadow<h1>article</h1><style> h1{ text-shadow: 1px 5px 5px rgba(26, 23, 23, 0.7); /* x方向阴影的位移,y方向上阴影的位移, 阴影的模糊程度,阴影的颜色和其透明度*/ }</style&g...原创 2019-08-05 22:07:49 · 2463 阅读 · 0 评论 -
CSS——2D与3D效果变换
下面给出一段CSS代码,他包含了一些对图形的空间处理基础知识,可以先参考学习:<img src="1235298.gif" alt="Magnet" class="tile-image"><style> .tile-image{ transform: translate(0, 50); /* x 轴不变,y轴向下平移 */ ...原创 2019-08-05 22:39:17 · 376 阅读 · 0 评论 -
清除浮动的方法
参考这篇文章:https://segmentfault.com/a/1190000004237437 自己再慢慢整理整理。方法一:原理:这种方法清除浮动是现在网上最拉风的一种清除浮动,利用:after和:before来在元素内部插入两个元素块,从面达到清除浮动的效果。#container::after { content: ""; display: block; clear:...原创 2019-08-31 17:11:25 · 161 阅读 · 0 评论 -
格子布局入门
以下列代码为例:<section> <article> <h1>Ulysses</h1> <p>Soaring through the galaxies.</p> <img src="pic1.png" alt="image of Ulysses"> ...原创 2019-09-08 21:21:35 · 1142 阅读 · 0 评论 -
两列自适应布局
<body> <div class="row"> <div class="side"> <img src="side.png" alt="order"> <p>In restaurants, pizza can be baked...原创 2019-09-08 21:21:26 · 617 阅读 · 0 评论 -
图标元素动画效果
这次,使用另外一种动画的画法:animation。还是,准备一个元素作为图标的载体,并进行以下设置:<span class="close">Close</span>然后,把close隐藏,增加一个圆形按钮:<style> @font-face { font-family: 'icon-font'; src: url('font/flat-u...原创 2019-09-10 18:58:15 · 829 阅读 · 0 评论 -
两个页面之间动画的切换效果——平移、缩放、旋转等
一下面的html代码为例: <body> <article id="tablet"> <img src="tablet.png" alt="tablet"> <h1>Comprehensam</h1> <p>Mel homero l...原创 2019-09-11 19:29:50 · 12826 阅读 · 6 评论 -
HTML+CSS,设置<div> 在屏幕居中
以下面的代码为例:<div id="box"></div>方法一:div 使用绝对布局,设置margin:auto;并设置top、left、right、bottom的值相等即可。<style> #box{ background: #18af75; height: 300px; width: 300...原创 2019-08-29 19:41:51 · 2365 阅读 · 0 评论 -
按钮元素的动画效果
<a href="">This is a link</a>以上面的代码为例,我们来一步步的制作这个按钮的动画:先把标签里的 a 得颜色,字体样式等基础设置一下。然后设置鼠标悬浮在 a 上面时让其显示颜色。 a{ color: #e7cfcf; background: #af2c2c; text-decorati...原创 2019-09-08 21:20:58 · 1499 阅读 · 0 评论 -
加载动画效果——简单动画
在此,将记录几个我学习加载动画的案例。先设计一个圆圈: <div class="loader">Loader...</div> body{ background: #4ea980; } .loader{ text-indent: -9999em; /*隐藏文字*/ position: relat...原创 2019-09-12 17:17:15 · 451 阅读 · 0 评论 -
CSS——选择器
CSS中主要存在三种选择器,分别为标签选择器,类选择器和id选择器。以下面一段HTML代码为例:<body> <header> <h1 class="red" id="title">Title</h1> </header> <section> <h1 class...原创 2019-08-04 12:47:15 · 195 阅读 · 0 评论