MorningDuGe

思路：利用伪类重新生成同样的字体，且和原字体在竖直位置重合，在水平位置错开约2个px，利用动画使伪类的高度发生变化，同时利用一条直线跟随伪类高度的变化。HTML代码div class="wrapper" data-word="hello world!"> hello world! div class="whiteLine">div>div>CSS样式

nth-childp:nth-child(n){//表示p的父元素下的第n个子元素}nth-of-typep:nth-of-type(n){//表示p的父元素下的第n个子元素且这个子元素是p}举例：nth-of-type<p>1</p><p>2</p><span>3</span><p>4</p><p>5</p>p:nth-of-type(odd){ background:re

background:linear-gradient参数介绍background:linear-gradient(angle,color-stop length,color-stop，length)angle可以指定0~360deg,或者用方向：to left,to left bottom等属性 举例：div的其余属性为：color-stop指颜色的终点length指颜色跨越的距离举例1.

实现思路：利用伪类实现，伪类内容和背景图片一样，利用animation动画实现伪类的水波效果，而水波荡漾时最关键的就是：像用放大镜看一样，因此，需先将图片长宽缩小后将其用放大镜即scale放大，逐渐增加其大小（此时仍小于原图）并减小其scale（此时scale仍大于1，因为实现的效果仍然是放大后的效果），最终将其大小和scale都设置成最初的大小。水波荡漾时是从最中间开始由小变大的，所以在

grid布局即网格布局，每个网格都有起止线，每两条线之间都有设定好的距离1. 网格列宽设置首先设置网格的父级元素display：gridgrid-template-colums:100px 10px 100px 10px 100px;表示第1列100px，第2列10px(此列可作为列与列之间的间隙)2.网格高度设置grid-template-rows:au

grid布局即网格布局，每个网格都有起止线，每两条线之间都有设定好的距离1. 网格列宽设置首先设置网格的父级元素display：tablegrid-template-colums:100px 10px 100px 10px 100px;表示第1列100px，第2列10px(此列可作为列与列之间的间隙)2.网格高度设置grid-template-rows:a

效果图如下 原理：给伪类添加背景利用线性渐变实现，然而背景渐变一次只能实现一个切角，因此，上图其实是由4个不同方向上的的背景实现的。代码实现div class="corner">/div>.corner{ width: 300px; height: 300px; background:

background-attachment当设置的背景图片过大，而宽高太小时，设置overflow:auto，滚动条移动时，图片背景不会随着图片移动，设置background-attachment:local则背景图像会随着滚动条的移动而移动。-webkit-box-reflect设置倒影 img{ width: 200px;

思路：利用伪类重新生成同样的字体，且和原字体在竖直位置重合，在水平位置错开约2个px，利用动画使伪类的高度发生变化，同时利用一条直线跟随伪类高度的变化。HTML代码<div class="wrapper" data-word="hello world!"> hello world! <div class="whiteLine"></div></div>CSS样式