先来看一下效果：http://1.huizit1.applinzi.com/CSS/transform_3D/img_3D.html 布局结构： CSS3中新增了translate-style和perspective属性，要让图片有3D的效果就要添加这两个属性，具体的解释这里不再赘述，可以看这篇文章来理解：http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-ani...
刚发现一个网站上面的3D立方体效果挺好看的，就模仿着用CSS3实现了一个类似的效果：http://1.huizit1.applinzi.com//CSS/transform_3D/cube_3D.html 这样的3D透视效果主要是用了perspective和transform-style: preserve-3d;这两个属性。然后在相应的元素上添加transform就行了。 先看一下布局结构： ...
@charset "UTF-8";/*! * animate.css -http://daneden.me/animate * Version - 3.5.1 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2016 Daniel Eden */.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}.animated.infinite { -webkit-animation-iteration-count: infinite; animation-i...
先贴代码： css部分： @-webkit-keyframes fadeIn { 0% { opacity: 0.2;width:100%; /*初始状态 透明度为0.2大小为100%*/ } 10%{ opacity: 0.3;width:105%; /*补间动画10% 透明度0.3 大小105%*/ } 20%{ opacity: 0.4;width:110%; } 30% { opacity: 0.5;width:115%; } 40%{ opacity: 0.6;width:125%; } 50%{ opacity: 0.7;width:130%; } 60%{ opacity: 0.8;width:135%; } 70%{ opacity: 0.7;width:140%...
HTML: 1 2 3 a b c CSS: @keyframes act{ 0%{background:red}; 100%{background:white};}li:not(:target){ animation:act 1s ease-in;} 进入页面的时候，就会执行li:not(:target)，效果在三个li都可用 一旦点击激活target，li:not(:target)就意味着上一个激活的target： 首先点击a，激活target，li:not(:target)无效果 再点b，在第一个li处出现效果 是不是有点坑，呵呵哒。 他的用处就是在手动图片...
网上的淡入淡出效果大多是依照jquery中fadeIn和fadeOut的思路使用js来控制元素的透明度达到目的，但缺点是有轻微的卡顿感，并且运行效率一般。 这里提供另外一个思路，即通过预先定义好的css样式老控制透明度的过渡， 这种方法过渡平滑，且因为过渡的效果是基于css3的animation，所以效率高些。 思路是将淡入，淡出的效果做成预先定义好的样式类，然后用JS改变元素的类来达到图片轮播，废话不多说，上代码： 在线DEMO展示 HTML： ...
今天，我们用比较简洁的CSS3来实现翻转效果。 动画效果 效果分析 思路总结 参考资料
前言今天分享一下我昨晚做的CSS3动画效果——卡通场景汽车动画。在接触CSS3动画之前，我之前实现一些简单的动画效果都是使用flash完成的。但是自从CSS3横空出世，在移动端对CSS3动画的运用越来越多。今天这个分享是PC端的案例，因为我做的是大场景来的，起因还是我无意间看到一张卡通图片。于是我突发灵感，就趁热打铁使用CSS3动画把它按照自己的想法实现了出来。接下来，就让我们一起进入这个好玩的分享吧！ 预览学习一个案例要...
一.用CSS3的好处 1.使用简单，易于学习 2.性能相对优化 二.学习前需要了解的知识 html5基本语法 css3基本用法 三.页面效果展示 效果图片展示 如图片所示（这里以网上书城系统为例），当鼠标滑过书本（中间书）时，书的图片放大，并且会从左边滑过标签显示书目的价格，简介，作者等信息。当鼠标移开就恢复原状。（如图，左右两边的为初始状态，中间的为鼠标滑过的状态） 四.主要内容 ...
对于 css3 的喜爱可谓日渐增加，无奈自己很忙，没有多少时间来研究，这段时间也做了很多这方面的项目，比如类似于QQ 的IM沟通工具界面，比如新的博客界面，比如这个css 幻灯片演示（拿来的）。 如果让我来做这个幻灯片的效果，我想可能跟这个不太一样，至少我是没有用到这种transform: translateY(430px); 、transform: translateX(-310px); 和transition-delay: 0.4s; 好久没有动手写css3的效果了，都有些不记得，回归了之...
使用 CSS 3 transition 实现动画效果技术 maybe yes 发表于2015-05-12 23:52 使用 CSS3 的新特性 transition 可以很方便的实现像 JQuery 的 animate 方法一样的动画效果，但是有点遗憾的是，transition 只支持一个属性，重复定义后面的属性会覆盖前面的属性。 transition 有四个参数，分别是 transition-property（规定设置过渡效果的 CSS 属性的名称），transition-duration（规定完成过渡效果需要多少秒或毫秒），transiti...
查看 demo 下载源码 你可能对那些购买时需要选择座位的订票系统比较熟悉。通常在比赛，电影，搏击或者演唱会售票的时候需要这样做。如果能有一种座位的预览效果该有多酷啊，比如能够从你选择的位置的角度去预览舞台或者屏幕。这个问题引出了今天我们将要分享给大家的一个新尝试。 注意：我们使用到的某些技术还是非常实验性质的，不是所有浏览器都支持。这个demo需要浏览器支持 transform-style: preserve-3d。 我们...
前几篇介绍了CSS3的3个动画属性transform，transition，animation。但即使基本语法能看懂，也不代表能设计出棒棒的动画效果。在设计这条路上，是学无止境，甚至需要拼天赋的。我也很菜，只能站在优秀的设计师的肩膀上，模拟出一些效果。 参照网上的设计，本篇分享一下非常常见的Loading的效果。你可以点这里 例子1：菊花状的Loading效果 第一步画出静态的小菊花。 .sk-fading-circle { width: 40px; he...
有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制，而其中图书的展示是最为简单的一种，无需复杂的建模过程，使用图片和CSS3的一些变换即可实现更好的展示效果，简洁而实用。 书本的3D模型是所有商品中最为简单的，因为其本质上就是一个立方体（cube），只是带有封面/封底和左侧封条。 所以要构造一个3D书本展示，问题就被分解为构造一个立方体+旋转+图片背景。 1. 构造一个立方体 要创建一个立方体，首先我们需要...
学习要点： 1.过渡简介 2.transition-property 3.transition-duration 4.transition-timing-function 5.transition-delay 6.简写和版本主讲教师：李炎恢 本章主要探讨 HTML5 中 CSS3 的过渡效果，通过这个功能可以不借助 JavaScript 来实现简单的用户交互功能。一．过渡简介 过渡效果一般是通过一些简单的 CSS 动作触发平滑过渡功能，比如：:hover、:focus、:active、:checked 等。CSS3 提供了 transition 属性来实现这个过渡功能，...