常用的几个CSS前端效果 更轻松的写页面

2018-1-24 17:41 来自本站原创 687 11 6
[摘要]

本文收集了20多个常用的CSS效果,在写页面的时候可以直接使用,不用再一遍一遍的做无用功了,大大提高了开发效率。

做页面需要一定的CSS基本功,虽然现在有很多成熟的框架如bootstrap等,我们轻松的就就可以做出一些页面效果。但是掌握每一个常见效果的写法还是很重要的,下面整理出一些常见的CSS前端效果,让你更轻松的写页面。\r\n\r\n\r\n

1、禁止选择文本

\r\n

body {\r\n -webkit-touch-callout: none;\r\n -webkit-user-select: none;\r\n -khtml-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}

\r\n

2、在可打印的网页中显示URLs

\r\n

@media print { \r\n a:after { \r\n content: " [" attr(href) "] "; \r\n } \r\n}

\r\n

3、深灰色的点击渐变按钮

\r\n

.graybtn {\r\n -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;\r\n -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;\r\n box-shadow:inset 0px 1px 0px 0px #ffffff;\r\n background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );\r\n background:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% );\r\n filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1');\r\n background-color:#ffffff;\r\n -moz-border-radius:6px;\r\n -webkit-border-radius:6px;\r\n border-radius:6px;\r\n border:1px solid #dcdcdc;\r\n display:inline-block;\r\n color:#777777;\r\n font-family:arial;\r\n font-size:15px;\r\n font-weight:bold;\r\n padding:6px 24px;\r\n text-decoration:none;\r\n text-shadow:1px 1px 0px #ffffff;\r\n}\r\n.graybtn:hover {\r\n background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) );\r\n background:-moz-linear-gradient( center top, #d1d1d1 5%, #ffffff 100% );\r\n filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff');\r\n background-color:#d1d1d1;\r\n}\r\n.graybtn:active {\r\n position:relative;\r\n top:1px;\r\n}

\r\n

4、网页顶部盒阴影

\r\n

body:before {\r\n content: "";\r\n position: fixed;\r\n top: -10px;\r\n left: 0;\r\n width: 100%;\r\n height: 10px;\r\n\r\n-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);\r\n -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);\r\n box-shadow: 0px 0px 10px rgba(0,0,0,.8);\r\n z-index: 100;\r\n}

\r\n

5、在可点击的项目上强制手型

\r\n

a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {\r\n cursor: pointer;\r\n}

\r\n

6、CSS3 鲜艳的输入(边框渐变)

\r\n

input[type=text], textarea {\r\n -webkit-transition: all 0.30s ease-in-out;\r\n -moz-transition: all 0.30s ease-in-out;\r\n -ms-transition: all 0.30s ease-in-out;\r\n -o-transition: all 0.30s ease-in-out;\r\n outline: none;\r\n padding: 3px 0px 3px 3px;\r\n margin: 5px 1px 3px 0px;\r\n border: 1px solid #ddd;\r\n}\r\n\r\ninput[type=text]:focus, textarea:focus {\r\n box-shadow: 0 0 5px rgba(81, 203, 238, 1);\r\n padding: 3px 0px 3px 3px;\r\n margin: 5px 1px 3px 0px;\r\n border: 1px solid rgba(81, 203, 238, 1);\r\n}

\r\n

7、三角形列表项目符号

\r\n

ul {\r\n margin: 0.75em 0;\r\n padding: 0 1em;\r\n list-style: none;\r\n}\r\nli:before { \r\n content: "";\r\n border-color: transparent #111;\r\n border-style: solid;\r\n border-width: 0.35em 0 0.35em 0.45em;\r\n display: block;\r\n height: 0;\r\n width: 0;\r\n left: -1em;\r\n top: 0.9em;\r\n position: relative;\r\n}

\r\n

8、内部CSS3 盒阴影

\r\n

#mydiv { \r\n -moz-box-shadow: inset 2px 0 4px #000;\r\n -webkit-box-shadow: inset 2px 0 4px #000;\r\n box-shadow: inset 2px 0 4px #000;\r\n}

\r\n

9、外部CSS3 盒阴影

\r\n

#mydiv { \r\n -webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);\r\n -moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);\r\n box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);\r\n}

\r\n

10、@font-face模板

\r\n

@font-face {\r\n font-family: 'MyWebFont';\r\n src: url('webfont.eot'); /* IE9 Compat Modes */\r\n src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */\r\n url('webfont.woff') format('woff'), /* Modern Browsers */\r\n url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */\r\n url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */\r\n}\r\n\r\nbody {\r\n font-family: 'MyWebFont', Arial, sans-serif;\r\n}

\r\n

11、CSS3渐变模板

\r\n

#colorbox {\r\n background: #629721;\r\n background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721));\r\n background-image: -webkit-linear-gradient(top, #83b842, #629721);\r\n background-image: -moz-linear-gradient(top, #83b842, #629721);\r\n background-image: -ms-linear-gradient(top, #83b842, #629721);\r\n background-image: -o-linear-gradient(top, #83b842, #629721);\r\n background-image: linear-gradient(top, #83b842, #629721);\r\n}

\r\n

12、CSS3:全屏背景

\r\n

html { \r\n background: url('images/bg.jpg') no-repeat center center fixed; \r\n -webkit-background-size: cover;\r\n -moz-background-size: cover;\r\n -o-background-size: cover;\r\n background-size: cover;\r\n}

\r\n

13、锚链接伪类

\r\n

a:link { color: blue; }\r\na:visited { color: purple; }\r\na:hover { color: red; }\r\na:active { color: yellow; }

\r\n

14、图片边框偏光

\r\n

img.polaroid {\r\n background:#000; /*Change this to a background image or remove*/\r\n border:solid #fff;\r\n border-width:6px 6px 20px 6px;\r\n box-shadow:1px 1px 5px #333; /* Standard blur at 5px. Increase for more depth */\r\n -webkit-box-shadow:1px 1px 5px #333;\r\n -moz-box-shadow:1px 1px 5px #333;\r\n height:200px; /*Set to height of your image or desired div*/\r\n width:200px; /*Set to width of your image or desired div*/\r\n}

\r\n

15、通用媒体查询

\r\n

/* Smartphones (portrait and landscape) ----------- */\r\n@media only screen \r\nand (min-device-width : 320px) and (max-device-width : 480px) {\r\n /* Styles */\r\n}\r\n\r\n/* Smartphones (landscape) ----------- */\r\n@media only screen and (min-width : 321px) {\r\n /* Styles */\r\n}\r\n\r\n/* Smartphones (portrait) ----------- */\r\n@media only screen and (max-width : 320px) {\r\n /* Styles */\r\n}\r\n\r\n/* iPads (portrait and landscape) ----------- */\r\n@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {\r\n /* Styles */\r\n}\r\n\r\n/* iPads (landscape) ----------- */\r\n@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {\r\n /* Styles */\r\n}\r\n\r\n/* iPads (portrait) ----------- */\r\n@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {\r\n /* Styles */\r\n}\r\n\r\n/* Desktops and laptops ----------- */\r\n@media only screen and (min-width : 1224px) {\r\n /* Styles */\r\n}\r\n\r\n/* Large screens ----------- */\r\n@media only screen and (min-width : 1824px) {\r\n /* Styles */\r\n}\r\n\r\n/* iPhone 4 ----------- */\r\n@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {\r\n /* Styles */\r\n}

\r\n

16、跨浏览器透明

\r\n

.transparent {\r\n filter: alpha(opacity=50); /* internet explorer */\r\n -khtml-opacity: 0.5; /* khtml, old safari */\r\n -moz-opacity: 0.5; /* mozilla, netscape */\r\n opacity: 0.5; /* fx, safari, opera */\r\n}

\r\n

17、用CSS动画实现省略号动画

\r\n

.loading:after {\r\n overflow: hidden;\r\n display: inline-block;\r\n vertical-align: bottom;\r\n animation: ellipsis 2s infinite;\r\n content: "\2026"; /* ascii code for the ellipsis character */\r\n}\r\n@keyframes ellipsis {\r\n from {\r\n width: 2px;\r\n }\r\n to {\r\n width: 15px;\r\n }\r\n}

\r\n

18、制造模糊文本

\r\n

.blurry-text {\r\n color: transparent;\r\n text-shadow: 0 0 5px rgba(0,0,0,0.5);\r\n}

\r\n

19、包裹长文本 文本过长自动换行不会穿破盒子

\r\n

pre {\r\n white-space: pre-line;\r\n word-wrap: break-word;\r\n}

\r\n

20、背景渐变色

\r\n

button {\r\n background-image: linear-gradient(#5187c4, #1c2f45);\r\n background-size: auto 200%;\r\n background-position: 0 100%;\r\n transition: background-position 0.5s;\r\n} \r\nbutton:hover {\r\n background-position: 0 0;\r\n}

\r\n

21、内容可编辑(contenteditable="true")

\r\n

<ul contenteditable="true">\r\n <li>悼念遇难香港同胞 </li>\r\n <li>深圳特区30周年</li>\r\n <li>伊春空难</li>\r\n</ul>

\r\n

22、输入框改变placeholder字体颜色

\r\n

::-webkit-input-placeholder {\r\n color: red;\r\n}\r\n:-moz-placeholder {\r\n color: red;\r\n}\r\n::-moz-placeholder{\r\ncolor: red;\r\n}\r\n:-ms-input-placeholder {\r\n color: red;\r\n}
瓜分支付宝10亿红包

如果认为本文对您有所帮助请赞助本站

  • 支付宝扫一扫赞助
  • 微信扫一扫赞助
  • 声明:凡注明“本站原创”的所有文字图片等资料,版权均属雅兮网所有,欢迎转载,但务请注明出处;
    已是本栏目最新文章
    目前评论:11   其中:访客  7   博主  4
    加载中...
    1. 4天前 6楼

      漂亮,马克一下//谢谢分享.

    2. 4周前 (01-28) 5楼

      CSS一个神奇的东西

    3. 4周前 (01-28) 4楼

      对于WP来说插件太多,如果做太多的动画效果,会影响打开速度

      • 4周前 (01-29)  地下1层

        @养肝护肝: 是嘛,现在的电脑如果连几个特效都渲染不了,那前端就别发展了 [偷笑]

    4. 1个月前 (01-25) 板凳

      JS对于我来说没啥用,但是也赞一个

    5. 1个月前 (01-24) 椅子

      收藏收藏。\r\n像前端大神学习~\r\nPS。内容我拷走了哈

    6. 1个月前 (01-24) 沙发

      看不懂也要赞

    发表评论

    疑问 调皮 难过 抠鼻 吓 微笑 可爱 坏笑 惊讶 发呆 疑问 大兵 偷笑 咒骂 发怒 白眼 鼓掌 得意 擦汗 亲亲 大哭 呲牙 晕 强

    11 6 687
    Top