css3动画

CSS3动画积累+动画库+3d动画

阅读更多关于 CSS3动画积累+动画库+3d动画

一、animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库。包含了60多款不同类型的CSS3动画，包括：晃动，闪动，各种淡出淡出效果，如果你想快速的整合各种CSS3动画特效的话，使用它即可方便的实现。查看演示： https://daneden.github.io/animate.css/ github地址： https://github.com/daneden/animate.css 二、magic.css动画库查看演示： http://www.17sucai.com/pins/demoshow/10001 github地址： https://github.com/miniMAC/magic 三、Effect.css 针对不同UI的CSS3动画和过渡效果集，包含了丰富的CSS3动画和过渡效果，包括： Modal overlay button list listscroll Caption 等等查看演示： http://www.gbtags.com/gb/linkviewer/3147.htm 四、hover.css Hover.css是一套使用CSS3动画实现的Hover特效集锦，包含了： 2D变形边框过渡效果阴影过渡效果页脚翻转效果查看演示： http://ianlunn.github

阅读更多关于 CSS3动画

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>CSS3动画</title> <style type="text/css"> div{ height: 50px; width: 50px; background: pink; /*调用动画*/ animation:animates 5s linear 1s 2; } /*创建关键帧*/ @keyframes animates{ 0%{ width: 0px; transform: translate(50px,0); } 25%{ width: 25px; height: 25px; transform: translate(150px,0) rotate(90deg); } 50%{ width: 50px; height: 50px; transform: translate(300px,0) rotate(180deg); } 75%{ width: 25px; height: 25px; transform: translate(150px,0) rotate(270deg); } 100%{ width: 50px; height: 50px; transform: translate(50px,0) rotate(360deg)

美妙的 CSS3 动画！一组梦幻般的按钮效果

阅读更多关于美妙的 CSS3 动画！一组梦幻般的按钮效果

　　今天给大家带来的是五款梦幻般的动画按钮效果。下面是在线演示，把鼠标放在按钮上试试，有惊喜哦！ CSS3 引入了众多供功能强大的新特性，让设计和开发人员能够轻松的创作出各种精美的界面效果。　　温馨提示：为保证最佳的效果，请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。源码下载在线演示　　这些精美的效果用到了 CSS3 border-radius（圆角）、box-shadow（阴影）、transition（变形）、transform（转换）和 animation（动画）等特性，公共部分的代码精简以后如下： section > div { display: inline-block; position: relative; width: 200px; height: 200px; margin: 0px auto; /*对于正方形元素border-radius设置为50%刚好变成圆形*/ border-radius: 50%; /*宽度为10px的、不透明度为0.7的黑色边框效果*/ border: 10px solid hsla(0,0%,0%,.7); /*通过边框阴影实现立体按钮效果，inset是内阴影效果*/ box-shadow: inset 0 15px 15px -5px hsla(0,0%,100%,.7),

四款帮助前端设计师快速实现超酷动画或过渡效果的CSS3类库

阅读更多关于四款帮助前端设计师快速实现超酷动画或过渡效果的CSS3类库

新的 CSS3 中添加了有关动画和过渡效果的特性模块，这些模块可以有效地取代过去我们在前端开发中普遍使用的Javascript，从而更加方便快捷的实现各种设计及其UI中的特殊效果。在今天这篇文章中，我们给大家推荐四款精心挑选的 CSS3 动画和过渡效果类库，可以帮助设计师多快好省的实现各种前端的动画效果，相信大家一定能够在以后的前端web项目中使用的到。 Animate.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库。包含了60多款不同类型的CSS3动画，包括：晃动，闪动，各种淡出淡出效果，如果你想快速的整合各种CSS3动画特效的话，使用它即可方便的实现。使用也非常简单，引入animate.css文件，再使用JS来添加对应动画的类定义即可，如下： <head> <link rel = "stylesheet" href = "animate.min.css" > </head> jQuery： $ ( '#yourElement' ). addClass ( 'animated bounce' ); 魔术CSS3动画 Magic CSS3动画类库也是一套包含了各种不同CSS3动画效果的类库，包括：旋转，幻灯等等使用方法类似animate.css，添加对应的动画效果（class定义

CSS3动画--过渡效果

阅读更多关于 CSS3动画--过渡效果

CSS3动画--过渡效果 transition 设置四个过渡属性 transition-property　　过渡的名称 transition-duration　　　　过度效果花费的时间 transition-timing function　　过渡效果的时间曲线 transition-delay 　　　　　过渡效果开始时间 1、案例源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3动画--过渡效果</title> <style> *{margin: 0;padding: 0} section{width: 200px;height: 200px;background-color: coral;transition:width 2s,height 2s, transform 2s; margin: 50px auto;} section:hover{width: 400px;height: 400px;transform:rotate(360deg);} </style> </head> <body> <section></section> </body> </html> 2、案例效果来源： https://www.cnblogs.com/qikeyishu/p

css3之Transition(转换)

阅读更多关于 css3之Transition(转换)

一直觉得css3效果很炫，也间接得学习过，可是没有实际做过些效果，所以再次使用时还是稀里糊涂，好像没学过一样，所以还是好记性不如烂笔头，我还是记载下来吧，方便自己忘记时查看。　　本文参照 w3cplus网站，这个网站很方便学习，讲解也很齐全。介绍给大家使用。　　W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。” 　　语法： transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]* 　　transition主要包含四个属性值：　　　　执行变换的属性：transition-property, 　　　　变换延续的时间：transition-duration, 　　　　在延续时间段

CSS3

阅读更多关于 CSS3

文本效果 1、text-shadow 文本阴影（艺术字） h1{ text-shadow: 5px 5px 5px #FF0000; /*4个参数：水平阴影、垂直阴影、模糊的距离、阴影颜色*/ } 2、text-overflow 文本溢出 p{ text-overflow: clip; /*剪掉溢出的文本*/ text-overflow: ellipsis; /*用省略号...代替溢出的部分来显示，最常用*/ } overflow可以处理所有的溢出，text-overflow专用于文本溢出。我们可以在:hover伪类中设置overflow/text-overflow，当鼠标移到内容上时，显示全部|完整内容。 3、word-break 单词换行拆分方式 p{ word-break:break-all; /*如果换行处的单词过长，会拆分单词，并不会加连词线*/ word-break: keep-all; /*如果换行处的单词过长，会转到下一行显示*/ word-break: normal; /*使用浏览器默认的换行符*/ } 边框 1、圆角边框 div{ border:1px solid red; border-radius:5px; /*设置圆角大小，数值越大，越圆*/ } border-radius需要和border | backgroud-image | background

【巩固】CSS3的3D动画 ——3D旋转（1）

阅读更多关于【巩固】CSS3的3D动画 ——3D旋转（1）

最近学了妙味的css3的动画，2D,3D的都有，先写一个最简单的3d翻转效果，鼠标移入div，正反面翻转效果。注意点有：要给正反面外面加个父级； transform-style: preserve-3d ;是加在正反面的父级，使动画具有3d的效果；但是ie11并不支持 preserve-3d perspective 也要加在父级上，使动画具有透视效果；要给父级也加上宽高，否则动画没有效果 <style> #box{ margin : 70px auto ; width : 300px ; height : 200px ; //父级要加宽高，否则旋转基点会很离谱 transform - style : preserve - 3d ; //preserve-3d加在父级上 transform - origin : 50px 100px ; transition : 0.3s linear ; position : relative ; perspective : 500px ; //perspective也要加在父级上 } #box div{ width : 300px ; height : 200px ; font : 50px / 100px arial ; text - align : center ; position : absolute ; } #box div

CSS3学习总结

阅读更多关于 CSS3学习总结

CSS3 边框 border-radius 用于创建圆角 box-shadow 用于向方框添加阴影 border-image 可以使用图片来创建边框 CSS3 背景 background-size 规定背景图片的尺寸 background-origin 规定背景图片的定位区域 CSS3 文本效果 text-shadow 可向文本应用阴影 word-wrap 允许强制文本换行 CSS3 @font-face 规则　　在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont) CSS3 2D 转换 2D Transform 方法 transform 向元素应用 2D 或 3D 转换。函数描述 matrix( n , n , n , n , n , n ) 定义 2D 转换，使用六个值的矩阵。 translate( x , y ) 定义 2D 转换，沿着 X 和 Y 轴移动元素。 translateX( n ) 定义 2D 转换，沿着 X 轴移动元素。 translateY( n ) 定义 2D 转换，沿着 Y 轴移动元素。 scale( x , y ) 定义 2D 缩放转换，改变元素的宽度和高度。 scaleX

CSS3 skew倾斜、rotate旋转动画

阅读更多关于 CSS3 skew倾斜、rotate旋转动画

css3出现之前，我们实现一个对象的一组连续动画需要通过JavaScript或Jquery编写，脚本代码较为复杂；若需要实现倾斜、旋转之类的动画难度将更高（我还没试过用JavaScript或Jquery如何实现），而且即使能实现估计花的时间代价及维护难度是很大的，很多时候只能依靠画图工具制作此类动画文件；有时候在想如果不用脚本语言，也不用画图工作制作动画文件，就能在网页上实现倾斜、旋转之类的动画效果多好。最近挤出一些业余时间学习CSS3，其中就包含很多动画示例，花了点时间学习和整理今天分享使用html+css3实现skew倾斜、rotate旋转动画，我们先看最终效果图（我这里为了演示效果，就用QQ屏幕截成多张图片，然后制作成gif动画给大家简单展示下，效果不好请大家多多包涵）图1 具体步骤如下： 1、放置两个div，一个作为容器（图1中绿色背景部分 id="warp"），另一个作为动画元素（图1中黄色背景部分 id="box"） HTML代码： <div id="warp"> <div id="box">WEB</div> </div> CSS代码（设置容器及动画元素默认样式）： #warp { width: 320px; height: 320px; background: #6FDE82; margin: 20px auto; } #box { height:

订阅 css3动画