.overlay{ display: block; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:9998; -moz-opacity: 0.8; ...
转载自http://blog.csdn.net/mushui0633/article/details/65685655单行：对应的css中加入overflow:hidden;//超出一行文字自动隐藏 text-overflow:ellipsis;//文字隐藏后添加省略号 white-space:nowrap;//强制不换行 多行： display: -webkit-box;word-break: break-all;text-overflow: ellipsis;font-size: 32rpx;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp:2;转载自http://blog.csdn.net/mushui0633/art...
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>css animation</title><style>body {background-color: gray;}@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }.preloader {animation-name: spin;animation-dur...
css3可以改变图片的颜色了。从此再也不用设计出多张图，而且随时可以修改。下面就简单介绍下css3中是如何做到改变背景图片的颜色效果的。 方式一：利用css3滤镜filter中的 drop-shadow代码如下：<style> .icon{display: inline-block;width: 180px;height: 180px;background: url(‘img/XXX.png‘) no-repeat center cover;overflow: hidden; } .icon:after{content: ‘‘;display: block;height: 100%;transform: translateX(-10...
今天在京东首页上看到一个效果，鼠标悬浮在图片上时，图片发生移动，鼠标移走时再移回，并且有一个过渡效果。貌似很简单，自己做做试试吧我首先使用的是jquery在鼠标悬浮到图片上给图片增加一个类，这个类的样式使用animation实现动画效果。表面上是实现了，然后实际情况是，滚动页面时有些卡，应该是滚动时鼠标经过N个图片，大量的DOM操作严重消耗性能，所以还是采用了伪类hover，给hover应用样式实现动画。而且简单的移动使用ani...
问题：图片的宽度100%，高度要始终自适应为16:9。 解决方案： 1、通过js程序算出绝对高度再进行设置。这是解决问题最容易想到的方法。 2、但是，我们的原则是能用css实现的功能尽量用css，这有利于后期项目的维护。css同样可以实现这个问题，我们可以利用边距的百分比属性定义来优雅实现。 我们通过百分比设置宽度，根据宽度的比例数值*9/16，计算出高度的百分比数值，设置内边距为高度的数值，最后用绝对定位把图片百...
遇到一些比较复杂的动画可以用插件帮忙，我一般选择animate.css，有时间和机会的话试下 jquery.transit.js： jquery.transit.js：http://code.ciaoca.com/jquery/transit/demo/ animate.csshttp://alloyteam.github.io/JXAnimate/jxanimate_demo.html 这是老大之前发的动画原则，虽然我还没用过，但感觉总会有用上的一天http://www.sunnyzhen.com/course/animation_principles/demo.html?from=timeline&isappinstalled=0原文：http...
早上没事干，感觉字体阴影的效果还是好看的，那么就来一个小demo吧！1、这是html 简单的有一个标签或者盒子都可以复制代码代码如下:<div class="demo11">我爱考试</div>2、css样式，用css3编写样式，感觉还不错。复制代码代码如下:.demo11 { border: 1px dashed #f2b; height: 150px; width: 250px; text-align: center; line-height: 150px; margin: 0 auto; font-size: 50px; color: orange; text-sh...
本文从CSS角度来实现导航栏的显示与隐藏，用到了ul、li标签html源代码： css文件：有点小感悟：总是先设置默认情况：默认不显示或者默认黑色，然后再设置hover时的具体情况li颜色变化比较简单：设置个全局颜色（默认颜色），然后li:hover设置hover时的颜色；li 显示比较复杂，因为涉及到自菜单显示情况：总是先设置下属所有子菜单全显示，然后设置间接子菜单不显示（存在间接子菜单的情况）。 原文：http://www.cnblogs.com/maxiao...
先来个Demo： http://www.jb51.net/jiaoben/111258.html好吧，我承认，我有点标题党了，IE7的兼容并不是特别好，当鼠标离开某个导航再进入时，会留下上一次子菜单的残影（写的好像玄幻小说似的=。=） 不过纯属研究，O(∩_∩)O哈哈~ 宽度自适应是指各级菜单都可以随内容的长度自行适应宽度，而当浏览器分辨率较低时一级导航也可以自动换行，而多级子菜单靠左显示还是得手动调整。 DOM结构比较简单，只是 ol.nav 与 li.item 的互相嵌...
当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大。人们也不再仅仅用台式机来浏览网页，现在有手机，平板电脑等等。所以传统的固定宽度设计形式将不再是个最佳选择，网页设计需要有自适应性。网页的布局需要能够根据不同的分辨率和设备来自动调整，以达到到最佳显示效果。接下来会展示如何运用HTML5和CSS3来设计一个自适应网页。效果预览 代码下载先看看它的效果在开始之前，点击最终预览来看看它的效果。改变浏览器...
CSS3的transform:scale()可以实现按比例放大或者缩小功能。CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。效果如下图所示：1、当未鼠标未放到图片上的效果： 2、当鼠标放到图片上后(放大的过程是有动画过渡的，这个过渡的时间可以自定义)：代码如下：<!DOCTYPE html> <html> <head> <meta c...
之前为大家分享了那些创意有趣的404页面， html5和css3打造一款创意404页面， HTML5可爱的404页面动画很逗的机器人。今天再给大家分享一款纯css3实现的漂亮的404页面。效果图如下：在线预览 源码下载实现的代码。html代码：<section class="center"><article><h1 class="header">404</h1><p class="error">ERROR</p></article><article><img src="vovg1x.png" alt="Funny Face"></article><article><p>Lost? Maybe I can help.</...
1、阴影box-shadow语法：box-shadow: h-shadowv-shadowblurspreadcolor inset;h-shadow必需。水平阴影的位置。允许负值。v-shadow必需。垂直阴影的位置。允许负值。blur可选。模糊距离。但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；spread可选。阴影的尺寸。color可选。阴影的颜色。请参阅 CSS 颜色值。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致，建议不要省略此参...
我们在做导航标签的时候，有时会出现空间过于拥挤需要隐藏部分内容的情况，所以在这里我自己写了一个鼠标悬停显示扩展内容的效果，如下图所示。 总的来说效果还是比较好实现，但是比较头疼的是三角部分使用了伪元素::after，而对父元素设置over-flow:hidden时也会把伪元素给隐藏掉。最后想的办法是把文字和图标用一个 <span> 包裹住然后对其设置over-flow属性。 HTML代码：1<div id="nav">2<a id="nav-main"><span><i class="icon-...