CSS3学习笔记之loading动画

效果截图: HTML代码: <div class="divBox"> <div class="loader"> <div class="loading-1"> <i></i> <i></i> <i></i> </div> </div> <div class="loader"> <…

p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; padding: 5px; margin: 1em 0 1em 0; } .alexrootdiv>div>p:first-of-type,.alextitlep{ font-size: 18px; font-weight: bold; color: red; } .alexrootdiv spa…

iOS学习笔记-自定义过渡动画

代码地址如下:http://www.demodashi.com/demo/11678.html 这篇笔记翻译自raywenderlick网站的过渡动画的一篇文章,原文用的swift,由于考虑到swift版本变动以及一些语法兼容问题,这里我还是用Objective-C进行了改写,没有逐字翻译,加了部分自己的理解.原文链接Creating Custom UIViewController Transitions.过渡动画有些地方也是翻译成转场动画,即从一个视图控制器切到另一个视图控制器,本文以过渡来译…

十天精通CSS3学习笔记 part4

CSS3中的变形与动画(下) CSS3 Keyframes介绍 Keyframes 被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后面紧跟着是动画名称加上一对花括号"{-}",括号中就是一些不同时间段样式规则. @keyframes changecolor{ 0%{ background: red; } 100%{ background: green; } } 在一个"@keyframes"中的样式…

CSS3学习笔记之linear-gradient

我觉得CSS3很不错,自己也稍微看过,并且尝试过一些属性.对我自己而言,我没有勇气说我学过CSS3,我觉得任何自己看来很小的事情,也只是站在自己的角度来评判.就算的是"简单的"HTML在我看来也是很值得研究的,只有时刻保持一个谦逊的姿态,才能够看得更远,走得更稳. 在这里要感谢一下网站: w3cplus,W3School ,W3C 等等一些网上的教程啊博客什么的(还有好多就不一一列举了),我算是从这些地方开始接触传说中的CSS3和HTML5,而自己的学习笔记自然也会从中借鉴. 建议:大…

十天精通CSS3学习笔记 part3

第8章 CSS3中的变形与动画(上) 变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度.如果这个值为正值,元素相对原点中心顺时针旋转:如果这个值为负值,元素相对原点中心逆时针旋转.如下图所示: HTML代码: <div class="wrapper"> <div></div> </div> CSS代码: .wrapper { w…

CSS3学习笔记（4）—上下滑动展开的按钮

最近写了一个动画,下面来看看我以前写的一个上下滑动展开的按钮效果: 这类的效果经常会在一些网站页面下载按钮处看到,当你鼠标悬浮在下载按钮时,会提醒你是否已注册,或者点击登录什么的小提示~~~~~ 一.页面的主体布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link type="text/css&q…

[CSS3] 学习笔记-CSS动画特效

在CSS3中,出现了很多出彩的效果,例如2D.3D以及过度.动画和多列等.这些效果为页面设计添加了很多的可选设计. 1.2D.3D转换转换,是使元素改变尺寸.形状.位置的一种效果:通过CSS3转换,我们能够对元素进行移动.缩放.转动.拉伸或拉长:可以通过2D.3D元素来转换: 2D转换方法: translate().rotate().scale().skew().matrix() 3D转换方法: rotateX() rotateY() <!doctype html> <html>…

CSS3 学习笔记（动画多媒体查询）

动画 1.@keyframes规则用于创建动画.在@keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果 2.使用animation进行动画捆绑.两个值:动画名称.时长 3.我们一般情况下使用0%~100%来规定动画发生的时机.或者使用关键词from...to...,效果等同于0%~100%. 4.加上一个infinite值就可以无限执行了 5.ease——默认开始慢慢加速,结束时慢慢减速. linear——默认始终使用相同速度运行. alternate——交替执行…

CSS3学习笔记之立体线框球形动画

效果截图: HTML代码: <div class="ball-box"> <div class="ball"> <div class="line-1"></div> <div class="line-2"></div> <div class="line-3"></div> <div class="…