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="…

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…

React Native 学习笔记--进阶（二）--动画

React Native 进阶(二)–动画动画流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更精细的交互控制的动画Animated. Animated Animated库使得开发者可以非常容易地实现各种各样的动画和交互方式,并且具备极高的性能.Animated仅关注动画的输入与输出声明,在其中建立一个可配置的变化函数,然后使用简单的start/stop方法来控制动画按顺序执行.示例: 1 2…

CSS3学习笔记之linear-gradient

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

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

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

CSS3学习笔记之loading动画

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

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

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

十天精通CSS3学习笔记 part4

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

十天精通CSS3学习笔记 part1

http://www.imooc.com/learn/33 第1章初识CSS3 什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主流浏览器chrome.safari.firefox.opera.甚至360都已经支持了CSS3大部分功能了,IE10以后也开始全面支持CSS3了. 在编写CSS3样式时,不同的浏览器可能需要不同的前缀.它表示该CSS属性或规则尚未成为W3C标准的一部分,是浏览器的私有属性,虽然目前较新版本的浏览器都…

CSS3学习笔记1-选择器和新增属性

前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够对想学这方面知识的小白有所帮助.因为是各种渠道找的资料,学习的不算系统,所以知识点涵盖的不甚全面,望各位看官不吝指正批评. CSS3简介 CSS3是CSS2的"进化"版本,在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷. css3现…

HTML5+CSS3学习笔记（二）页面布局：HTML5新元素及其特性

HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <header>定义页面或区段的头部: <footer>定义页面或区段的尾部: <nav>定义页面或区段的导航区域: <section>页面的逻辑区域或内容组合: <article>定义正文或一篇完整的内容: <aside>定义补充或相关内容: 学习这些…

纯CSS3浮雕质感的立体文字旋转动画

还记得之前分享过一个CSS3 文字3D翻转特效,这个效果让文字有一种立体的视觉效果.今天要分享的这款CSS3文字动画特效更加炫酷,它不仅有立体的3D效果,而且文字整体展现出一种浮雕质感的视觉效果,并且伴随着旋转.效果图如下: 在线预览源码下载实现的代码. html代码: <div class='stage'> <div class='layer'></div> <div class='layer'></div> <div class…

我的CSS3学习笔记

1.元字符使用: []: 全部可选项 ||:并列 |:多选一 ?: 0个或者一个 *:0个或者多个 {}: 范围 2.CSS3属性选择器: E[attr]:存在attr属性即可: E[attr=val]:属性值完全等于val E[attr*=val]:属性值里包含val字符并且在“任意”位置 E[attr^=val]:属性值里包含val字符并且在“开始”位置 E[attr$=val]:属性值里包含val字符并且在“结束”位置 3.CSS3伪类选择器: P:first-child:P元素的父元素的…

html5和css3学习笔记

HTML5针对移动端,移动端的浏览器主要是chrome,是webkit内核; app(applicatin):应用; native app:原生的app sadsadsadad 单标签可以省略结尾标记; 比如input和br, /可以不写; 新增的标签 header,nav,footer,section,video,audio··· 功能性标签:video,audio,canvas··· 结构标签:header,nav,footer,section··· 页眉;不兼容IE8-; 页脚;不兼容IE…

十天精通CSS3学习笔记 part3

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

HTML5+CSS3学习笔记（一）

HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML5必将被越来越多的Web开发人员所使用,各大主流浏览器厂家已经积极更新自己的产品,以更好地支持HTML5. 一.一个新的Web开发平台 HTML5围绕一个核心:构建一套更加强大的Web应用开发平台. 优势: 1)更多的描述性标签:HTML5引入非常多的描述性标签,例如用于定义头部(header).尾…

CSS3 学习笔记

border-radius 圆角是做网页永远绕不过的话题,以前基本是通过背景图片做的,有了 CSS3 以后通过属性就能够搞定,我们可以通过 border-radius 设置元素的圆角半径. border-radius: 5px; 对于一个正方形,我们只需要设置为边长的一半就可以呈现一个圆. div { width: 200px; height: 200px; border-radius: 50%; // 设置百分比 border-radius: 100px; // 设置长度一半 } 代码 bo…

CSS3学习笔记——伪类hover

最近看到一篇文章:“Transition.Transform和Animation使用简介及应用展示” ,想看看里面 “不同缓动类效果demo”例子的效果,发现了一个问题如下: .Trans_Box :hover (冒号前空格)这个伪类只能作用于 .trans_box中的子元素,鼠标移到自身时只能激发其子元素的样式发生改变. (冒号前无空格)表示Trans_Box自身样式发生改变. <div id="hhh" class="…

css3学习笔记之文本效果

CSS3的文本阴影 CSS3中,text-shadow属性适用于文本阴影. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!DOCTYPE html> <html> <head> <style> h1 { text-shadow: 5px 5px 5px #FF0000; } </style> </head> <body> <h1>Text-shadow eff…

CSS3学习笔记(1)-CSS3选择器

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

css3学习笔记三

css3有些特殊的元素选择器这和jquery相似.效果图如下…

HTML5+CSS3学习笔记（一）概述

HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML5必将被越来越多的Web开发人员所使用,各大主流浏览器厂家已经积极更新自己的产品,以更好地支持HTML5. 一.一个新的Web开发平台 HTML5围绕一个核心:构建一套更加强大的Web应用开发平台. 优势: 1)更多的描述性标签:HTML5引入非常多的描述性标签,例如用于定义头部(…

CSS3学习笔记（5）—页面遮罩效果

今天把页面遮罩的效果发一下,之前遮罩都是用JS实现的,忽然发现CSS3里面的box-shadow属性除了做立体阴影外,还可以做页面的遮罩. 下面来看一下完成的动态效果: 从上图可以看出,就是当鼠标悬浮在按钮上时,会出现整个页面的遮罩,当然调一下透明度就是网页中经常看到的当鼠标悬浮在一张图片上时,周围的其他图片都被遮罩了,这样就达到了突出这张图片的效果,其实这个效果做出来很简单. 一.主体程序: <!DOCTYPE html> <html> <head> <meta…

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

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

CSS3学习笔记（3）—左右飞入的文字

前几天看到一个企业招聘的动画觉得很炫,里面有个企业介绍的文字是用飞入的效果做出来的,今天尝试了写了一下,感觉还不错~\(≧▽≦)/~啦啦啦下面来看我做的动态效果: 其实上面的效果很简单的,我的截图软件有问题,所以不是很清晰,但是大概的效果出现了~~~屏幕颜色从红变白是因为我把鼠标从页面上移到截图软件上关闭截图,不要被这个干扰~~~~ 一.页面的主体布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8…

CSS3学习笔记（2）—左右跳动的红心

还在为无法表达内心澎湃的心情而着急吗?还在为制作跳动的心而烦恼吗?哈哈,今天我就把代码全部奉上,为你们追妹子添点贡献,下面来看最终的动态效果(事先说明一下:我用的截屏gif制作软件是绿色版的,所以gif动态图心的抖动效果会有点慢而且卡卡的,但是实际效果很棒,不信你可以粘贴代码看看呗) 下面把心的png图也贴出来,感兴趣的可以右键另存为试试. 其实上面的动画类似于我们小时候荡的秋千,也叫作“秋千动画”,一般用在想让用户点击这个图标的时候,不仅仅限制于表白用O(∩_∩)O,比如企业招聘时想让求职者点…

CSS3学习笔记（1）—淡入的文字

今天有空把前几天学的东西发一下,都是一些简单的东西,但是千里之行始于足下,我虽然走的慢,但是未停下前进的脚步, 下来看下我做的“淡入的文字”最终动态效果: 上面这个动画效果制作的过程是: (1)先自定义一个透明度从0到1变化的动画,然后在animation中调用这个动画效果 (2)注意不同行文字出现的时间先后,这个通过animation中延时属性可以实现 (3)规定文字最终动态为动画的最终显示状态,否则文字显示完会自动消失,这个用animation-fill-mode可以实现一.先来看看HTM…

图解css3学习笔记

(0)css3是啥 css3是最新版本的css,添加了许多新的特性,将切图仔从繁重的工作中解救出来. css3现在主流的浏览器大部分都支持(ie9部分支持,ie8之前的都不支持) 渐进增强,优雅降级优雅降级(向下兼容):一开始就构建站点的完整功能,然后针对浏览器测试和修复.比如一开始使用 CSS3 的特性构建了一个应用,然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览. 渐进增强(向上兼容):一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效…

十天精通CSS3学习笔记 part2

第6章征服CSS3选择器(上) 属性选择器在HTML中,通过各种各样的属性可以给元素增加很多附加的信息.例如,通过id属性可以将不同div元素进行区分. 在CSS2中引入了一些属性选择器,而CSS3在CSS2的基础上对属性选择器进行了扩展,新增了3个属性选择器,使得属性选择器有了通配符的概念,这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器.如下表所示: (单击可放大) 实例展示: html代码: <a href="xxx.pdf">我链接的…

CSS3学习笔记

1.Tranform 转换(2D,3D) 2D: div { margin:30px; width:200px; height:100px; background-color:yellow; /* Rotate div */ transform:rotate(9deg); -ms-transform:rotate(9deg); /* Internet Explorer */ -moz-transform:rotate(9deg); /* Firefox */ -webkit-transform:…

【CSS3学习笔记之立体线框球形动画】的更多相关文章