1.通过改变透明度来实现文字的渐变闪烁，效果图：<!DOCTYPEhtml><html><head></head><title>文字闪烁</title><body><divclass="blink">星星之火可以燎原</div></body><style>.myclass{letter-spacing:5px;/*字间距*/color:red;font-weight:bold;font-size:46px;}/*定义keyframe动画，命名为blink*/@keyframesblink{0%{opacity:1;}100%{opacity:0;}}/*添加兼容性前缀*/@-webkit-keyframesblink{0%{opacity:1;}100%{opacity:0;}}@-moz-keyframesblink{0%{opacity:1;}100%{opacity:0;}}@-ms-keyframesblink{0%{opacity:1;}100%{opacity:0;}}@-o-keyframesblink{0%{opacity:1;}100%{opacity:0;}}/*定义blink类*/.blink{color:red;font-size:46px;animation:blink1slinearinfinite;/*其它浏览器兼容性前缀*/-webkit-animation:blink1slinearinfinite;-moz-animation:blink1slinearinfinite;-ms-animation:blink1slinearinfinite;-o-animation:blink1slinearinfinite;}<style></html>如果不需要渐变闪烁效果，我们可以在keyframe动画中定义50%，50.1%的opacity的值。如下：@-webkit-keyframesblink{0%{opacity:1;}50%{opacity:1;}50.01%{opacity:0;}100%{opacity:0;}}2.利用背景图片或者背景渐变，实现文字颜色的闪烁效果，效果图：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><styletype="text/css">.blink{display:inline-block;font-size:46px;margin:10px;background:linear-gradient(left,#f71605,#e0f513);background:-webkit-linear-gradient(left,#f71605,#e0f513);background:-o-linear-gradient(right,#f71605,#e0f513);-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:scratchy0.253slinearforwardsinfinite;/*其它浏览器兼容性前缀*/-webkit-animation:scratchy0.253slinearforwardsinfinite;-moz-animation:scratchy0.253slinearforwardsinfinite;-ms-animation:scratchy0.253slinearforwardsinfinite;-o-animation:scratchy0.253slinearforwardsinfinite;}@keyframesscratchy{0%{background-position:00;}25%{background-position:00;}26%{background-position:20px-20px;}50%{background-position:20px-20px;}51%{background-position:40px-40px;}75%{background-position:40px-40px;}76%{background-position:60px-60px;}99%{background-position:60px-60px;}100%{background-position:00;}}/*添加兼容性前缀*/@-webkit-keyframesscratchy{0%{background-position:00;}25%{background-position:00;}26%{background-position:20px-20px;}50%{background-position:20px-20px;}51%{background-position:40px-40px;}75%{background-position:40px-40px;}76%{background-position:60px-60px;}99%{background-position:60px-60px;}100%{background-position:00;}}@-moz-keyframesscratchy{0%{background-position:00;}25%{background-position:00;}26%{background-position:20px-20px;}50%{background-position:20px-20px;}51%{background-position:40px-40px;}75%{background-position:40px-40px;}76%{background-position:60px-60px;}99%{background-position:60px-60px;}100%{background-position:00;}}@-ms-keyframesscratchy{0%{background-position:00;}25%{background-position:00;}26%{background-position:20px-20px;}50%{background-position:20px-20px;}51%{background-position:40px-40px;}75%{background-position:40px-40px;}76%{background-position:60px-60px;}99%{background-position:60px-60px;}100%{background-position:00;}}@-o-keyframesscratchy{0%{background-position:00;}25%{background-position:00;}26%{background-position:20px-20px;}50%{background-position:20px-20px;}51%{background-position:40px-40px;}75%{background-position:40px-40px;}76%{background-position:60px-60px;}99%{background-position:60px-60px;}100%{background-position:00;}}</style></head><body><divclass="blink">星星之火可以燎原</div></body></html>3.通过设置text-shadow的值，来实现文字阴影闪烁的效果，效果图：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><styletype="text/css">.blink{font-size:46px;color:#4cc134;margin:10px;animation:changeshadow1sease-ininfinite;/*其它浏览器兼容性前缀*/-webkit-animation:changeshadow1slinearinfinite;-moz-animation:changeshadow1slinearinfinite;-ms-animation:changeshadow1slinearinfinite;-o-animation:changeshadow1slinearinfinite;}@keyframeschangeshadow{0%{text-shadow:004px#4cc134}50%{text-shadow:0040px#4cc134}100%{text-shadow:004px#4cc134}}/*添加兼容性前缀*/@-webkit-keyframeschangeshadow{0%{text-shadow:004px#4cc134}50%{text-shadow:0040px#4cc134}100%{text-shadow:004px#4cc134}}@-moz-keyframeschangeshadow{0%{text-shadow:004px#4cc134}50%{text-shadow:0040px#4cc134}100%{text-shadow:004px#4cc134}}@-ms-keyframeschangeshadow{0%{text-shadow:004px#4cc134}50%{text-shadow:0040px#4cc134}100%{text-shadow:004px#4cc134}}@-o-keyframeschangeshadow{0%{text-shadow:004px#4cc134}50%{text-shadow:0040px#4cc134}100%{text-shadow:004px#4cc134}}</style></head><body><divclass="blink">星星之火可以燎原</div></body></html>
CSSDIV网页布局中当分辨率小于等于1024px（像素）时，DIV布局对象显示1000px宽度，当分辨率大于1024px时候显示1200px宽度等需求。使用CSS实现改变浏览器显示宽度从而实现布局的网页宽度动态改变变化（网页宽度自动随浏览器显示宽度而变宽变窄）。随着发展，越来越多的电脑用户显示屏分辨率越来越高，但有的用户还是使用1024px的分辨率的显示屏（根据几个浏览器分辨率统计平台得到数据现在使用1200分辨率以下用户极少，但我们CSS布局时仍然需要至少考虑1024px分辨率用户），如果网页布局宽度固定到1200px，1024分辨率用户浏览网页时浏览器下方会出现滚动条，为了解决这个问题，大家可以通过使用CSS3样式判断用户浏览器宽度从而调用不同布局宽度。使用CSS单词与语法代码如下:@mediascreenand(判断属性){CSS样式选择器}这里注意花括号里装要变化CSS样式选择器。不同分辨率显示不同宽度样式案例DIVCSS小案例描述我们首先设置一个DIV盒子CSS命名为“.abc”，设置其高度为300px，css边框为黑色；以及设置margin:0auto布局居中。预先设置这两个样式是为了便于观察。我们通过手动拖拽浏览器显示宽度，然后观察此盒子宽度变化情况，当浏览器宽度调节到宽度不大于500px时，对应此盒子宽度显示100px；调节浏览器宽度不大于901px时，显示“.abc”对应盒子宽度显示200px;当调节浏览器宽度大于1201px时，盒子对象宽度显示1200px；当小于1200px时候显示宽度为900px。CSS代码代码如下:.abc{height:300px;border:1pxsolid#000;margin:0auto}@mediascreenand(min-width:1201px){.abc{width:1200px}}/*css注释：设置了浏览器宽度不小于1201px时abc显示1200px宽度*/@mediascreenand(max-width:1200px){.abc{width:900px}}/*设置了浏览器宽度不大于1200px时abc显示900px宽度*/@mediascreenand(max-width:901px){.abc{width:200px;}}/*设置了浏览器宽度不大于901px时abc显示200px宽度*/@mediascreenand(max-width:500px){.abc{width:100px;}}/*设置了浏览器宽度不大于500px时abc显示100px宽度*/需要注意是CSS代码顺序，由大到小排版CSS（判断浏览器宽度越大越放前），这样是因为逻辑关系，@media判断CSS排错将导致判断失效。HTML代码代码如下:<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>无标题文档</title><style>.abc{height:300px;border:1pxsolid#000;margin:0auto}@mediascreenand(min-width:1201px){.abc{width:1200px}}/*设置了浏览器宽度不小于1201px时abc显示1200px宽度*/@mediascreenand(max-width:1200px){.abc{width:900px}}/*设置了浏览器宽度不大于1200px时abc显示900px宽度*/@mediascreenand(max-width:900px){.abc{width:200px;}}/*设置了浏览器宽度不大于900px时abc显示200px宽度*/@mediascreenand(max-width:500px){.abc{width:100px;}}/*设置了浏览器宽度不大于500px时abc显示100px宽度*/</style></head><body><divclass="abc">DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度</div></body></html>为了兼容IE9以下版本浏览器需要加入一个google的JS，当然可以下载引人html代码如下:<!--[ifltIE9]><scriptsrc="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->将JS代码放入标签前即可，这里直接引人google在线JS，你可以下载此JS文件重新HTML引人即可。5、完美兼容各大浏览器HTML+CSS+JS源代码代码如下:DOCTYPEhtml><html><head><metacharset="utf-8"/><title>无标题文档</title><style>.abc{height:300px;border:1pxsolid#000;margin:0auto}@mediascreenand(min-width:1201px){.abc{width:1200px}}/*css注释说明：设置了浏览器宽度不小于1201px时abc显示1200px宽度*/@mediascreenand(max-width:1200px){.abc{width:900px}}/*设置了浏览器宽度不大于1200px时abc显示900px宽度*/@mediascreenand(max-width:900px){.abc{width:200px;}}/*设置了浏览器宽度不大于900px时abc显示200px宽度*/@mediascreenand(max-width:500px){.abc{width:100px;}}/*设置了浏览器宽度不大于500px时abc显示100px宽度*/</style><!--[ifltIE9]><scriptsrc="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]--></head><body><divclass="abc">DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度</div></body></html>
先来看一下效果图：具体实现步骤：先画一个大圆，底色为#ffffff;<divclass="third"></div>.third{background-color:#FFFFFF;width:182px;height:182px;border-radius:50%;position:relative;}2.再画一个浅绿色的圆和一个与与第一个圆一样的圆<divclass="third"><divclass="second"></div><divclass="first"></div></div>.second{background-color:#6ED4BF;width:182px;height:182px;border-radius:50%;clip:rect(0,91px,auto,0);position:absolute;}.first{background-color:#FFFFFF;width:182px;height:182px;border-radius:50%;clip:rect(0,auto,auto,91px)；}3.将second圆根据百分比旋转.second{background-color:#6ED4BF;width:182px;height:182px;border-radius:50%;clip:rect(0,91px,auto,0);position:absolute;transform:rotate(30deg);//旋转30度}4.最后再画一个小圆，写上百分比<divclass="third"><divclass="second"></div><divclass="first"></div><divclass="mask"><span>68%</span></div></div>.third*{position:absolute;top:0;right:0;bottom:0;left:0;}这样圆就是在中心了.mask>span{display:block;font-size:44px;color:white;line-height:150px;}
使用CSS实现简单的图片切换（轮播图）预览图如下：一:首先创建基本布局1：创建一个div容器，里面的ul与ol标签分别对应轮播图片和下方圆点；二：添加CSS样式1：为图片与圆点添加相应样式，使其正常显示；标题2：为图片和圆点添加动画样式；一:首先创建基本布局1：创建一个div容器，里面的ul与ol标签分别对应轮播图片和下方圆点；<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><linkrel="stylesheet"href="css/style.css"><title>css轮播</title></head><body><divclass="container"><ul><li><imgsrc="./img/1.jpg"alt=""></li><li><imgsrc="./img/2.jpg"alt=""></li><li><imgsrc="./img/3.jpg"alt=""></li></ul><ol><li></li><li></li><li></li></ol></div></body></html>二：添加CSS样式1：为图片与圆点添加相应样式，使其正常显示；*{padding:0;margin:0;box-sizing:border-box;}li{list-style:none;float:left;}ulimg{width:960px;height:auto;}.container{width:960px;//容器大小要和图片大小保持一致。height:544px;margin:50pxauto0;overflow:hidden;position:relative;border:1pxsolidblack;}ol{position:absolute;bottom:0;left:50%;padding:10px;margin-left:-50px;z-index:999;}olli{width:25px;height:25px;background-color:#fff;border:1pxsolidred;border-radius:50%;margin:010px;}标题2：为图片和圆点添加动画样式；.containerul{animation:Yui3scubic-bezier(0,1,0,1)1sinfinite;width:400%;}@keyframesYui{0%{transform:translateX(0px);}33%{transform:translateX(-960px);}66%{transform:translateX(-1920px);}100%{transform:translateX(0px);}}olli{animation:focus3slinearinfinite;//时间要和图片保持一致}olli:nth-child(1){animation-delay:0s;}olli:nth-child(2){animation-delay:1s;}olli:nth-child(3){animation-delay:2s;}@keyframesfocus{0%{background-color:#000;}20%{background-color:#000;}30%{background-color:#fff;}}
效果图：一、使用css实现梯形html：<divclass="div">这是一个梯形</div>做法：通过tansform属性的perspective和rotateX，实现梯形（声明的顺序不能错）。rotateX是将物体以X轴为旋转轴，进行旋转。css代码如下.div{width:100px;height:100px;background:green;transform:perspective(.5em)rotateX(5deg);transform-origin:bottom;}
http://www.animate.net.cn/ Animate中文网http://ianlunn.github.io/Hover/ Hover.csshttps://two.js.org/examples/ Two.jshttps://www.swiper.com.cn/demo/index.html Swiper中文网http://www.100sucai.com/tag/75/ 100素材网
1、单行文本省略：overflow:hidden;//溢出隐藏white-space:nowrap;//禁止换行text-overflow:ellipsis;//...2、多行文本省略：display:-webkit-box;//谷歌-webkit-box-orient:vertical;-webkit-line-clamp:3;//显示几行overflow:hidden;注：英文自动换行：word-wrap:break-word;word-break:break-all;3、Vue中实现鼠标移入，省略号的内容全部显示：（1）Vue的ElementUI组件<p>{{item.title}}</p>改为：//法1<el-tooltip:content="item.title"placement="top-start"><p>{{item.title}}</p></el-tooltip>//悬浮层显示全部内容//法2<p:title="item.title">{{item.title}}</p>（2）Table表格<el-table-columnprop="name"label="姓名":show-overflow-tooltip="true">//:show-overflow-tooltip="true"//悬浮层显示全部内容4、html实现省略号全部显示：<divtitle="11111">11111</div>//title属性（title的内容与该内容相同）悬浮层显示全部内容5、css实现省略号全部显示：设置:hoverh4{overflow:hidden;//溢出隐藏white-space:nowrap;//禁止换行text-overflow:ellipsis;//...}h4:hover{width:200px;overflow:visible;white-space:pre-line;cursor:pointer;}
一张清晰漂亮的背景图片能给网页加分不少，设计师也经常会给页面的背景使用大图，我们既不想图片因为不同分辨率图片变形，也不希望当在大屏的情况下，背景有一块露白，简而言之，就是实现能自适应屏幕大小又不会变形的背景大图，而且背景图片不会随着滚动条滚动而滚动。因此，今天我们将与你分享3种CSS实现背景图图片全屏铺满自适应的方式，希望对你有所帮助。01margin:0px;background:url(images/bg.png)no-repeat;background-size:100%100%;background-attachment:fixed;url(images/beijing.png)——图片路径的位置；no-repeat——图片不重复；center0px——center是距离页面左边的定位，0px是距离页面上面的定位；background-position:center0——就是图片的定位，同上；background-size:cover;——把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中；min-height:100vh;——视窗的高度，“视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小。02background:url("bg.png")no-repeat;height:100%;width:100%;overflow:hidden;background-size:cover;//或者background-size:100%;03给body标签指定背景图，这样背景图就可以填充整个浏览器viewport了。其实，该方案对所有的块级容器都可以生效。块级容器的宽高是动态的，那么背景图将自动伸缩，充满整个容器。cssbody标签的样式如下：body{/*加载背景图*/background-image:url(images/bg.jpg);/*背景图垂直、水平均居中*/background-position:centercenter;/*背景图不平铺*/background-repeat:no-repeat;/*当内容高度大于图片高度时，背景图像的位置相对于viewport固定*/background-attachment:fixed;/*让背景图基于容器大小伸缩*/background-size:cover;/*设置背景颜色，背景图加载过程中会显示背景色*/background-color:#464646;}总结以上就是我今天与你分享的内容，如果你觉得有帮助，请记得分享给你的朋友，也许能够帮助到他。最后，感谢你的阅读，记得常来站三界导航哦！
html+css可以很方便的进行网页的排版布局，还能减少很多不必要的代码。一.文本设置1、font-size:字号参数 2、font-style:字体格式3、font-weight:字体粗细4、颜色属性color:参数注意使用网页安全色二、超链接设置text-decoration:参数主要用途是改变浏览器显示文字链接时的下划线。 参数取值范围： underline：为文字加下划线 overline：为文字加上划线 line-through：为文字加删除线 blink：使文字闪烁 none：不显示上述任何效果三、背景1、背景颜色background-color:参数2、背景图片background-image:url(URL)URL就是背景图片的存放路径，none表示无。3、背景图片重复background-repeat:参数参数取值范围：no-repeat：不重复平铺背景图片repeat-x：使图片只在水平方向上平铺repeat-y：使图片只在垂直方向上平铺如果不指定背景图片重复属性，浏览器默认的是背景图片向水平、垂直两个方向上平铺。4、背景图片固定背景图片固定控制背景图片是否随网页的滚动而滚动。如果不设置背景图片固定属性，浏览器默认背景图片随网页的滚动而滚动。为了避免过于花哨的背景图片在滚动时转移浏览者的注意力，一般都设为固定background-attachment:参数 参数取值范围：fixed：网页滚动时，背景图片相对于浏览器的窗口而言，固定不动scroll：网页滚动时，背景图片相对于浏览器的窗口而言，一起滚动四、区块1、单词间距 word-spacing:间隔距离 2、字母间距 letter-spacing:字母间距3、文本对齐text-align:参数参数的取值：left：左对齐right：右对齐center：居中对齐justify：相对左右对齐4、垂直对齐vertical-align:参数top：顶对齐bottom：底对齐text-top：相对文本顶对齐text-bottom：相对文本底对齐baseline：基准线对齐middle：中心对齐sub：以下标的形式显示super：以上标的形式显示5、文本缩进text-indent:缩进距离12px相当于一个文字距离6、空格white-space:参数normal正常pre保留nowrap不换行7、显示样式 display:参数 参数取值范围： block：块级元素，在对象前后都换行 inline：在对象前后都不换行 list-item：在对象前后都换行，增加了项目符号 none：无显示五、方框1、height高度2、width宽度3、padding内边距4、margin外边距5、float（浮动）：可以让块级元素在一行中排列，例如横向菜单。 6、clear清除浮动六、边框1、样式borderstyle参数边框样式的参数：none：无边框 dotted：边框为点线dashed：边框为长短线solid：边框为实线double：边框为双线2、宽度borderwidth参数3、颜色bordercolor参数七、列表list-style-type列表样式不同浏览器的列表符可能不相同，可能会影响到网页，所以网页中的列表大多都是由背景图片显示。控制用户界面的样式八、鼠标cursor：鼠标形状参数 CSS鼠标形状参数表： 鼠标形状：CSS代码style="cursor:hand" 手形style="cursor:crosshair" 十字形style="cursor:text" 文本形style="cursor:wait" 沙漏形style="cursor:move" 十字箭头形：style="cursor:help" 问号形style="cursor:e-resize" 右箭头形style="cursor:n-resize" 上箭头形style="cursor:nw-resize" 左上箭头形style="cursor:w-resize" 左箭头形style="cursor:s-resize" 下箭头形 style="cursor:se-resize" 右下箭头形 style="cursor:sw-resize" 左下箭头形
核心的方式是通过一张背景图中position从左到右移动，然后transition中steps控制帧率来实现效果。steps：阶跃函数，参数一是把这次过渡分成几段。在这里相隔固定动画时间，采用一段图像，调整图片长宽，保持每张小图相同的间距，调整合适的steps值就可以实现动画的效果。点赞的图完全可以自己用PS制作。html<divclass="box"></div>css.box{width:50px;height:50px;background:url(./dianzan.png)no-repeat;background-position:left;background-size:cover;}.boxactive{background-position:right;transition:background.6ssteps(28);//根据图片有多少帧，比如我这张图片有29张小图，那就是填28}boxactive这个属性可以点击之后动态增删，就可以达到效果，图片：
中国互联网举报中心