css3动画 | 易学教程

CSS3 滤镜Filter亮度动画

阅读更多关于 CSS3 滤镜Filter亮度动画

CSS3 滤镜Filter亮度动画 -webkit-filter:brightness 值越高亮度越亮 <pre> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .img{ background: url(http://weiqunwang.net/demo/css3mask/kate.png) no-repeat; width:355px; height:296px; -webkit-filter:brightness(1); -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/ } @-webkit-keyframes mymove /*Safari and Chrome*/ { to { -webkit-filter:brightness(20);} } </style> </head> <body> <div class="img"> </div> </body> </html> </pre> 来源： https://www.cnblogs.com/newmiracle/p/11876735.html

CSS3做动物走路效果

阅读更多关于 CSS3做动物走路效果

CSS3做动物走路效果采用的CSS3切换序列帧做核心代码如下 <pre>.game .role { width: 60px; height: 86px; position: absolute; top: -83px; background-image: url(../images/role5.png); background-repeat: no-repeat } .roleRunAm { -webkit-animation-name: roleRunAm; -webkit-animation-duration: 0.9s; -webkit-animation-timing-function: steps(6); -webkit-animation-iteration-count: infinite; animation-name: roleRunAm; animation-duration: 0.9s; animation-timing-function: steps(6); animation-iteration-count: infinite } @-webkit-keyframes roleRunAm { 0% { background-position: 0 0 } 100% { background-position: -365px 0 } } @keyframes

重温HTML和CSS3

阅读更多关于重温HTML和CSS3

重温Web前端基础本篇幅中着重文字，只是记录一些自己的见解，巩固下自身基础网页结构是什么？结构层 html 导航，列表，段文字，图片，链接，表示层 css 颜色，大小，位置，行为层 JavaScript，弹出，切换等。什么是html？ HTML是用来描述网页的一种语言。不是编程语言，是标记语言什么是CSS？ CSS （层叠样式表）是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。何为javascript？ JavaScript一种脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。 HTML 1993年开始提出草案，发展到现在，已经经历二十余年，版本也已经更新到现在的H5，html语言作为网络语言标准，在计算机的发展史中有不可或缺的地位。一. 书写自己的第一个页面  <!DOCTYPE html>  <html lang="en">  <head>  <meta

css3 transform做动画

阅读更多关于 css3 transform做动画

css3 transform做动画第一种用关键帧这里就不说了就说第二种方法用 transition属性 ps:1jquery anim不支持transform动画但css还是支。 2 css3关键帧就是不能动态修改关键帧属性所以采用这个。 <pre> <img class="p1_wz1"src="{$yuming}/images/1/p1_wz1.jpg" /> .p1_wz1{ width: 2.3rem; position: absolute; left: 41.6%; top: 4.2rem; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; transition: all 2s ease-in-out; } </pre> 然后运行下如下代码 <pre> $(".p1_wz1").css({"-webkit-transform":"rotate(260deg)"}); </pre> 马上就旋转了起来进度条可以参考这个方法来做来源： https://www.cnblogs.com/newmiracle/p/11864385.html

github上值得关注的前端项目

阅读更多关于 github上值得关注的前端项目

综合/资源 frontend-dev-bookmarks 一个巨大的前端开发资源清单。 star:15000 front-end-collect 分享自己长期关注的前端开发相关的优秀网站、博客、以及活跃开发者。 star:860 Front-end-Interview-questions 史上最全前端开发面试问题及答案 f2e-hub 包含 Animation，UI，dialog，Carousels，color，image，workflow 等。 star:100 awesome-javascript 一系列很棒的 javascript 库，资源。 star:3100 fks 前端技能汇总，包含前端知识架构，后端知识， linux ，书籍推荐等。 star:4000 node123 node.js 中文资料导航。 star:1200 mobile-web-favorites 移动端web开发收藏夹。 star:200 gulp-book Gulp 入门指南样式/UI Semantic-UI 让你使用任何 HTML 标签来表现UI控件。这是一款语义化设计的前端框架，为攻城师而制作的可复用的开源前端框架。 star:17500 primer CSS 风格指南。 star:3600 测试/工具 mocha 一个简单、灵活有趣的 JavaScript 测试框架，用于 Node.js

css3 mask遮罩动画(照明灯效果)

阅读更多关于 css3 mask遮罩动画(照明灯效果)

<pre> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .wrap{ position:absolute; width: 400px; border:1px solid black; } #mask{ height: 300px; background:url(http://sandbox.runjs.cn/uploads/rs/142/wat3wtnz/dongzhi.jpg) lightblue; -webkit-mask: url(http://sandbox.runjs.cn/uploads/rs/142/wat3wtnz/mask.png) no-repeat; -webkit-mask-size:30px 20px; /*animation: 2s maskPosition infinite alternate ;*/ } @keyframes maskPosition{ 0%{-webkit-mask-position:0 0;} 100%{-webkit-mask-position:1rem 1rem;} } </style> </head> <body> <div class="wrap"> <div id="mask"

过渡---CSS3

阅读更多关于过渡---CSS3

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。过渡动画：是从一个状态渐渐的过渡到另外一个状态帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片在CSS3里使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），就可以实现平滑的过渡，为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。语法格式: transition: 要过渡的属性花费时间运动曲线何时开始; 如果有多组属性变化，还是用逗号隔开。属性描述 CSS transition 简写属性，用于在一个属性中设置四个过渡属性。 3 transition-property 规定应用过渡的 CSS 属性的名称。 3 transition-duration 定义过渡效果花费的时间。默认是 0。 3 transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 3 transition-delay 规定过渡效果何时开始。默认是 0。 3 如果想要所有的属性都变化过渡，写一个all 就可以 transition-duration

CSS任务七

阅读更多关于 CSS任务七

一、必备技能 1、HTML5的audio定义音频流（同时看看视频标签、画布标签、拖放标签等较常用的部分） 2、处理半透明（分清楚不同方案之间的区别，以及了解清楚这个属性的兼容性如何，如何去解决它的兼容性。） 3、CSS3 教程 https://www.runoob.com/css3/css3-backgrounds.html background-clip： https://www.runoob.com/cssref/css3-pr-background-clip.html CSS3动画：来源： https://www.cnblogs.com/hello9102/p/11846350.html

IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性3

阅读更多关于 IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性3

5 用户界面属性在CSS3中，新的用户界面特性包括重设元素尺寸、盒尺寸及轮廓等。本小节着重介绍一下resize属性，只有Firefox 4和Safari 3浏览器支持此属性。resize属性可用于重定义textarea的大小，可能的值包括如下几种。 Ø　none：UserAgent没有提供尺寸调整机制，用户不能调节元素的尺寸。 Ø　both：UserAgent提供了双向尺寸调整机制，用户可以调节元素的宽度和高度。 Ø　horizontal：UserAgent提供了单向水平尺寸调整机制，用户可以调节元素的宽度。 Ø　vertical：UserAgent提供了单向垂直尺寸调整机制，用户可以调节元素的高度。示例代码如下所示： 6 动画属性也许CSS3最令人兴奋的增补，就是在没有JavaScript元素的情况下产生动画。CSS3的动画有3个常用属性：transform﹑transition﹑animation。transform属性虽然看起来可以实现动画的效果，但其本质是静态的，其实就是一个图形的变形工具；而transition属性是一个简单的动画属性，操作起来非常简单；animation属性是一个名副其实的动画属性，是transition属性的扩展，但功能十分强大，可以定义多个关键帧及每个关键帧中元素的属性值来实现复杂的动画效果。下面的示例使用transition属性模仿一个效果

CSS3 animation动画与transition过渡比较

阅读更多关于 CSS3 animation动画与transition过渡比较

共同点 animation动画与transition过渡都可以实现动画效果，拥有下面共同的属性 animation:mymove 2s linear infinite alternate; transition: width 1s ease-out; 1、动画名称（name）@key-frame 2、过渡时间（duration）规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3、延迟时间（delay）规定动画何时开始。 4、时间函数（timing-function）规定动画的速度曲线，默认是 "ease"。值描述 linear 动画从头到尾的速度是相同的。 ease 默认。动画以低速开始，然后加快，在结束前变慢。 ease-in 动画以低速开始。 ease-out 动画以低速结束。 ease-in-out 动画以低速开始和结束。 cubic-bezier( n , n , n , n ) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。区别 animation动画比transition过渡多了下面的属性。 1、播放次数（iteration-count） animation:mymove 2s linear infinite; 参数： n:表示播放n次 infinite:无限播放 2、播放方向（direction） animation

订阅 css3动画