1.整个div360度旋转<styletype="text/css">.div3{position:absolute;z-index:3;left:40px;top:40px;font-weight:bold;background:red;animation:myfirst215sinfinitelinear;}@keyframesmyfirst2{from{transform:rotate(0deg);}to{transform:rotate(359deg);}}@keyframesmyfirst{from{transform:rotate(0deg);}to{transform:rotate(-359deg);}}</style><divclass="div3">旋转吧</div>效果图：2.div内的文字不动，底边的图片旋转<html><head><styletype="text/css">body{background:#000a2d;}.div2{position:absolute;z-index:2;left:40px;top:40px;font-weight:bold;height:400px;width:400px;animation:myfirst215sinfinitelinear;}.div3{position:absolute;z-index:3;left:11%;top:22%;font-weight:bold;color:#fff;background:red;}@keyframesmyfirst2{from{transform:rotate(0deg);}to{transform:rotate(359deg);}}@keyframesmyfirst{from{transform:rotate(0deg);}to{transform:rotate(-359deg);}}</style></head><body><divclass="div3">最上层</div><divclass="div2"><imgsrc="./centerBg3.png"style="width:100%;height:100%;"></div></body></html>效果
页面基本节点写好：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><linkhref="./style.css"rel="styleSheet"type="text/css"/></head><body><div><aclass="btnbtn-1">按钮一</a><aclass="btnbtn-2">按钮二</a><aclass="btnbtn-3">按钮三</a></div></body></html>先对样式reset，并写好基础按钮样式.btn：*{margin:0;padding:0;box-sizing:border-box;}div{margin:10%;}a{outline:0;text-decoration:none;cursor:pointer;}.btn{padding:10px16px;background:#00a1d6;box-shadow:04px4pxrgba(127,127,127,.3);display:inline-block;color:#fff;font-size:16px;border-radius:4px;transition:all0.2s;margin:20px;}方法一：变色CSS.btn-1:hover{background:#00b5e5;}方法二：高光CSS.btn-2:hover{filter:brightness(1.1);}注：打高光比找变色简单，效果十分近似，但在很特殊的情况下，会影响到子节点带filter：invert()的元素，会使反色受到影响。方法三：可见度CSS.btn-3{opacity:.8;}.btn-3:hover{opacity:1;}
如同上方图片左上角的爆款，实现斜边框需要用到定位，首先将外层的div设置为position：relative爆款代码如下：position:absolute;z-index:999;left:0;top:0;background:#fd3a51;line-height:20px;padding:06px08px;color:#fff;font-size:0.75rem;text-align:center;这时显示的是一个正常的长方形边框再使用：after伪类添加内容content:'';position:absolute;top:0;right:-8px;//下面为关键代码border-width:20px8px;border-style:solid;border-color:#fd3a51transparenttransparenttransparent;
cursor:pointer;鼠标变小手cursor其他取值auto：标准光标default：标准箭头pointer,hand：手形光标wait：等待光标text：I形光标vertical-text：水平I形光标no-drop：不可拖动光标not-allowed：无效光标help：帮助光标all-scroll：三角方向标move：移动标crosshair：十字标
效果如下图所示：代码如下：结构层<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>CSS实现毛玻璃效果</title></head><body><divclass="box"><h2>一个毛玻璃效果</h2></div></body></html>样式层body,.box::before{height:2000px;background:url('1.jpg')0/coverfixed;background-repeat:no-repeat;background-size:2000px;}h2{text-align:center;line-height:300px;}.box{width:800px;height:400px;position:relative;margin:200pxauto;background:hsla(0,0%,0%,.25)border-box;border-radius:5px;overflow:hidden;box-shadow:0001pxhsl(0deg0%100%/30%)inset,00.5em1emrgb(000/60%);text-shadow:01px1pxhsla(0,0%,100%,.3);}.box::before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;filter:blur(20px);}
磨砂玻璃效果已经在互联网上流行了很多年，MacOS以其磨砂玻璃效果而闻名，Windows10也通过其他一些灯光，深度，运动，材质，比例尺实现了磨砂玻璃的效果在CSS中使用磨砂玻璃效果时，我们中的一些人知道该怎么做，而其他人仍会在百度搜索：怎么做？？“css光泽效果”“css毛玻璃”“透明模糊背景css”“毛玻璃效果photoshop”“仅cs模糊背景”“css玻璃窗格”“css背景滤镜”“css模糊覆盖物”“cssdiv后面的模糊背景”今天，我将展示仅CSS的一种方法，教你可以使用该方法在CSS中进行磨砂玻璃效果。1，创建一个HTML标记为简单起见，我将向你展示如何在空的div上制作磨砂玻璃效果。因此，HTML中所需的只是一个空的div。<div></div>2.重置浏览器默认样式*{margin:0;padding:0;}3.添加背景图片我们需要我们的背景占据页面的整个宽度和高度，并且我们不想重复我们的背景，我们也希望我们的背景是固定的。我们希望背景是固定的，因为我们不希望以后在继承背景时将整个背景显示在div中。body{background-image:url(http://bit.ly/2gPLxZ4);//add""ifyouwantbackground-repeat:no-repeat;background-attachment:fixed;background-size:cover;}4.现在给Div一些样式现在，我们将使用背景继承为div设置一些宽度和高度。我们还需要确定绝对位置，以确保叠加层不会占用网页的整个宽度和高度div{background:inherit;width:250px;height:350px;position:absolute;}5，固定和不固定附件的示例现在，我们知道在固定了背景附件的情况下，我们只能看到div后面的div内部的背景图像区域，而这正是我们希望毛玻璃效果起作用的地方6，现在我们需要创建一个覆盖层我们需要content:“”确保之前的伪类能够正常工作。我们还从其父级继承了背景，并且我们使用绝对位置将其在其父元素DIV中对齐。我们正在使用盒子阴影添加白色透明叠加层，并且正在使用模糊来模糊该叠加层。div:before{content:“”;background:inherit;position:absolute;left:0;right:0;top:0;bottom:0;box-shadow:inset0003000pxrgba(255,255,255,0.3);filter:blur(10px);}7，修复DIV的不模糊边缘现在，我们需要修复div的未模糊边缘，为此，我们需要增加叠加层的尺寸，使其比其父尺寸稍高一些，然后将其上下位置设为负（-25）。我们还需要给它的父对象提供隐藏的溢出，以确保父DIV之外的任何覆盖都不会显示并被隐藏。div{background:inherit;width:250px;height:350px;position:absolute;overflow:hidden;//addingoverflowhidden}div:before{content:‘’;width:300px;height:400px;background:inherit;position:absolute;left:-25px;//givingminus-25pxleftpositionright:0;top:-25px;//givingminus-25pxtoppositionbottom:0;box-shadow:inset000200pxrgba(255,255,255,0.3);filter:blur(10px);}到这里，我们就实现了CSS的磨砂玻璃效果你还可以使用CSS属性“backdrop-filter:blur(20px)”来实现此效果，该属性在工作方面要容易得多，并且是更好的选择，但兼容性还不是很强。
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;}}
中国互联网举报中心