效果图演示，源代码 原文：http://www.cnblogs.com/wangyongx/p/5022550.html
CSS3新增的特性常用厂商前缀："-webkit-"，Chrome、Safari、Android"-moz-"，Firefox"-o-"，Opera"-ms-"，IE1、过渡效果（transition）（1）语法 transition:CSS属性 过渡时长 时间曲线 延迟时间 |-- CSS属性，如：width,color,...；对应单独过渡属性为：transition-property |-- 过渡时长（秒）,即过渡过程要花费的时间，对应单独过渡属性为：transition-duration |-- 时间曲线，对应单独过渡属性为： transition-timing-func...
具体代码如下 button{position: relative; } button:active::before {display: block;content: ‘‘;position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;background: rgba(0, 0, 0, 5%) } 如果是自定义DIV也是可以用同样方法的，可以改为 .btn{position: relative;}/**这里的active为选中的状态，可以根据情况修改**/.btn:active::before {display: block;content: ‘‘;position: absolute;top: 0px;left: 0px;widt...
/*---第一组动画---*/.cartonGif_1{position: absolute;display: block;background:url("img/haihangzhuanqu/0-1.png") no-repeat center center/100% 100% ;-webkit-animation-name: charector-1;/* 动画名称 */-webkit-animation-iteration-count: infinite;/* 动画无限播放 */-webkit-animation-timing-function: step-start;/* 马上跳到动画每一结束桢的状态 */-webkit-animation-duration: 950ms;/* 动画运行的时间 */}@-webk...
<html><head></head><body><div class="arrow_box">按按</div></body><style> .arrow_box { width:40px; height:40px; animation: glow 800ms ease-out infinite alternate;} @keyframes glow {0% {border-color: #393;box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 1px 0 #393;}100% {border-color: #6f6;box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 1px 0 #6f6;} }...
1overflow: hidden; 2display: -webkit-box; 3-webkit-line-clamp: 2; 4-webkit-box-orient: vertical;四行代码完美解决文字内容过多溢出显示..原文：https://www.cnblogs.com/crazyWang/p/13162859.html
总是能看见非常多广告或者站点都是使用整屏滚动的效果，一直看着都心痒痒，想自己也实现一个。近期刚学习到css3的动画效果，所以尝试使用css3做了一个整屏切换。页面结构实现思路与大众方法相似。如图 每一个section就是一页内容。它的大小充满了屏幕（红色区域）。一个container由多个section构成，我们通过改变container的位置，来达到页面切换的效果。container向下走。页面好像上移了，container向上走，页面就下移了。 html...
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>旋转的星球</title><style type="text/css">.box {transform: scale(0.5);position: relative;padding: 1px;height: 300px;width: 300px;}.sunline {position: relative;height: 400px;width: 400px;border: 2px solid black;border-radius: 50%;margin: 50px 0 0 50px;display: flex;animation: rotate 10s infinite linear;}.sun {height: 100px;width: 100p...
Style样式 .toggle {position: relative;display: inline-block;width: 60px;height: 30px;border: 1px solid #E5E5E5;background-color: #fff;background-clip: content-box;-webkit-border-radius: 30px;border-radius: 30px;}.toggle i {position: absolute;top: 0;left: 0;display: inline-block;content: "";width: 30px;height: 30px;-webkit-box-shadow: 0 0 2px #bbb;background-color: #fff;background-clip: cont...
很棒的loading效果，收藏一下一HTML 代码：复制代码代码如下:<div class="spinner"> <div class="rect1"></div> <div class="rect2"></div> <div class="rect3"></div> <div class="rect4"></div> <div class="rect5"></div></div>CSS 代码：复制代码代码如下:.spinner { margin: 100px auto; width: 50px; height: 60px; text-align: center; font-size: 10px;}.spinner > div { background-color: #67CF22; height: ...
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>图片立体过渡切换效果</title><style type="text/css">*{margin:0;padding:0;}div{width:500px;height:500px;margin:150px auto;position:relative;perspective:800px;}ul{list-style:none;width:500px;height:280px;}li{position:absolute;top:0;left:0;transition:all 1s;}li.center{transform:translateZ(100px);z-index:10;}li.left1{transform:rotateY...
本文实例讲述了纯CSS实现漂亮的下拉导航效果代码。分享给大家供大家参考。具体如下：这是一款纯CSS完成的下拉导航代码，蓝色经典色调，非常大气，适合政府和企业类网站作为顶部的导航菜单，浏览器兼容性完成OK，有需要的朋友可以拿去。运行效果截图如下：在线演示地址如下：http://demo.jb51.net/js/2015/css-xlcd-nav-menu-codes/具体代码如下：复制代码代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"...
<!DOCTYPE HTML><html><head><meta charset="UTF-8"><title>图片投影效果</title><style>.box {position: absolute;padding: 2px;background: white;-webkit-box-shadow: 1px 2px 4px rgba(0,0,0,.5);-moz-box-shadow: 1px 2px 4px rgba(0,0,0,.5);box-shadow: 1px 2px 4px rgba(0,0,0,.5);}.box img {display:block;width:200px;height:220px;border: 1px inset #8a4419;background:#eee;}.box:after {content: ‘‘;-webkit-box-...
1.旋转.center>.bj>.div1>ul>li>.img1:hover {transform: rotate(-360deg);transition: 1s}/*旋转*/ .center>.bj>.div1>ul>li>.img2:hover {transform: rotateY(360deg);transition: 1.5s}/*Y轴旋转*/ .center>.bj>.div1>ul>li>.img3:hover {transform: rotate(360deg);transition: 1s}2.缩放.center>.bj>.div2>.d2>ul>li>div{width:260px;height:180px;overflow: hidden}/*图片父元素设置溢出隐藏*/ .center>.bj>.div2>.d2>ul>li>...
js或jquery 元素移动以像素计算，手机上移动效果会有卡顿利用CSS3 可以很简单的实现流畅的移动动画transform: translate3d(66px, 88px, 0px) rotate(45deg); transition: transform 3s linear 0s;说明：translate3d(66px, 88px, 0) 表示X轴偏移66px， Y轴偏移88px rotate(45deg) 表示在此过程中旋转45°transition: transform 3s linear 0s; 表示动画时间3秒 速度方式：linear 延迟0s 原文：http://www.cnblogs.com/xiangsj...