html + css3 demo
最近，在做一个比较大的网站，主要服务于欧美地区，全站为英文版本，因为是电子产品，因此，要展示产品内在美（扯个蛋！）仿照小米、錘子、苹果等网站，着重于css3动效效果，搜集整理了一些网站中用到的动效图，方便以后翻阅。
所有页面的动效依照 anicollection 动效来实现
- 旋转菜单
- 所有图标使用了：font-awesome.min.css
- 所有图片的跨度调整显示跨度 40deg 为一个跨度，360/9
- 从第二个图标开始延迟上一个图标的2倍时间
- 所有图标都在在上一个图标的基础上增加 40deg，目的是让图标都垂直居中显示
代码效果：demo
- Tab 页内容：从右往左移
- 显示的tab内容区的宽高使用 vw / vh；
- 动画名称及动画效果实现，均以 class 命名；
- 水平方向，由右向左移动，使用了 transform: translate3d(100%, 0, 0) -> transform: translate3d(0, 0, 0)，由100%移到了0%，圆点为 0，长度为100
- 通过控制 tab内容区 class 来实现平滑左移效果
代码效果：demo
html + css3 demo的更多相关文章
- 【CSS3 DEMO】扑克正反面翻牌效果
在线预览地址:http://dtdxrk.github.io/game/css3-demo/drawbox.html 用到两个属性: 一个是动画时间 transition-duration: 0.8s ...
- CSS3自适应字体大小(vw vh)
viewpoint css3提供了一些与当前viewpoint相关的元素,vw,vh,vmin, vmax等. “viewpoint” = window size vw = 1% of viewpor ...
- 30款基于 jQuery & CSS3 的加载动画和进度条插件
我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...
- CSS3自定义字体
原文摘自:https://www.cnblogs.com/moqiutao/archive/2015/12/23/5070463.html 总节: 1) 定义字体标准格式: @font-face { ...
- css3 字体自适应
css3提供了一些与当前viewpoint相关的元素,vw,vh,vim等. “viewpoint” = window size vw = 1% of viewport width 1vh = 1% ...
- 字体大小自适应纯css解决方案
viewpoint css3提供了一些与当前viewpoint相关的元素,vw,vh,vim等. “viewpoint” = window size vw = 1% of viewport width ...
- HTML5资料整理 [From luics]
来自http://www.cnblogs.com/luics/,新浪微博@徐凯-鬼道 HTML5资料整理 项目组要做html5这块,花了一周左右时间收集的,快有一年时间了,部分内容需要更新,仅供参 ...
- css-next & grid layout
css-next & grid layout css3 demo https://alligator.io/ @media only screen and (max-width: 30em) ...
- css3 弹性效果上下翻转demo
最近扒了一个有弹性效果上下翻转demo 上图: 上代码: <!DOCTYPE html> <html lang="en"> <head> < ...
随机推荐
- linux overcommit flag
linux中有一个overcomit的配置,这个配置关系到进程在过多申请memory资源的时候,系统的表现(启发式允许,不检查,or 阻止) /proc/sys/vm/overcommit_memor ...
- App 性能相关
51Testing系列丛书:性能测试学习笔记之 LoadRunner实战 http://www.51testing.com/html/38/n-3723938.html
- 浅谈Unity3D 骨骼动画
转载请标明出处http://www.cnblogs.com/zblade/ 最近研究了一下游戏中模型的骨骼动画的原理,做一个学习笔记,便于大家共同学习探讨. ps:最近改bug改的要死要活,博客写的吭 ...
- 【原创】Python第二章——字符串
字符串是一个字符序列,(提醒:序列是Python的一个重要的关键词),其中存放UNICODE字符.Python中的字符串是不可变的(immutable),即对字符串执行操作时,总是产生一个新的字符串而 ...
- 翻译：last_value()函数（已提交到MariaDB官方手册）
本文为mariadb官方手册:LAST_VALUE()的译文. 原文:https://mariadb.com/kb/en/last_value/我提交到MariaDB官方手册的译文:https://m ...
- Idea 常用功能汇总，工作中常用技巧,移出请说明原因，笔记花了好长时间汇总的
1.隐藏没用到的文件 比如 IDEA 的项目配置文件(.iml 和.idea),打开 Settings-File Types, 加入要隐藏的文件后缀. 2.常用技巧 2.1 通过Alt+F8查看变量 ...
- CLR via c# 值类型“不可变”
昨天看书看到引用类型和值类型,书中讲到值类型“不可变”,如图: 看了两遍没怎么看懂,又仔细多看了几遍,说下我的理解: 比如说一个int类型有几个成员, MaxValue.MinValue的值是不可变的 ...
- Android Studio 活动启动模式
启动模式一共分4种 可以再配置文件中设置 <activity android:name=".MainActivity" android:launchMode="si ...
- [nodejs] nodejs开发个人博客（五）分配数据
使用回掉大坑进行取数据 能看明白的就看,看不明白的手动滑稽 /** * 首页控制器 */ var router=express.Router(); /*每页条数*/ var pageSize=5; r ...
- 8. 同步锁Lock
package com.gf.demo07; import java.util.concurrent.locks.Lock; import java.util.concurrent.locks.Ree ...