css
施主请别摸老衲的脸
人生如戏 全靠演技
展开
-
css字体发光技术
通常情况下,我们使用text-shadow就足以实现文字发光,如图如图,如果文字比较大并且阴影范围也很大的话,阴影部分的颜色就会被拉得很淡。而往往我们不需要这种不够鲜艳的颜色,还要发光半径非常大,这又如何实现呢?下面看看我是怎样实现的,先上图小伙伴看见了没有,第一个字我给它从里到外加了4层发光效果语法:text-shadow:0px 0px 8px #fff, 0px 0px 42px #f72,...转载 2018-02-08 21:08:18 · 348 阅读 · 0 评论 -
调照片的颜色 模糊效果 亮度效果等等
下面就是各种对照片的效果。可以单个调试 也可以像我一样做出魔鬼般的艺术照。。<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> </head> <style type="text/css原创 2018-09-27 15:25:40 · 315 阅读 · 0 评论 -
页面右边在移动端或者是用浏览器的响应式打开会有空白
直接在body 用min-width:1200px;来解决就行了 这里面的宽度是根据你页面的宽度来写的 例如我的页面是1200px 但是我的用移动端打开后 却没有达到1200 这时候我就直接在body 用min-width:1200px; 在打开一看 可以了 。。你们还有更好的办法解决么?有的话请留言告知。Thanks♪(・ω・)ノ...原创 2018-08-01 09:23:25 · 2337 阅读 · 0 评论 -
借用animate.css做各种动画
首先 要去到 https://daneden.github.io/animate.css/把css包下载下来<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>借用animate.css做动画</t原创 2018-07-03 14:06:45 · 1064 阅读 · 0 评论 -
background 背景条
<div class="top_line"></div>.top_line { height: 3px; background: linear-gradient(45deg, #fe0167 20%, #0682fb 60%, #7ffe02 100%);}以后就不用在让美工做背景条了原创 2018-06-19 13:48:34 · 149 阅读 · 0 评论 -
返回顶部
.top{ width: 50px; height: 50px; right: 25px; position: fixed; bottom: 10px; background: #D9534F; border-radius: 50%; cursor: pointer;}.gotop { top: 209px; height: 25px; ...原创 2018-06-19 13:42:17 · 163 阅读 · 0 评论 -
字体间的间隔
letter-spacing:5px —— 设置对象内字之间间距为5pxletter-spacing:2px —— 设置对象内字之间间距为2px无论是中文汉字还是英文字母,以及阿拉伯数字均有效,兼容各大浏览器。...原创 2018-06-12 09:47:43 · 565 阅读 · 0 评论 -
css 图片旋转
这里我用了border来代替图片.ta_c{margin:auto;border:1px solid red;width:150px;height:150px;border-radius: 10px;}@-webkit-keyframes circle{0% {-webkit-transform: rotate(0deg);} //如果需要调整旋转的方向 自行添加代码100% {-webkit-t...原创 2018-04-25 14:29:43 · 307 阅读 · 0 评论 -
鼠标触碰div 字体向上移动
第一种是用 css 写的.links-cont { border: 1px solid #dcbe6e; height: 210px; width: 1100px; padding: 30px 30px; overflow: hidden; background-color: #ffffff;} .links-cont .links-logo { widt...原创 2018-04-10 17:28:18 · 2436 阅读 · 0 评论 -
阻止文章被别人复制黏贴
直接在body 里加上这一段代码<body onmousemove=/HideMenu()/ oncontextmenu="return false" ondragstart="return false" onselectstart ="return false" onselect="document.selection.empty()" oncopy="document.selection...原创 2018-02-10 21:35:34 · 286 阅读 · 0 评论 -
图片不变形
我们在做列表页的时候,图片都是固定的大小,比如是一个100px*100px的正方形图片,但是很有可能拿到的图片并不是正方形的,这个非正方形图片放到正方形的img标签里,就会变形如果使用object-fit:cover 可以裁剪超出比例的部分,这样图片看起来就不会是变形或者拉伸的了,但是这样会导致图片残缺,根据图片的不同,可能裁剪掉关键部分的内容,但是鉴于列表本来就是缩略图,所以还是可以加上这个属...原创 2018-02-10 21:28:13 · 147 阅读 · 0 评论 -
css动画旋转代码
有很多朋友都说字体 图片以及一些简单动画 要做旋转效果 都说要用js或者jq 才能去做这个特效。。今天我们用css 就直接做旋转特效。话不多说 直接上代码 css样式 div{ width:120px; height:120px; line-height:120px; margin: 20px; ...原创 2018-02-08 21:21:58 · 3968 阅读 · 0 评论 -
CSS设置多余的文本显示省略号
在web开发过程中,常常会遇到要让布局中的某些文本根据宽度来显示,如果超过最大宽度仍然显示不完的,就显示为省略号的情况,添加下面的CSS样式表就能实现这种效果,但是这种效果只适用于单行显示的文本。首先给用于放文本的标签元素设置一个宽度值,并设置溢出属性overflow为溢出隐藏,设置文本缩略的样式为"..."width: 245px;overflow: hidden;white-space: no...原创 2018-02-08 21:15:45 · 220 阅读 · 0 评论 -
H5背景音乐
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> </head> <style type="text/css" media="screen">原创 2018-10-17 15:41:05 · 734 阅读 · 0 评论