css3动画 | 易学教程

CSS3学习基本记录

阅读更多关于 CSS3学习基本记录

CSS3 边框 border-radius: 圆角 border-radius: 15px 50px 70px 100px; 左上右上右下左下 box-shadow:阴影 box-shadow:1px 2px 3px #ccc; 1px:水平位移 2px:竖直 border-image:边框图片 border-image: source slice width outset repeat; border-image:url(border.png) 30 round; 用图片border.png 30出的地方重复合理的重复 stretch:默认值。拉伸图像来填充区域 repeat:平铺（repeated）图像来填充区域 round:类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域。 border-image-source:于指定要用于绘制边框的图像的位置 border-image-slice:图像边界向内偏移 border-image-width:图像边界的宽度 border-image-outset:用于指定在边框外部绘制 border-image-area 的量 border-image-repeat:这个例子演示了如何创建一个border-image 属性的按钮 CSS3 背景 background-size:设置背景图标大小

css3写单选框，复选框

阅读更多关于 css3写单选框，复选框

废话不多说直接看图:复选框的选中喝未选中的，哈哈哈，截图截的不够好，请谅解。直接上代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> input[type=checkbox]{ /*同样，首先去除浏览器默认样式*/ -webkit-appearance: none; -moz-appearance: none; appearance: none; /*编辑我们自己的样式*/ position: relative; width: 20px; height: 20px; background: transparent; border:1px solid #00BFFF; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; outline: none; cursor: pointer; } input[type=checkbox]:after{ content: '\2714'; position: absolute; display: block; width: 100%; height: 100%; background: #00BFFF; color: #fff; text

CSS3动画之二：Animations功能

阅读更多关于 CSS3动画之二：Animations功能

　　Animations功能与Transitions功能相同，都是通过改变元素的属性值来实现动画效果，不同之处是：Transitions功能只能通过改变指定属性的开始值与结束值，然后再这两个属性值之间进行平滑的过渡来实现动画效果。所以Transitions功能不能实现比较复杂的动画效果；Animations功能可以定义多个关键帧以及定义每个关键帧中元素的属性值来实现复杂的动画效果。　　首先明白了Animations功能的工作原理，下面就通过一个实例来看一下Animations功能的用法：（到目前为止Safari 4+、Chrome 2+对Animations功能提供支持）。代码如下： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>Animations功能使用方法</title> 6 <style> 7 div { 8 background-color: red; 9 }10 @-webkit-keyframes mycolor {11 0% {12 background-color: red;13 }14 40% {15 background-color: darkblue;16 }17 70% {18 background-color: yellow;19 }20 100%

css3中的3种和动画相关的属性:变形（transform）过渡(transtion) 动画(animation)

阅读更多关于 css3中的3种和动画相关的属性:变形（transform）过渡(transtion) 动画(animation)

css3中的3种和动画相关的属性：变形（transform）----描述元素的静态样式，常用于配合后两者使用，实现动画效果过渡(transtion)----常和hover等事件配合使用，由事件触发。只能设定头尾。所有样式属性都要一起变化。动画(animation)----和gif动态图差不多，立即播放。可以设定循环次数。可以设定每一帧的样式和时间。结论：如果要灵活定制多个帧以及循环，用animation. 如果要简单的from to 效果，用 transition. 如果要使用js灵活设定动画属性，用transition. transform：字面上就是变形，改变的意思，定义了元素很多静态样式，只不过通过Transition和Animation指定如何改变不同的属性值，才实现了动画。 Transform包含了旋转rotate：通过指定的角度参数对原元素指定一个2D rotation（2D 旋转），需先有transform-origin属性的定义。 transform-origin定义旋转的基点，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(30deg): 顺时针转30度。扭曲skew：分为：沿着水平方向缩放：transform:skewX(2) 沿着垂直方向缩放

从零开始学 Web 系列教程

阅读更多关于从零开始学 Web 系列教程

大家好，这里是「从零开始学 Web 系列教程」，并在下列地址同步更新…… github：https://github.com/Daotin/Web 微信公众号：前端队长博客园：http://www.cnblogs.com/lvonve/ 在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！前言昨天收到一个朋友的留言反馈，意思是说文章太多，找起来很麻烦，做个索引页就好了。这个建议特别好，于是下面就是整个《从零开始学 Web 开发》所有内容的索引，并且按照知识点的分类排列好，每一篇文章的主要内容也简单的列举出来。本索引将长期不定期更新…… 索引从零开始学 Web 之 HTML 从零开始学 Web 之 HTML（一）认识前端什么是前端网页组成 Web 标准浏览器内核认识 HTML HTML 结构标准标签分类开发工具从零开始学Web之HTML（二）标签、超链接、特殊符号、列表、音乐、滚动、head等标签超链接特殊字符列表音乐标签滚动标签 head里面相关从零开始学 Web 之 HTML（三）表单表格表单标签语义化从零开始学 Web 之 CSS 从零开始学 Web 之 CSS（一）选择器 CSS概念选择器从零开始学 Web 之 CSS

H5知识点（三）CSS3动画

阅读更多关于 H5知识点（三）CSS3动画

过渡动画仅定义首尾状态属性 @keyframes mymove{ from{初始状态属性} to{结束状态属性} } 关键帧动画可定义任意多的关键帧从而实现复杂的动画 @keyframes mymove{ 0%{初始状态属性} 50%（中间再可以添加关键帧） 100%{结束状态属性} } animation animation-name 检索或设置对象所应用的动画名称必须与规则@keyframes配合使用， animation-duration 检索或设置对象动画的持续时间 animation-timing-function 检索或设置对象动画的过渡类型属性值: - linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) - ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) - ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0) - ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0) - ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) - step-start:马上跳到动画每一结束桢的状态 animation-fill-mode 设置对象状态属性值: none：默认值。不设置对象动画之外的状态

CSS3动画属性

阅读更多关于 CSS3动画属性

关于CSS3中动画属性的基本知识 animation顾名思义为动画的意思。Animation应用在页面DOM上使其产生动画的效果。在开始介绍Animation之前我们有必要先来了解一个特殊的东西，那就是"Key s",我们把他叫做“关键帧”，玩过flash的朋友可能对这个东西并不会陌生。 animation vs transition 相同点：都是随着时间改变元素的属性值。不同点：transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性；初始效果——最终的效果之间的变化；而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值；初始效果———动画帧———动画帧————最终的效果 animation 复合式写法；animation{move 5s liner -2s infinite reverse} 注：过度时间和延迟时间顺序不能互换，前面是过度时间，后面的是延迟时间。 1、animation-name (必要的) 是用来定义一个动画的名称，为@keyframes中的名称，否则不会有动画效果。none为默认值，当值为none时，将没有任何动画效果。另外我们这个属性跟前面所讲的transition一样

css3文字颜色渐变动画

阅读更多关于 css3文字颜色渐变动画

<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>WECHAT_EMPTY_TITLE</title> <style> @media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .masked{ background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96); -webkit-text-fill-color: transparent; -webkit-background-clip: text; -webkit-background-size: 200% 100%; -webkit-animation: masked-animation 4s infinite linear; } } @-webkit-keyframes

CSS3新特性

阅读更多关于 CSS3新特性

2.过渡 transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)复制代码 3.动画 animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running）复制代码 4.形状转换 transform:适用于2D或3D转换的元素 rotate(30deg); translate(30px,30px); scale(.8); skew(10deg,10deg); rotateX(180deg); rotateY(180deg); rotate3d(10,10,10,90deg); 5.选择器 6.阴影 box-shadow: 水平阴影的位置垂直阴影的位置模糊距离阴影的大小阴影的颜色阴影开始方向（默认是从里往外，设置inset就是从外往里）;复制代码 7.边框 border-image: 图片url 图像边界向内偏移图像边界的宽度(默认为边框的宽度) 用于指定在边框外部绘制偏移的量（默认0）铺满方式--重复（repeat）、拉伸（stretch）或铺满（round）（默认：拉伸（stretch））; 8.背景 background-clip 制定背景绘制（显示）区域 background-origin background

CSS3中的动画

阅读更多关于 CSS3中的动画

CSS3中的动画包括两种： Transition(过渡) Animation(动画) 这两种方法都可以让元素动起来，功能类似，但是稍有区别： Transition只定义某一个元素的开始状态和结束状态 Animation除了开始和结束状态之外，还可以定义中间任意时间点关键帧的状态剩下的内容就是CSS3完成任意两个时间区间内进行补间动画，达到平滑过渡的效果。 Transition transition的语法为： transition：transition-property, transition-duration, transition-timing-function, transition-delay翻译成中文就是：transition: 变换属性，持续时间，速率变化，变换延迟 transition-property：指定元素哪些属性改变时进行过渡。当它为all时，所有可过渡的属性变化时都会触发元素过渡效果，当它为none时，停止所有的过渡。所谓可过渡属性，是指在动画过程中，能够转化为某些类型的属性，这些类型包括color,length,percentage,number等等。比如某一个元素的margin,height,border-width这三个属性，在动画过程中都是以length的类型进行改变的，它们都是可过渡属性，且动画时的类型为length

订阅 css3动画