- MindManager 2018体验如何 11-25
- 解读2017年北京HTML5培训多少钱 11-25
- 瑞讲堂|HTML5课程系列——表单最重要的元素:in 11-25
- HTML5实体K 11-25
- 不炫技,SVG/CSS3旋转动画属性就能实现的梦幻效 11-25
- HTML+CSS3 横向导航栏 11-25
- 多啦A梦css3 11-25
- CSS3 圆角 11-25
- css3鼠标悬停效果 11-25
- 浅谈CSS3动画的凌波微步——steps() 11-25
MindManager 2018体验如何
发布者: superzhang | 发布时间:2017-11-25很多人还没有感受到2017的,就发布2018了,这算是MindManager进入Corel后真正第一个版本,也是MindManager第一个中文版(之前都是汉化的)。
2018软件界面跟2016/2017相比没有太大变化,如下图。但是却增加很多功能和图形,最主要是增加中文版,相比2017是个很大的进步。
总的看下来,增加了一些功能,差不多有8个,改善了一些弊端,然后去掉了一部分功能,2017版新增的功能可以看一下我之前的文章聊一聊MindManager 2017新版,废话不多说,聊一聊2018吧。
- 新增能功能 -
01 新增韦恩图和洋葱图两种图形模板
不知道这两个图形是啥的可以先百度一下,总之,MindManager也是增加了蛮多的图形了,流程图、概念图、时间轴、泳道图,加上这两个新的,嗯,越走越远了。
具体可以看一下韦恩图如下:
</form>
显示效果如图1-2所示。
并非下表中的所有实体都能在所有的浏览器中正确地显示。
目前,IE 11 是唯一一个能正确显示所有 HTML5 实体的浏览器。
不炫技,SVG/CSS3旋转动画属性就能实现的梦幻效果
发布者: superzhang | 发布时间:2017-11-25作者:泱泱
原文地址:https://juejin.im/post/5a150fc06fb9a0451e3f7042
CSS3的动画相关的基础的属性基本都涉猎过了,个人认为,其中最复杂的是 d:path() 路径变形动画,超过3D,而位移、轨迹、旋转、缩放、斜切什么的,相对简单一些,但作为非动画设计师而言,灵活的掌握这些基本的动画加以无穷无尽的变换,就已经能做出很多华丽丽的效果了,这篇呢,源于做一个练习时,AI的连续旋转复制功能,试着做了几个动效,简单、省时、高效,最主要的是用到CSS3的 transform:rotate() 旋转属性,辅以位移和缩放。
###1.最基本的旋转动画
下面这张效果图,粗通AI的设计师小伙伴们一定都不会陌生,在AI里面就是 ctrl+D 连续复制的体力活。
单色选择复制效果
如果把连续旋转复制转成CSS3语言,也是极简单的。来分析一下上面的图形,我做的时候每次旋转的角度为10度,就意味着有36
HTML+CSS3 横向导航栏
发布者: superzhang | 发布时间:2017-11-25效果图:
index.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HTML+CSS3横向导航栏</title><link rel="stylesheet" href="index.css" media="screen" type="text/css" /></head><body><article class="tabs"><input checked id="one" name="tabs" type="radio"><labCSS3 圆角
发布者: superzhang | 发布时间:2017-11-25CSS3 圆角
使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角"。
CSS3 圆角制作器
浏览器支持
表格中的数字表示支持该属性的第一个浏览器的版本号。
-webkit- 或 -moz- 前面的数字表示支持该前缀的第一个版本。
属性border-radius9.05.04.0 -webkit-4.03.0 -moz-5.03.1 -webkit-10.5CSS3 border-radius 属性
使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角"。
以下为三个实例:
1. 指定背景颜色的元素圆角:
圆角!
2. 指定边框的元素圆角:
圆角!
3. 指定背景图片的元素圆角:
圆角!
代码如下:
实例
#rcorners1 {
border-radius: 25
css3鼠标悬停效果
发布者: superzhang | 发布时间:2017-11-25css3鼠标悬停效果,可用在栏目页面,用css3动画原理实现,会有动画过渡效果!
效果图如下:
实现代码:
html:
css:
<
浅谈CSS3动画的凌波微步——steps()
发布者: superzhang | 发布时间:2017-11-25浅谈CSS3动画的凌波微步--steps()
一日敲代码的我,得到一个需求:写一个10秒的倒计时。
用JavaScript定时器麻溜写完之后,恰好同事勇司机接完水。瞟了一眼,然后凑过来说,这个用CSS3也可以写,而且一行JavaScript都不用写。
"一行JavaScript都不用写,纯CSS3就可以写。CSS3有这么溜的操作!"
''对呀!CSS3 animation当中有一个steps(),你上网查一下就知道了!"
"涨姿势了!赶紧查阅一下!"
animation-timing-functionCSS animation-timing-function属性定义CSS动画在每一动画周期中执行的节奏。可能值为一或多个timing function(数学函数)对于关键帧动画来说,timing function作用于一个关键帧周期而非整个动画周期,即从关键帧开始开始,到关键帧结束结束。
定义于一个关键帧区块的缓动函数(animat
