网站做优化的都是希望搜索引擎蜘蛛可以快速抓取，这些大家都是希望的。但是蜘蛛抓取SEO网站的基本规则又是怎样的?第一：高质量内容 网站高质量内容永远是搜索引擎蜘蛛抓取的首选。不管是谷歌还是百度，高质量的东西都是搜索引擎争抢的热点。还有就是蜘蛛和用户一样都是很喜欢新的东西，很久没有更新的网站内容，对搜索引擎蜘蛛没有丝毫吸引力。因此蜘蛛只会索引到网站，但不会把网站内容放进数据库。所以必要的高质量的内容是SEO网站必须具备的。高质量还要每天更新，不然每天都是那个就没有来看的意义了。第二：高质量外链 想要让搜索引擎给网站分多些权重，那就要明白搜索引擎在分辨网站权重时，会考虑到在其他网站中会有多少链接是链接到这个网站的，外链中的质量怎样，外链数据怎样，外链网站的相关性怎样，这些因素都是百度要考虑的。一个权重高的网站外链质量也应该是很高，假若外链的质量达不上，权重值也不会上的去。所以站长想提高网站权重值，就要注意提升网站的外链质量。这些都是很重要的，要注意在链接外链的时候要注意外链的质量问题。第三：高质量的内链 百度权重值不仅要看网站的内容，还有个标准就是网站的内链的建造，百度搜索引擎在查看网站时，会顺着网站的导航，网站的内页锚文本链接等进入网站的内页。网站的导航栏能适宜的找到网站的其他内容，最新网站内容中应该有相关的锚文本链接，这不仅便于蜘蛛的抓取，也能减少网站的跳出率。所以网站的内部链接也同样重要，要是把网站的内部链接做的好的话，蜘蛛在收录你的网站的时候会因为你的链接不仅仅收录一个你的网页，还可以收录相连的页面。第四：高质量的空间 空间对于网站来说就是门槛，假若你的门槛过高蜘蛛都进不来，那它怎样查看你的网站，给你网站分辨权重值呢?这里的门槛过高是什么意思呢?就是空间不稳定，服务器常常掉线，这样的话网站的访问速度是个大难题。如果蜘蛛过来抓取网页时，网站经常打不开，那么下次它就会减少对网站的检查。因此空间是网站上线之前最重要的，就要考虑的难题，空间独立的IP，访问速度会快点，主机商效力能否给力等，都是需要详细的规划的。要保证你网站的空间稳定，能快速的打开，不要半天还没打开。这样对蜘蛛收录和用户使用都是一个大问题。
Thinkphp下开启gzip压缩很简单，不管你是哪个版本，只要在你的入口文件index.PHP中加入以下两行，如果你的服务器支持，那么就OK了。define("GZIP_ENABLE",function_exists('ob_gzhandler'));ob_start(GZIP_ENABLE?'ob_gzhandler':null);例如：thinkphp3.0开启gzip压缩<?phpdefine('APP_NAME','admin');define('APP_PATH','./admin/');define('APP_DEBUG',true);define("GZIP_ENABLE",function_exists('ob_gzhandler'));ob_start(GZIP_ENABLE?'ob_gzhandler':null);require'./ThinkPHP/ThinkPHP.php';可以访问站长之家检查是否启用成功
效果图：@keyframesmovepoint{25%{top:16px}100%{top:50px}}.shade-button-point{display:inline-block;position:absolute;top:50px;left:30%;animation:movepoint2sinfinite;-webkit-animation:movepoint2sinfinite;}
发表文章时,需要上传图片,很多内容编辑器对图片的处理是居左显示的吧.另外,如果是响应式的html5网站,还存在一个图片宽度太宽显示不全的问题.HTML<divclass=“detail”>这里是内容及图片</div>CSS样式可以如下写法.如果担心在电脑上浏览时,图片过大撑破页面,可以增加一个类似这种样式.max-width:650px.detailimg{display:block;margin:0auto;padding:10px;max-width:650px}/以下为兼容手机代码/@media(max-width:760px){.detailimg{max-width:100%;height:auto;width:auto\9;}}
大家好，本篇文章将分享我们业务中很常见的10个页面布局代码片段，这10种页面布局很常见，实现方式也有很多种，本篇文章将用最简单的新方式进行实现，希望对大家有所启发。1、Cardlayout（卡片布局）如下图所示，卡片布局是我们常见的一种页面布局。HTML部分<divclass="cards"><!--需分配宽度给卡片单元格--><divclass="cards__item">...</div><!--?此处重复多个?cards__item?卡片单元格-->...</div>CSS部分.cards{display:flex;/*超出容器宽度自动换行*/flex-wrap:wrap;margin-left:-8px;margin-right:-8px;}.cards__item{/*初始化每个卡片的宽度，占据父容器的1/4*/flex-basis:25%;padding-left:8px;padding-right:8px;}2、Holygrail（圣杯布局）圣杯布局，不用我多说，想必每个前端人都做过这样的页面结构，如下图所示HTML部分<divclass="container"><!--顶部--><header>...</header><mainclass="container__main"><!--左边导航--><aside?class="container__left">...</aside><!--中部--><article?class="container__middle">...</article><!--右边导航--><navclass="container__right">...</nav></main><!--底部--><footer>...</footer></div>CSS部分.container{display:flex;flex-direction:?column;}.container__main{/*占据剩余的高度部分*/flex-grow:?1;/*左中右使用弹性盒子布局，行方式显示*/display:flex;flex-direction:row;}.container__left{width:25%;}.container__middle{/*自动占据剩余的宽度部分*/flex-grow:1;}.container__right{width:20%;}3、Masonrygrid（简单的瀑布流）瀑布流也是一种很常见的布局，尤其是在图片信息流的产品，以往如果要完美的实现瀑布流，我们需要费不少的功夫，还要借助JS进行实现。本案例，将使用column-count这个属性，进行实现。HTML部分<divclass="masonry-grid"><!--内容单元格?--><divclass="masonry-grid__item">...</div><!--重复内容单元格--></div>CSS部分.masonry-grid{/*三个单元格*/column-count:3;/*每个单元格的距离*/column-gap:1rem;/*容器宽度*/width:100%;}.masonry-grid__item{/*不允许内容溢出到其他单元格*/break-inside:avoid;margin-bottom:1rem;}4、Sameheightcolumns（相同高度的列）布局相同高度的列，也是我们业务中常见的需求，如下图所示：HTML部分<div?class="container"><!--?单元格-列?--><div?class="container__column"><!--?内容封面?-->...<!--文字内容内容--><div?class="container__content">...</div><!--固定在底部的列-->...</div><!--重复单元格布局container__column-->...</div>CSS部分.container{display:flex;}.container__column?{flex:1;/*定于每列间隔的空间*/margin:08px;/*内容部分列布局*/display:flex;flex-direction:column;}.container__content{/*内部部分占据剩余的高度部分*/flex:1;}5、Sidebar（侧边导航栏）两列布局，左边是导航栏目，右边是内容部分。尤其在后台的场景，是非常常用的。如下图所示：HTML部分<divclass="container"><!--测导航--><asideclass="container__sidebar">...</aside><!--?内容部分?--><mainclass="container__main">...</main></div>CSS部分.container{display:flex;}.container__sidebar{width:30%;}.container__main{/*占据剩余的宽度*/flex:1;/*超出显示滚动条*/overflow:auto;}6、简单的网格布局接下来我们使用弹性布局的方式，灵活实现网格布局，如下图所示：HTML部分<divclass="row"><!--只占据指定父容器宽度的25%--><div?class="row__cellrow__cell--1-4">25%</div><!--占据剩余宽度空间--><divclass="row__cellrow__cell--fill">...</div></div>css部分.row{display:flex;margin-left:-8px;margin-right:-8px;}.row__cell{padding-left:8px;padding-right:8px;}/*在给定的容器内占据宽度的25%，不再与剩余的元素争夺空间*/.row__cell--1-4{flex:0025%;}/*占据剩余容器的宽度*/.row__cell--fill{flex:1;}7、Splitscreen（平分屏幕）类似在IPAD上的分屏业务场景，两个应用平分屏幕进行显示，如下图所示：HTML部分<divclass="container"><!--左部分--><divclass="container__half">...</div><!--右部分--><divclass="container__half">...</div></div>CSS部分.container{display:flex;}.container__half{flex:1;}8、Stickyfooter（底部吸附效果）在网页设计中，Stickyfooters设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。如下图所示：HTML部分<divclass="container"><header?class="container__header">...</header><mainclass="container__main">...</main><footerclass="container__footer">...</footer></div>CSS部分.container{display:flex;flex-direction:column;height:100%;}.container__header,.container__footer{flex-shrink:0;}.container__main{flex-grow:1;}9、Stickyheader（顶部吸附固定）在实际业务中经常碰到页头固定在浏览器的顶部，如下图所示：HTML部分<div><header?class="header">...</header><main>...</main></div>CSS部分.header{/*顶部吸附*/position:sticky;top:0;}10、Stickysections（内容吸附）内容区域的吸附效果也是一种很常见的效果，如下图所示：HTML部分<divclass="container"><section?class="container__section">...</section><!--Repeatothersections-->...</div>CSS部分.container{height:100%;overflow:?scroll;}.container__section{/*占满容器*/height:100%;width:100%;/*吸附顶部*/position:sticky;top:0;}结束今天的文章就分享到这里，希望对你日常的业务有所帮助，感谢你的阅读。
本文介绍几个常见的鼠标悬停效果。这几个效果比较相近，主要是当鼠标移到和移出按钮时，按钮边框颜色或阴影的变化效果。下面是一个按钮的悬停效果的CSS和HTML代码，代码并不多，并且不需要用到高深的技术。CSS.button{flex:11auto;margin:10px;padding:20px;border:2pxsolid#f7f7f7;text-align:center;text-transform:uppercase;position:relative;overflow:hidden;transition:0.3s;}.button:after{position:absolute;transition:0.3s;content:"";width:0;left:50%;bottom:0;height:3px;background:#f7f7f7;}.button:hover{cursor:pointer;}.button:hover:after{width:100%;left:0;}HTML<divclass="button">Center->out</div>效果代码解释.button:after是CSS的伪元素，是按钮的初始样式。transition:0.3s;是动画速度。content:"";表示填充内容为空。left:50%;表示位置在中间。bottom:0;这是位置定位，在div底部。.button:hover:after是鼠标移到按钮上时的样式。width:100%;表示鼠标移到按钮上时宽度变为100%。left:0;位置定位，在div左边。完整css代码body{background:linear-gradient(135deg,#55efcb0%,#1e57990%,#55efcb0%,#5bcaff100%);color:#f7f7f7;font-family:"Lato",sans-serif;font-weight:300;}.container{display:flex;justify-content:center;align-items:center;align-content:center;flex-wrap:wrap;width:60vw;max-width:1200px;margin:0auto;min-height:100vh;}.button{flex:11auto;margin:10px;padding:20px;border:2pxsolid#f7f7f7;text-align:center;text-transform:uppercase;position:relative;overflow:hidden;transition:0.3s;}.button:after{position:absolute;transition:0.3s;content:"";width:0;left:50%;bottom:0;height:3px;background:#f7f7f7;}.button:nth-of-type(2):after{left:0;}.button:nth-of-type(3):after{right:0;left:auto;}.button:nth-of-type(4):after{left:0;bottom:auto;top:-3px;width:100%;}.button:nth-of-type(5):after{height:120%;left:-10%;transform:skewX(15deg);z-index:-1;}.button:hover{cursor:pointer;}.button:hover:after{width:100%;left:0;}.button:hover:nth-of-type(4):after{top:calc(100%-3px);}.button:hover:nth-of-type(5){color:#5bcaff;}.button:hover:nth-of-type(5):after{left:-10%;width:120%;}.button:hover:nth-of-type(6){border-radius:30px;}.button:hover:nth-of-type(6):after{width:0%;}.button:hover:nth-of-type(7){transform:scale(1.2);}.button:hover:nth-of-type(7):after{width:0%;}.button:hover:nth-of-type(8){box-shadow:inset0px0px0px3px#f7f7f7;}.button:hover:nth-of-type(8):after{width:0%;}.button:hover:nth-of-type(9){box-shadow:0px0px0px3px#f7f7f7;}.button:hover:nth-of-type(9):after{width:0%;}完整html代码<html><body><divclass="container"><divclass="button">Center->out</div><divclass="button">Left->Right->Left</div><divclass="button">Left->Right->Right</div><divclass="button">Top->Bottom->Top</div><divclass="button">SkewFillLeft->Right</div><divclass="button">RoundedCorners</div><divclass="button">Scale</div><divclass="button">Border(InnerShadow)</div><divclass="button">Border(OuterShadow)</div></div></body></html>
效果展示：源码展示：HTML<!doctypehtml><html><head><metacharset="utf-8"><title>纯CSS3实现鼠标悬停多种效果</title></head><body><divid="box"><divid="box1"><divid="hd"></div><divid="timg"><span>玩转CSS3特效</span></div><pid="p1">小明到</p></div><divid="box2"><divid="hd2"></div><divid="timg2"><span>玩转CSS3特效</span></div><pid="p2">小明到</p></div><divid="box3"><divid="hd3"><h2>小明到</h2></div><divid="timg3"><span>玩转CSS3特效</span></div></div><divid="box4"><divid="hd4"><h2>小明到</h2></div><divid="timg4"><span>玩转CSS3特效</span></div></div></div></body></html>CSS*{margin:0px;padding:0px;}#box{width:470px;height:370px;border:1pxsolidblue;margin:30pxauto;padding:5px;box-shadow:2px2px2pxgreen;border-radius:8px;background:#7FEB8E;opacity:0.8;}#box1{width:190px;height:140px;border:0pxsolid#ccc;margin:5px;position:relative;background:#E9710E;overflow:hidden;}/*用于放置img的div*/#timg{width:190px;height:140px;border:0pxsolidred;}#box1#hd{width:186px;height:136px;border:3pxsolidwhite;position:absolute;top:-148px;left:0px;background:#E2DB4D;transform:rotateX(270deg);transition:all0.5sease-in-out;}#box1p{display:block;position:absolute;top:150px;left:48px;font-weight:bold;transition:all0.5sease-in-out;}span{position:absolute;top:50px;left:46px;text-shadow:2px2px5px#ccc;}#box1:hover#p1{top:100px;}#box1:hover#hd{transform:translate(0px,147px);}/**---------------------------------------------------*/#box2{width:190px;height:140px;border:0pxsolid#ccc;margin:5px;position:relative;left:270px;top:-145px;background:#E9710E;overflow:hidden;}#timg2{width:190px;height:140px;border:0pxsolid#7FBEED;}#hd2{width:185px;height:135px;border:3pxsolidwhite;background:#E2DB4D;position:absolute;top:0px;left:-198px;transition:all0.3sease-in-out;}#p2{width:145px;font-weight:bold;text-align:center;position:absolute;top:140px;left:23px;transition:all0.3sease-in-out;}#box2:hover#hd2{transform:translate(198px,0px);}#box2:hover#p2{transform:translate(0px,-40px);}/*--------------------------------------*/#box3{width:190px;height:140px;border:0pxsolid#ccc;margin:5px;position:relative;left:0px;top:-80px;background:#E9710E;overflow:hidden;}#timg3{width:189px;height:139px;border:1pxsolid#ccc;}#hd3{width:186px;height:135px;border:3pxsolidwhite;background:#E2DB4D;position:absolute;transform:rotateX(270deg);transition:all0.3sease-in-out;}#p3{width:145px;font-weight:bold;text-align:center;position:absolute;top:140px;left:23px;transition:all0.3sease-in-out;}#box3:hover#hd3{transform:rotateX(360deg);}/*------------------------------------*/#box4{width:190px;height:140px;border:0pxsolid#ccc;margin:5px;position:relative;left:270px;top:-225px;background:#E9710E;overflow:hidden;}#timg4{width:190px;height:140px;border:1pxsolid#7FBEED;}#hd4{width:185px;height:135px;border:3pxsolidwhite;background:#E2DB4D;position:absolute;/*透明度设置为0隐藏滑动div*/opacity:0;transition:all0.6sease-in-out;}#box4:hover#hd4{opacity:1;transform:rotate(360deg);}
效果图html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>CSS按钮悬停效果</title><linkrel="stylesheet"href="./style.css"></head><body><divclass="frame"><buttonclass="custom-btnbtn-1">ReadMore</button><buttonclass="custom-btnbtn-2">ReadMore</button><buttonclass="custom-btnbtn-3"><span>ReadMore</span></button><buttonclass="custom-btnbtn-4"><span>ReadMore</span></button><buttonclass="custom-btnbtn-5"><span>ReadMore</span></button><buttonclass="custom-btnbtn-6"><span>ReadMore</span></button><buttonclass="custom-btnbtn-7"><span>ReadMore</span></button><buttonclass="custom-btnbtn-8"><span>ReadMore</span></button><buttonclass="custom-btnbtn-9">ReadMore</button><buttonclass="custom-btnbtn-10">ReadMore</button><buttonclass="custom-btnbtn-11">ReadMore<divclass="dot"></div></button><buttonclass="custom-btnbtn-12"><span>Click!</span><span>ReadMore</span></button><buttonclass="custom-btnbtn-13">ReadMore</button><buttonclass="custom-btnbtn-14">ReadMore</button><buttonclass="custom-btnbtn-15">ReadMore</button><buttonclass="custom-btnbtn-16">ReadMore</button></div></body></html>css复制对应序号的按钮样式即可body{background:#e0e5ec;}h1{position:relative;text-align:center;color:#353535;font-size:50px;font-family:"CormorantGaramond",serif;}p{font-family:'Lato',sans-serif;font-weight:300;text-align:center;font-size:18px;color:#676767;}.frame{width:90%;margin:40pxauto;text-align:center;}button{margin:20px;}.custom-btn{width:130px;height:40px;color:#fff;border-radius:5px;padding:10px25px;font-family:'Lato',sans-serif;font-weight:500;background:transparent;cursor:pointer;transition:all0.3sease;position:relative;display:inline-block;box-shadow:inset2px2px2px0pxrgba(255,255,255,.5),7px7px20px0pxrgba(0,0,0,.1),4px4px5px0pxrgba(0,0,0,.1);outline:none;}/*1*/.btn-1{background:rgb(6,14,131);background:linear-gradient(0deg,rgba(6,14,131,1)0%,rgba(12,25,180,1)100%);border:none;}.btn-1:hover{background:rgb(0,3,255);background:linear-gradient(0deg,rgba(0,3,255,1)0%,rgba(2,126,251,1)100%);}/*2*/.btn-2{background:rgb(96,9,240);background:linear-gradient(0deg,rgba(96,9,240,1)0%,rgba(129,5,240,1)100%);border:none;}.btn-2:before{height:0%;width:2px;}.btn-2:hover{box-shadow:4px4px6px0rgba(255,255,255,.5),-4px-4px6px0rgba(116,125,136,.5),inset-4px-4px6px0rgba(255,255,255,.2),inset4px4px6px0rgba(0,0,0,.4);}/*3*/.btn-3{background:rgb(0,172,238);background:linear-gradient(0deg,rgba(0,172,238,1)0%,rgba(2,126,251,1)100%);width:130px;height:40px;line-height:42px;padding:0;border:none;}.btn-3span{position:relative;display:block;width:100%;height:100%;}.btn-3:before,.btn-3:after{position:absolute;content:"";right:0;top:0;background:rgba(2,126,251,1);transition:all0.3sease;}.btn-3:before{height:0%;width:2px;}.btn-3:after{width:0%;height:2px;}.btn-3:hover{background:transparent;box-shadow:none;}.btn-3:hover:before{height:100%;}.btn-3:hover:after{width:100%;}.btn-3span:hover{color:rgba(2,126,251,1);}.btn-3span:before,.btn-3span:after{position:absolute;content:"";left:0;bottom:0;background:rgba(2,126,251,1);transition:all0.3sease;}.btn-3span:before{width:2px;height:0%;}.btn-3span:after{width:0%;height:2px;}.btn-3span:hover:before{height:100%;}.btn-3span:hover:after{width:100%;}/*4*/.btn-4{background-color:#4dccc6;background-image:linear-gradient(315deg,#4dccc60%,#96e4df74%);line-height:42px;padding:0;border:none;}.btn-4:hover{background-color:#89d8d3;background-image:linear-gradient(315deg,#89d8d30%,#03c8a874%);}.btn-4span{position:relative;display:block;width:100%;height:100%;}.btn-4:before,.btn-4:after{position:absolute;content:"";right:0;top:0;box-shadow:4px4px6px0rgba(255,255,255,.9),-4px-4px6px0rgba(116,125,136,.2),inset-4px-4px6px0rgba(255,255,255,.9),inset4px4px6px0rgba(116,125,136,.3);transition:all0.3sease;}.btn-4:before{height:0%;width:.1px;}.btn-4:after{width:0%;height:.1px;}.btn-4:hover:before{height:100%;}.btn-4:hover:after{width:100%;}.btn-4span:before,.btn-4span:after{position:absolute;content:"";left:0;bottom:0;box-shadow:4px4px6px0rgba(255,255,255,.9),-4px-4px6px0rgba(116,125,136,.2),inset-4px-4px6px0rgba(255,255,255,.9),inset4px4px6px0rgba(116,125,136,.3);transition:all0.3sease;}.btn-4span:before{width:.1px;height:0%;}.btn-4span:after{width:0%;height:.1px;}.btn-4span:hover:before{height:100%;}.btn-4span:hover:after{width:100%;}/*5*/.btn-5{width:130px;height:40px;line-height:42px;padding:0;border:none;background:rgb(255,27,0);background:linear-gradient(0deg,rgba(255,27,0,1)0%,rgba(251,75,2,1)100%);}.btn-5:hover{color:#f0094a;background:transparent;box-shadow:none;}.btn-5:before,.btn-5:after{content:'';position:absolute;top:0;right:0;height:2px;width:0;background:#f0094a;box-shadow:-1px-1px5px0px#fff,7px7px20px0px#0003,4px4px5px0px#0002;transition:400mseaseall;}.btn-5:after{right:inherit;top:inherit;left:0;bottom:0;}.btn-5:hover:before,.btn-5:hover:after{width:100%;transition:800mseaseall;}/*6*/.btn-6{background:rgb(247,150,192);background:radial-gradient(circle,rgba(247,150,192,1)0%,rgba(118,174,241,1)100%);line-height:42px;padding:0;border:none;}.btn-6span{position:relative;display:block;width:100%;height:100%;}.btn-6:before,.btn-6:after{position:absolute;content:"";height:0%;width:1px;box-shadow:-1px-1px20px0pxrgba(255,255,255,1),-4px-4px5px0pxrgba(255,255,255,1),7px7px20px0pxrgba(0,0,0,.4),4px4px5px0pxrgba(0,0,0,.3);}.btn-6:before{right:0;top:0;transition:all500msease;}.btn-6:after{left:0;bottom:0;transition:all500msease;}.btn-6:hover{background:transparent;color:#76aef1;box-shadow:none;}.btn-6:hover:before{transition:all500msease;height:100%;}.btn-6:hover:after{transition:all500msease;height:100%;}.btn-6span:before,.btn-6span:after{position:absolute;content:"";box-shadow:-1px-1px20px0pxrgba(255,255,255,1),-4px-4px5px0pxrgba(255,255,255,1),7px7px20px0pxrgba(0,0,0,.4),4px4px5px0pxrgba(0,0,0,.3);}.btn-6span:before{left:0;top:0;width:0%;height:.5px;transition:all500msease;}.btn-6span:after{right:0;bottom:0;width:0%;height:.5px;transition:all500msease;}.btn-6span:hover:before{width:100%;}.btn-6span:hover:after{width:100%;}/*7*/.btn-7{background:linear-gradient(0deg,rgba(255,151,0,1)0%,rgba(251,75,2,1)100%);line-height:42px;padding:0;border:none;}.btn-7span{position:relative;display:block;width:100%;height:100%;}.btn-7:before,.btn-7:after{position:absolute;content:"";right:0;bottom:0;background:rgba(251,75,2,1);box-shadow:-7px-7px20px0pxrgba(255,255,255,.9),-4px-4px5px0pxrgba(255,255,255,.9),7px7px20px0pxrgba(0,0,0,.2),4px4px5px0pxrgba(0,0,0,.3);transition:all0.3sease;}.btn-7:before{height:0%;width:2px;}.btn-7:after{width:0%;height:2px;}.btn-7:hover{color:rgba(251,75,2,1);background:transparent;}.btn-7:hover:before{height:100%;}.btn-7:hover:after{width:100%;}.btn-7span:before,.btn-7span:after{position:absolute;content:"";left:0;top:0;background:rgba(251,75,2,1);box-shadow:-7px-7px20px0pxrgba(255,255,255,.9),-4px-4px5px0pxrgba(255,255,255,.9),7px7px20px0pxrgba(0,0,0,.2),4px4px5px0pxrgba(0,0,0,.3);transition:all0.3sease;}.btn-7span:before{width:2px;height:0%;}.btn-7span:after{height:2px;width:0%;}.btn-7span:hover:before{height:100%;}.btn-7span:hover:after{width:100%;}/*8*/.btn-8{background-color:#f0ecfc;background-image:linear-gradient(315deg,#f0ecfc0%,#c797eb74%);line-height:42px;padding:0;border:none;}.btn-8span{position:relative;display:block;width:100%;height:100%;}.btn-8:before,.btn-8:after{position:absolute;content:"";right:0;bottom:0;background:#c797eb;/*box-shadow:4px4px6px0rgba(255,255,255,.5),-4px-4px6px0rgba(116,125,136,.2),inset-4px-4px6px0rgba(255,255,255,.5),inset4px4px6px0rgba(116,125,136,.3);*/transition:all0.3sease;}.btn-8:before{height:0%;width:2px;}.btn-8:after{width:0%;height:2px;}.btn-8:hover:before{height:100%;}.btn-8:hover:after{width:100%;}.btn-8:hover{background:transparent;}.btn-8span:hover{color:#c797eb;}.btn-8span:before,.btn-8span:after{position:absolute;content:"";left:0;top:0;background:#c797eb;/*box-shadow:4px4px6px0rgba(255,255,255,.5),-4px-4px6px0rgba(116,125,136,.2),inset-4px-4px6px0rgba(255,255,255,.5),inset4px4px6px0rgba(116,125,136,.3);*/transition:all0.3sease;}.btn-8span:before{width:2px;height:0%;}.btn-8span:after{height:2px;width:0%;}.btn-8span:hover:before{height:100%;}.btn-8span:hover:after{width:100%;}/*9*/.btn-9{border:none;transition:all0.3sease;overflow:hidden;}.btn-9:after{position:absolute;content:"";z-index:-1;top:0;left:0;width:100%;height:100%;background-color:#1fd1f9;background-image:linear-gradient(315deg,#1fd1f90%,#b621fe74%);transition:all0.3sease;}.btn-9:hover{background:transparent;box-shadow:4px4px6px0rgba(255,255,255,.5),-4px-4px6px0rgba(116,125,136,.2),inset-4px-4px6px0rgba(255,255,255,.5),inset4px4px6px0rgba(116,125,136,.3);color:#fff;}.btn-9:hover:after{-webkit-transform:scale(2)rotate(180deg);transform:scale(2)rotate(180deg);box-shadow:4px4px6px0rgba(255,255,255,.5),-4px-4px6px0rgba(116,125,136,.2),inset-4px-4px6px0rgba(255,255,255,.5),inset4px4px6px0rgba(116,125,136,.3);}/*10*/.btn-10{background:rgb(22,9,240);background:linear-gradient(0deg,rgba(22,9,240,1)0%,rgba(49,110,244,1)100%);color:#fff;border:none;transition:all0.3sease;overflow:hidden;}.btn-10:after{position:absolute;content:"";top:0;left:0;z-index:-1;width:100%;height:100%;transition:all0.3sease;-webkit-transform:scale(.1);transform:scale(.1);}.btn-10:hover{color:#fff;border:none;background:transparent;}.btn-10:hover:after{background:rgb(0,3,255);background:linear-gradient(0deg,rgba(2,126,251,1)0%,rgba(0,3,255,1)100%);-webkit-transform:scale(1);transform:scale(1);}/*11*/.btn-11{border:none;background:rgb(251,33,117);background:linear-gradient(0deg,rgba(251,33,117,1)0%,rgba(234,76,137,1)100%);color:#fff;overflow:hidden;}.btn-11:hover{text-decoration:none;color:#fff;}.btn-11:before{position:absolute;content:'';display:inline-block;top:-180px;left:0;width:30px;height:100%;background-color:#fff;animation:shiny-btn13sease-in-outinfinite;}.btn-11:hover{opacity:.7;}.btn-11:active{box-shadow:4px4px6px0rgba(255,255,255,.3),-4px-4px6px0rgba(116,125,136,.2),inset-4px-4px6px0rgba(255,255,255,.2),inset4px4px6px0rgba(0,0,0,.2);}@-webkit-keyframesshiny-btn1{0%{-webkit-transform:scale(0)rotate(45deg);opacity:0;}80%{-webkit-transform:scale(0)rotate(45deg);opacity:0.5;}81%{-webkit-transform:scale(4)rotate(45deg);opacity:1;}100%{-webkit-transform:scale(50)rotate(45deg);opacity:0;}}/*12*/.btn-12{position:relative;right:20px;bottom:20px;border:none;box-shadow:none;width:130px;height:40px;line-height:42px;-webkit-perspective:230px;perspective:230px;}.btn-12span{background:rgb(0,172,238);background:linear-gradient(0deg,rgba(0,172,238,1)0%,rgba(2,126,251,1)100%);display:block;position:absolute;width:130px;height:40px;box-shadow:inset2px2px2px0pxrgba(255,255,255,.5),7px7px20px0pxrgba(0,0,0,.1),4px4px5px0pxrgba(0,0,0,.1);border-radius:5px;margin:0;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all.3s;transition:all.3s;}.btn-12span:nth-child(1){box-shadow:-7px-7px20px0px#fff9,-4px-4px5px0px#fff9,7px7px20px0px#0002,4px4px5px0px#0001;-webkit-transform:rotateX(90deg);-moz-transform:rotateX(90deg);transform:rotateX(90deg);-webkit-transform-origin:50%50%-20px;-moz-transform-origin:50%50%-20px;transform-origin:50%50%-20px;}.btn-12span:nth-child(2){-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);transform:rotateX(0deg);-webkit-transform-origin:50%50%-20px;-moz-transform-origin:50%50%-20px;transform-origin:50%50%-20px;}.btn-12:hoverspan:nth-child(1){box-shadow:inset2px2px2px0pxrgba(255,255,255,.5),7px7px20px0pxrgba(0,0,0,.1),4px4px5px0pxrgba(0,0,0,.1);-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);transform:rotateX(0deg);}.btn-12:hoverspan:nth-child(2){box-shadow:inset2px2px2px0pxrgba(255,255,255,.5),7px7px20px0pxrgba(0,0,0,.1),4px4px5px0pxrgba(0,0,0,.1);color:transparent;-webkit-transform:rotateX(-90deg);-moz-transform:rotateX(-90deg);transform:rotateX(-90deg);}/*13*/.btn-13{background-color:#89d8d3;background-image:linear-gradient(315deg,#89d8d30%,#03c8a874%);border:none;z-index:1;}.btn-13:after{position:absolute;content:"";width:100%;height:0;bottom:0;left:0;z-index:-1;border-radius:5px;background-color:#4dccc6;background-image:linear-gradient(315deg,#4dccc60%,#96e4df74%);box-shadow:-7px-7px20px0px#fff9,-4px-4px5px0px#fff9,7px7px20px0px#0002,4px4px5px0px#0001;transition:all0.3sease;}.btn-13:hover{color:#fff;}.btn-13:hover:after{top:0;height:100%;}.btn-13:active{top:2px;}/*14*/.btn-14{background:rgb(255,151,0);border:none;z-index:1;}.btn-14:after{position:absolute;content:"";width:100%;height:0;top:0;left:0;z-index:-1;border-radius:5px;background-color:#eaf818;background-image:linear-gradient(315deg,#eaf8180%,#f6fc9c74%);box-shadow:inset2px2px2px0pxrgba(255,255,255,.5);7px7px20px0pxrgba(0,0,0,.1),4px4px5px0pxrgba(0,0,0,.1);transition:all0.3sease;}.btn-14:hover{color:#000;}.btn-14:hover:after{top:auto;bottom:0;height:100%;}.btn-14:active{top:2px;}/*15*/.btn-15{background:#b621fe;border:none;z-index:1;}.btn-15:after{position:absolute;content:"";width:0;height:100%;top:0;right:0;z-index:-1;background-color:#663dff;border-radius:5px;box-shadow:inset2px2px2px0pxrgba(255,255,255,.5),7px7px20px0pxrgba(0,0,0,.1),4px4px5px0pxrgba(0,0,0,.1);transition:all0.3sease;}.btn-15:hover{color:#fff;}.btn-15:hover:after{left:0;width:100%;}.btn-15:active{top:2px;}/*16*/.btn-16{border:none;color:#000;}.btn-16:after{position:absolute;content:"";width:0;height:100%;top:0;left:0;direction:rtl;z-index:-1;box-shadow:-7px-7px20px0px#fff9,-4px-4px5px0px#fff9,7px7px20px0px#0002,4px4px5px0px#0001;transition:all0.3sease;}.btn-16:hover{color:#000;}.btn-16:hover:after{left:auto;right:0;width:100%;}.btn-16:active{top:2px;}
感觉css的话，原来的我认为很难学，挺生涩的，但是认真看了以后，感觉css很有意思，能写出很多好看的样式，只要多做几个例子，其中有哪个属性不明白，自己查明白，然后把做出来的东西从头到尾顺一遍，思路就会清晰一些，css基础的东西挺简单，就看你会不会利用回了。html代码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><linkrel="stylesheet"href="css/鼠标悬停.css"></head><body><divclass="main"><divclass="item"><divclass="info"><h3>usewhatyouhave</h3><p>byAngelaDuncan<ahref="#">viewonmore</a></p></div></div><divclass="item"><divclass="info"><h3>usewhatyouhave</h3><p>byAngelaDuncan<ahref="#">viewonmore</a></p></div></div><divclass="item"><divclass="info"><h3>usewhatyouhave</h3><p>byAngelaDuncan<ahref="#">viewonmore</a></p></div></div></div></body></html>css代码：*{margin:0;padding:0;box-sizing:border-box;}a{text-decoration:none;}body,html{width:100%;height:100%;}/*body{background:#f9f9f9url(../images/bd.jpg);}*/.main{width:100%;height:100%;display:flex;justify-content:center;align-items:center;}.item{position:relative;width:220px;height:220px;margin:10px;background:url(../images/4.jpg)no-repeat;border-radius:50%;box-shadow:inset00016pxrgba(255,255,255,.6),01px2pxrgba(0,0,0,.1);transition:all.4sease-in-out;}.item:nth-child(2){background:url(../images/2.jpg)no-repeat;}.item:nth-child(3){background:url(../images/3.jpg)no-repeat;}.info{opacity:0;transform:scale(0);position:absolute;width:100%;height:100%;background:rgba(63,147,147,.8);border-radius:50%;text-align:center;transition:all.4sease-in-out;}.infoh3{height:140px;font-size:22px;color:#fff;margin:030px;padding-top:45px;text-transform:uppercase;letter-spacing:2px;}.infop{opacity:0;font-size:12px;color:#fff;/*文字倾斜*/font-style:italic;margin:030px;padding-top:10px;border-top:1pxsolidrgba(255,255,255,.5);transition:all.4sease-in-out.4s;}.infoa{display:block;color:#fff;font-style:normal;}.item:hover{box-shadow:inset0001pxrgba(255,255,255,.1),01px2pxrgba(0,0,0,.1);}.item:hover.info{opacity:1;transform:scale(1);}.item.infop{opacity:1;}.infopa:hover{color:#fff222;}
发送按钮悬停效果效果图HTML<divid="send-btn"><button>//这里是一个svg的占位Send</button></div>CSS#send-btn{display:flex;align-items:center;justify-content:center;height:100vh;}button{background:#5f55af;border:0;border-radius:5px;padding:10px30px10px20px;color:white;text-transform:uppercase;font-weight:bold;}buttonsvg{display:inline-block;vertical-align:middle;padding-right:5px;}button:hoversvg{animation:fly2sease1;}@keyframesfly{0%{transform:translateX(0%);}50%{transform:translateX(300%);}100%{transform:translateX(0);}}霓虹灯按钮悬停效果效果图HTML<divid="neon-btn"><buttonclass="btnone">Hoverme</button><buttonclass="btntwo">Hoverme</button><buttonclass="btnthree">Hoverme</button></div>CSS#neon-btn{display:flex;align-items:center;justify-content:space-around;height:100vh;background:#031628;}.btn{border:1pxsolid;background-color:transparent;text-transform:uppercase;font-size:14px;padding:10px20px;font-weight:300;}.one{color:#4cc9f0;}.two{color:#f038ff;}.three{color:#b9e769;}.btn:hover{color:white;border:0;}.one:hover{background-color:#4cc9f0;-webkit-box-shadow:10px10px99px6pxrgba(76,201,240,1);-moz-box-shadow:10px10px99px6pxrgba(76,201,240,1);box-shadow:10px10px99px6pxrgba(76,201,240,1);}.two:hover{background-color:#f038ff;-webkit-box-shadow:10px10px99px6pxrgba(240,56,255,1);-moz-box-shadow:10px10px99px6pxrgba(240,56,255,1);box-shadow:10px10px99px6pxrgba(240,56,255,1);}.three:hover{background-color:#b9e769;-webkit-box-shadow:10px10px99px6pxrgba(185,231,105,1);-moz-box-shadow:10px10px99px6pxrgba(185,231,105,1);box-shadow:10px10px99px6pxrgba(185,231,105,1);}绘制边框按钮悬停效果效果图HTML<divid="draw-border"><button>Hoverme</button></div>CSS#draw-border{display:flex;align-items:center;justify-content:center;height:100vh;}button{border:0;background:none;text-transform:uppercase;color:#4361ee;font-weight:bold;position:relative;outline:none;padding:10px20px;box-sizing:border-box;}button::before,button::after{box-sizing:inherit;position:absolute;content:'';border:2pxsolidtransparent;width:0;height:0;}button::after{bottom:0;right:0;}button::before{top:0;left:0;}button:hover::before,button:hover::after{width:100%;height:100%;}button:hover::before{border-top-color:#4361ee;border-right-color:#4361ee;transition:width0.3sease-out,height0.3sease-out0.3s;}button:hover::after{border-bottom-color:#4361ee;border-left-color:#4361ee;transition:border-color0sease-out0.6s,width0.3sease-out0.6s,height0.3sease-out1s;}圆形按钮悬停效果效果图HTML<divid="circle-btn"><divclass="btn-container">//这里有一个svg元素<button>Hoverme</button></div></div>CSS#circle-btn{display:flex;align-items:center;justify-content:center;height:100vh;}.btn-container{position:relative;}button{border:0;border-radius:50px;color:white;background:#5f55af;padding:15px20px16px60px;text-transform:uppercase;background:linear-gradient(toright,#f7258550%,#5f55af50%);background-size:200%100%;background-position:rightbottom;transition:all2sease;}svg{background:#f72585;padding:8px;border-radius:50%;position:absolute;left:0;top:0%;}button:hover{background-position:leftbottom;}边框半径按钮悬停效果效果图HTML<divid="border-btn"><button>Hoverme</button></div>CSS#border-btn{display:flex;align-items:center;justify-content:center;height:100vh;}button{border:0;border-radius:10px;background:#2ec4b6;text-transform:uppercase;color:white;font-size:16px;font-weight:bold;padding:15px30px;outline:none;position:relative;transition:border-radius3s;-webkit-transition:border-radius3s;}button:hover{border-bottom-right-radius:50px;border-top-left-radius:50px;border-bottom-left-radius:10px;border-top-right-radius:10px;}冻结按钮悬停效果效果图HTML<divid="frozen-btn"><buttonclass="green">Hoverme</button><buttonclass="purple">Hoverme</button></div>CSS#frozen-btn{display:flex;align-items:center;justify-content:center;height:100vh;}button{border:0;margin:20px;text-transform:uppercase;font-size:20px;font-weight:bold;padding:15px50px;border-radius:50px;color:white;outline:none;position:relative;}button:before{content:'';display:block;background:linear-gradient(toleft,rgba(255,255,255,0)50%,rgba(255,255,255,0.4)50%);background-size:210%100%;background-position:rightbottom;height:100%;width:100%;position:absolute;top:0;bottom:0;right:0;left:0;border-radius:50px;transition:all1s;-webkit-transition:all1s;}.green{background-image:linear-gradient(toright,#25aae1,#40e495);box-shadow:04px15px0rgba(49,196,190,0.75);}.purple{background-image:linear-gradient(toright,#6253e1,#852D91);box-shadow:04px15px0rgba(236,116,149,0.75);}.purple:hover:before{background-position:leftbottom;}.green:hover:before{background-position:leftbottom;}闪亮的阴影元素按钮悬停效果效果图HTML<divid="shiny-shadow"><button><span>Hoverme</span></button></div>CSS#shiny-shadow{display:flex;align-items:center;justify-content:center;height:100vh;background:#1c2541;}button{border:2pxsolidwhite;background:transparent;text-transform:uppercase;color:white;padding:15px50px;outline:none;overflow:hidden;position:relative;}span{z-index:20;}button:after{content:'';display:block;position:absolute;top:-36px;left:-100px;background:white;width:50px;height:125px;opacity:20%;transform:rotate(-45deg);}button:hover:after{left:120%;transition:all600mscubic-bezier(0.3,1,0.2,1);-webkit-transition:all600mscubic-bezier(0.3,1,0.2,1);}加载按钮悬停效果效果图HTML<divid="loading-btn"><button><span>Hoverme</span></button></div>CSS#loading-btn{display:flex;align-items:center;justify-content:center;height:100vh;}button{background:transparent;border:0;border-radius:0;text-transform:uppercase;font-weight:bold;font-size:20px;padding:15px50px;position:relative;}button:before{transition:all0.8scubic-bezier(0.7,-0.5,0.2,2);content:'';width:1%;height:100%;background:#ff5964;position:absolute;top:0;left:0;}buttonspan{mix-blend-mode:darken;}button:hover:before{background:#ff5964;width:100%;}
中国互联网举报中心