css3动画 | 易学教程

前端开发（四）HTML5和CSS3

阅读更多关于前端开发（四）HTML5和CSS3

一、圆角、rgba 设置某一个角的圆角，比如设置左上角的圆角： border-top-left-radius:30px 60px; border-top-left-radius: 60px; 同时分别设置四个角： border-radius:30px 60px 120px 150px; 设置四个圆角相同： border-radius:50%; ①盒子透明度表示法： .box { opacity:0.1; /* 兼容IE */ filter:alpha(opacity=10); } ②rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>透明度</title> <style type="text/css"> body{ background: url(images/banner01.jpg); } .box{ width: 300px; height: 100px; background-color: #000; color: #fff; text-align: center; line-height: 100px; font-size: 30px; /*设置透明度*/ opacity: 0.3; /*兼容IE*/

个人总结（css3新特性）

阅读更多关于个人总结（css3新特性）

1.前言css3这个相信大家不陌生了，是个非常有趣，神奇的东西！有了css3，js都可以少写很多！我之前也写过关于css3的文章，也封装过css3的一些小动画。个人觉得css3不难，但是很难用得好，用得顺手，最近我也在过一遍css3的一些新特性（不是全部，是我在工作上常用的，或者觉得有用的），以及一些实例，就写了这一篇总结！希望，这篇文章能帮到大家认识css3。写这篇文章主要是让大家能了解css3的一些新特性，以及基础的用法，感觉css3的魅力！如果想要用好css3，这个得靠大家继续努力学习，寻找一些讲得更深入的文章或者书籍了！如果大家有什么其他特性推荐的，欢迎补充！大家一起学习，进步！看这篇文章，代码可以不用看得过于仔细！这里主要是想让大家了解css3的新特性！代码也是很基础的用法。我给出代码主要是让大家在浏览器运行一下，让大家参考和调试。不要只看代码，只看代码的话，不会知道哪个代码有什么作用的，建议边看效果边看代码。2.过渡过渡，是我在项目里面用得最多的一个特性了！也相信是很多人用得最多的一个例子！我平常使用就是想让一些交互效果（主要是hover动画），变得生动一些，不会显得那么生硬！好了，下面进入正文！引用菜鸟教程的说法：CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：指定要添加效果的CSS属性指定效果的持续时间。2

css3动画帧

阅读更多关于 css3动画帧

动画帧实现： css3使用steps来实现逐帧动画，动画过程中可能出现抖动，实乃精度偏差问题。通常在动画里用到百分比单位时会出现抖动或位移现象，解决方法就是转换成具体的rem或px长度单位。动画一般只有background-position属性，有可以有很多帧，steps(1)这样去执行，也可以是两帧，steps(n)来执行。持续执行的动画帧可能会出现最后一帧跟第一帧一闪而过完全看不到，可以考虑给动画帧的雪碧图加一帧空白帧在最后补位。 .loadEffectBox{ position: absolute; width: 99px; height: 121.5px; left: 50%; top: 36%; transform: translateX(-50%); background: url('../img/loading/effect2.png') no-repeat; background-size: 1881px 121.5px; background-position:0 0; -webkit-animation:roadEffect 1.44s steps(18,end) infinite; -webkit-animation-fill-mode: backwards; } @-webkit-keyframes roadEffect{ 0%

前端知识学习总结篇（一）

阅读更多关于前端知识学习总结篇（一）

前言前端学习有一段时间了，对前端的一些知识点也了解的差不多了。Html5新增了许多的标签定义需要进行学习，Css3也有许多的属性包括标签的动画都是可以使用Css3的属性来进行定义的，这样就可以很方便的实现动画效果，以上就是Html5和Css3的学习重点。 JavaScript脚本语言可以获取Html的标签进行内容、样式的改变、设置点击事件进行页面跳转等。然后就是Dom文档有自己默认的布局方式是从左上角开始依次往下，标签也分为行标签和块标签。行标签可以占满一行。来源： CSDN 作者：技术承载梦想链接： https://blog.csdn.net/u013823101/article/details/100975615

CSS3实现PS中的蚁行线动画以及画布的马赛克背景图

阅读更多关于 CSS3实现PS中的蚁行线动画以及画布的马赛克背景图

话不多说，先看例子，外链效果截图如下：蚁行线马赛克背景代码：蚁行线代码如下： /*  <div class="ant"></div> */ /* 蚁行线动画 */ .ant { width: 200px; height: 200px; margin: 40px auto; border: 1px solid transparent; background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, black 0, black, 25%, transparent 0, transparent 50%) 0% 0%; background-size: 6px 6px; background-position: 0% 0%; animation: ants 10s linear infinite; } @keyframes ants { to { background-position: 100% 100%; } } 马赛克代码： /*  <div class="mosaic"></div> */ /* 马赛克背景 */ .mosaic { height: 285px; width: 495px;

CSS 学习手册--Super精心整理

阅读更多关于 CSS 学习手册--Super精心整理

目录 CSS 简介 1.CSS 简介 CSS 概述层叠次序 2.CSS 基础语法 CSS 语法值的不同写法和单位记得写引号多重声明：空格和大小写 3.CSS 高级语法选择器的分组继承及其问题友善地对待Netscape 4 继承是一个诅咒吗？ 4.CSS 派生选择器派生选择器 5.CSS id 选择器 id 选择器 id 选择器和派生选择器单独的选择器 6.CSS 类选择器 7.CSS 属性选择器对带有指定属性的 HTML 元素设置样式。 8.CSS 创建如何插入样式表多重样式 CSS样式 9.CSS 背景 10.CSS 文本缩进文本水平对齐字间隔字母间隔字符转换文本装饰处理空白符文本方向 11.CSS 字体 CSS 字体系列指定字体系列字体风格字体变形字体加粗字体大小 CSS 字体属性 12.CSS 链接设置链接的样式常见的链接样式 13.CSS 列表 14.CSS 表格 15.CSS 轮廓轮廓（Outline）实例： CSS 边框属性 CSS 框模型 16.CSS 框模型概述浏览器兼容性 17.CSS 内边距 CSS padding 属性单边内边距属性内边距的百分比数值 CSS 内边距属性 18.CSS 边框 CSS 边框边框与背景边框的样式边框的宽度边框的颜色 19.CSS 外边距 CSS margin

CSS3 文字渐变动画

阅读更多关于 CSS3 文字渐变动画

背景剪裁语法： background-clip : border-box || padding-box || context-box || no-clip || text 本次用到的就是: -webkit-background-clip:text;（谷歌浏览器）示例：从局部到全局渐变 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>文字渐变动画</title> 6 <style> 7 .slideShine{ 8 9 background:#871317 -webkit-linear-gradient(left,#561214,#febaf7 50%,#ff0 90%,#561214) no-repeat 0 0; 10 11 background-size:20% 100%; 12 13 -webkit-background-clip: text; 14 15 -webkit-text-fill-color: transparent; 16 17 font-size: 36px; 18 19 text-align: center; 20 21 font-weight: bold; 22 23 text-decoration: underline; 24 25 }

CSS3 实现太极图案

阅读更多关于 CSS3 实现太极图案

CSS3实现太极图案分析图片组成（如下图所示）：先给出html代码： <div class="box"> <div class="content"> <div class="left"></div> <div class="right"></div> <div class="inner-circle up"> <div class="sm-circle circle-white"></div> </div> <div class="inner-circle down"> <div class="sm-circle circle-black"></div> </div> </div> </div> View Code 步骤一：先把紫色框出来的两个div修改其样式，使其分别成两个半圆，一黑一白。 .left{ position: absolute; width: 50%; top: 0; left:0; height: 100%; background-color: #000000; border-radius: 100% 0 0 100% / 50% 0 0 50%; } .right{ position: absolute; width: 50%; top: 0; right: 0;; height: 100%; background-color: #FFFFFF;

html + css3 demo

阅读更多关于 html + css3 demo

最近，在做一个比较大的网站，主要服务于欧美地区，全站为英文版本，因为是电子产品，因此，要展示产品内在美（扯个蛋！）仿照小米、錘子、苹果等网站，着重于css3动效效果，搜集整理了一些网站中用到的动效图，方便以后翻阅。所有页面的动效依照 anicollection 动效来实现旋转菜单所有图标使用了：font-awesome.min.css 所有图片的跨度调整显示跨度 40deg 为一个跨度，360/9 从第二个图标开始延迟上一个图标的2倍时间所有图标都在在上一个图标的基础上增加 40deg，目的是让图标都垂直居中显示代码效果： demo Tab 页内容：从右往左移显示的tab内容区的宽高使用 vw / vh；动画名称及动画效果实现，均以 class 命名；水平方向，由右向左移动，使用了 transform: translate3d(100%, 0, 0) -> transform: translate3d(0, 0, 0)，由100%移到了0%，圆点为 0，长度为100 通过控制 tab内容区 class 来实现平滑左移效果代码效果： demo 来源： http://www.cnblogs.com/baiyygynui/p/6917617.html

CSS3——2D变形和3D变形

阅读更多关于 CSS3——2D变形和3D变形

2D变形(CSS3) transform transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。变形转换 transform transform 变换变形的意思《 transformers 变形金刚》移动 translate(x, y) translate 移动平移的意思 translate(50px,50px); 使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。可以改变元素的位置，x、y可为负值； translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动） translateX(x)仅水平方向移动（X轴移动） translateY(Y)仅垂直方向移动（Y轴移动） .box { width: 499.9999px; height: 400px; background: pink; position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); /* 走的自己的一半 */ } 让定位的盒子水平居中缩放 scale(x, y) transform:scale(0.8,1);

订阅 css3动画