css3
sdfujichao
这个作者很懒,什么都没留下…
展开
-
css3新增属性设置图片特效
在这里主要用到了css3的选择器,还有transform属性,其中有平移,旋转,还有延时操作。 #content{width: 100%; height: auto;} .box{width: 32%; height: 300px;float: left;margin: 3px; border: 1px solid hotpink; position原创 2016-07-08 19:22:40 · 876 阅读 · 0 评论 -
css3动画
先说一下css中的思路吧,下面有完整代码。因为这里不能上传项目。所以没有图片这段代码就不能直接运行了。不过也没事,都学到这里了,估计都有自学能了,我把思路说一下理解了就能很快写出来了。这里写的动画其实跟以前做的轮播图是类似的,不同的地方的这个动画用的是关键帧而不是过度效果的动画。这个关键帧听起来有点不是太好理解,说才了就像以前交卷电影一样,用很短的时间瞬间切换图片(这里是背景图片),所以给人的视觉原创 2016-07-08 19:46:54 · 386 阅读 · 0 评论 -
css3动画,一张背景图两行图片
这个css3动画的实现和上一篇的css3动画的实现原理是一样的。不同的是这个动画的背景图片是一张两行图片的背景图。不用过原理还是一样的。最终要的是对背景图片的位置坐标的计算,一定要设置正确。 .box{background: url(img/1.jpg) no-repeat; margin: 0 auto; background-position:原创 2016-07-08 19:51:43 · 932 阅读 · 0 评论 -
css3D效果
css3D是实现也可以分为三步。1 在父元素上面设置视点 2 设置动画的方式 3 设置具体的动画这是一个最简单的动画。就是为了写一下动画的步骤。 #box{ width: 500px;height: 500px;border: 1px solid black; perspective: 1000px; transform原创 2016-07-08 20:01:51 · 819 阅读 · 0 评论 -
css3transform动画
这个程序是写用transform的动画座位关键帧的形式做的动画。其中要注意的是,transform动画的原点,旋转的原点是以自己的左上角,平移的参照点一直都是屏幕的左上角,出非手动更改。 #box{width: 200px;height: 200px;background: red; animation: move 4s infinite e原创 2016-07-08 20:10:58 · 604 阅读 · 0 评论 -
用css3transform做出3D旋转的骰子
这个效果利用了3D旋转平移,主要的注意点是当一个面旋转以后他的xyz轴还得按照以前的xyz轴来做,他的xyz轴并不是开始时吧的xyz轴的方向,他的xyz轴也同时受到了旋转的影响而发生改变。所以可以先平移然后在旋转。 .wrap{perspective: 1000px; width: 1000px; height: 600px; margin: 0 auto原创 2016-07-08 21:09:14 · 3594 阅读 · 0 评论 -
css的border实现三角形
‘.div {margin: 0px;height: 0px;width: 0px;border-left: solid 100px green;border-top: solid 200px rgba(0, 0, 0, 0); border-bottom: solid 100px rgba(0, 0, 0, 0);}原创 2016-08-03 15:20:34 · 396 阅读 · 0 评论