首先trasition:transform只是单单表示后面只要有含有的tranform的所有属性可以参与动画，而trasition:all表示后面所有动画属性都可以参动画，当父容器有relative时，子容器有absolute，子容器会跟着父容器相对定位。当你想要然后一个父元素里面的子元素开始动画时间不同或者运动时间的不同，可以用nth-of-type，例如我们可以使p元素<p>运动0.5s</p><p>运动0.2s</p>，格式为：nth-of-type(1){trasition-delay:0.5s;},nth-of-type(2)...
此处{ } <>全部用（）代替CSS: form,p （ margin-bottom:30px; margin-left:20px;） .shadow,.one,.two,.three,.four,.five,.six （ height:50px; width:280px; border:1px solid #CCC; ） .shadow （ -moz-box-shadow: inset 0 0 10px #CCC; -webkit-box-shadow: inset 0 0 10px #CCC; box-shadow: inset 0 0 10px #CCC; ） .one （ -moz-box-shadow:5px 5px; -webkit-box-shadow:5px 5px; box-shadow:5px 5px;...
CSS3 文本效果CSS3中包含几个新的文本特征。在本章中您将了解以下文本属性：text-shadowword-wrap浏览器支持Internet Explorer 10, Firefox,Chrome, Safari, 和 Opera支持text-shadow 属性。所有的主流浏览器支持自动换行（word-wrap）属性。注意： Internet Explorer 9及更早IE版本不支持 text-shadow 属性.CSS3的文本阴影CSS3中，text-shadow属性适用于文本阴影。您指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：h1 { ...
http://jsfiddle.net/8Tb6x/先是HTML 一个父div包含四个绝对定位的div<div class=‘container container--realistic‘><div class=‘cube cube--ani‘><div class=‘face‘>1</div><div class=‘face‘>2</div><div class=‘face‘>3</div><div class=‘face‘>4</div></div> </div> 首先，一个静态的立方体 .face:nth-child(1) {-webkit-transform: /*rotateY(0deg)*/ translateZ(2.5em /* half the side length, 5em in this cas...
鼠标hover 以后。图片上面出现一个遮罩, 透明度变化， 显示设置好的文字的文字，完全使用css 实现，下图是效果 关键代码 复制代码代码如下:.featured-image:hover { opacity: 0.9; color: #fff; background: rgba(0,0,0,0.8); } 看源码吧 复制代码代码如下:<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #content article { float: left; margin-right: 4%; max-width: 236px; positi...
如今，这种利用CSS制作圆角的技术已经得到了大多数主流浏览器的支持，包括Safari，谷歌浏览器，IE，Opera和火狐浏览器。下面让我们来看看border-radius的语法，解释，以及IE是如何支持它的。语法和说明在CSS3中用来生成圆角效果的属性是border-radius.这个属性跟大家熟知的width等属性的用法相似：复制代码代码如下:.roundElement { border-radius: 10px;}上面的这句代码的作用是设置一个元素的四个角的弧度半径值都为10px。你也可...
我们在做js动画的时候，很多时候都需要做回调处理，如在一个动画完成后触发一个事件、一个动画完成后执行另外一个动画等等，但在使用CSS3动画时能不能捕获到运动的状态做回调处理呢？CSS3动画也是可以做回调处理的，这里分为两个属性，一个是transition[w3c文档]，另外一个是animation[w3c文档]。1、transition对于transition，可以监听transitionend事件，当动画完成时触发，可以这样使用：复制代码代码如下:<!DOCTYPE html>...
刚发现一个网站上面的3D立方体效果挺好看的，就模仿着用CSS3实现了一个类似的效果：http://1.huizit1.applinzi.com//CSS/transform_3D/cube_3D.html这样的3D透视效果主要是用了perspective和transform-style: preserve-3d;这两个属性。然后在相应的元素上添加transform就行了。先看一下布局结构：<div class="container"><div class="box"><ul class="cube_1"><li><img src="../Img/1.jpg"></li><li><img src="../Img/2.jpg"></li>...
本文实例讲述了基于css3的属性transition制作菜单导航效果。分享给大家供大家参考。具体如下：CSS3导航菜单，当你运动层在显示层下面时，transition会使页面产生闪动，原因是Chrome在初始渲染CSS动画时产生的Bug，虽然暂时无法考证这个问题的根本原因，但是目前已知的解决方案有两条： -webkit-backface-visibility: hidden;（设置进行转换的元素的背面在面对用户时是否可见：隐藏） -webkit-transform-style: preserve-3d; （设置...
原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果大家好，我是小强老师。 今天我们看下CSS3最为简单的两个属性。 css3给我们带来了很多视觉的感受和变化，以前的图片做的事情，很多代码都能实现。 下面给大家简单介绍两种最为常见的圆角边框和盒子阴影，同时附上一个iphone 手机效果，提供大家练习。1.border-radius 圆角矩形 语法格式： border-radius: 水平半径/垂直半径 只不过我们平时都把后面的这个垂直半...
效果图演示，源代码 原文：http://www.cnblogs.com/wangyongx/p/5022550.html
/*---第一组动画---*/.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...
总是能看见非常多广告或者站点都是使用整屏滚动的效果，一直看着都心痒痒，想自己也实现一个。近期刚学习到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...