@keyframes bg1icon8_move{
0%{transform:scale(3) rotateX(0deg);}
50%{transform:scale(2) rotateX(180deg);}
100%{transform:scale(1) rotateX(360deg);}
}
中间用空格隔开就行了, 下面是完整的例子
<!DOCTYPE HTML><html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style type="text/css">
div{
margin:120px auto;
width:60px;
height:30px;
background-color:#999999;
transform-origin:center top;
animation:bg1icon8_move 3s infinite;
}
@keyframes bg1icon8_move{
0%{transform:scale(3) rotateX(0deg);}
50%{transform:scale(2) rotateX(180deg);}
100%{transform:scale(1) rotateX(360deg);}
}
</style>
<div></div>
</body>
</html>
1 将第二个的延迟时间（animation-delay） 设置成第一个的持续时间( animation-duration )
2 多个动画应用时用逗号分隔开，如下图：
添加修改CSS代码如下 ：
logo-site,logo-sites{position:relative;float:left;margin:18px 0 0 10px;width:220px;max-height:50px;overflow:hidden;transition-duration:5s}
logo-site img,logo-sites img{width:220px;max-height:50px}@media screen and (max-width:480px){
logo-site,logo-sites{width:140px}}@media screen and (min-width:900px){
logo-site:before{content:"";position:absolute;left:-665px;top:-460px;width:220px;height:15px;background-color:rgba(255,255,255,5);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-animation:searchLights 1s ease-in 1s infinite;-o-animation:searchLights 1s ease-in 1s infinite;animation:searchLights 1s ease-in 1s infinite}}@-webkit-keyframes searchLights{0%{left:-100px;top:0}to{left:120px;top:100px}}@-o-keyframes searchLights{0%{left:-100px;top:0}to{left:120px;top:100px}}@-moz-keyframes searchLights{0%{left:-100px;top:0}to{left:120px;top:100px}}@keyframes searchLights{0%{left:-100px;top:0}to{left:120px;top:100px}}
site-title{font-size:24px;font-size:24rem;font-weight:700;padding:0 0 2px 0}
site-name{display:none}@media screen and (min-width:900px){
logo-site img,logo-sites img{transition-duration:8s}
操作流程
把css代码当中的logo-site改成你网站包围logo的css即可(f12键审核元素，即可找到你的logo的css元素)。找到你logo的css名称然后把上面的css代码修改成你的css名称，放入css代码当中即可(防止出错，记得备份!)
以上就是logo添加css扫光效果的方法，当然你也可以运用到其他的地方。
注意，有些模板CSS代码不相同，不能贸然的使用，可能会出现错误，新手不要尝试。
在w3school上面查到一下，CSS3中的动画由animation和@keyframes 结合实现出来的。以往项目已来，一直做的是单个动画，现在讲解一下两个动画效果如何组合在一起
首先了解一下animation的所有属性 W3school是这样定义的：
然后我们用@keyframes 规则来创建两个我们要执行的动画
接下来我们把写好的两个效果捆绑在“div”元素上 ， 如下：
这样效果就完成了。
PS这里并没有写兼容，说一下浏览器兼容。
感觉自己总是混淆css各种动画效果，所以再这里总结一下
1 transition ，所在元素块样式变动时启动，可用于样式变动时 产生过渡动画效果
| transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
| transition-timing-function | 规定速度效果的速度曲线。 |
| transition-delay | 定义过渡效果何时开始。 |
2 tranform :用于平移，旋转，缩放，透视
语法
animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。
animationname 必需。定义动画的名称。
keyframes-selector 必需。动画时长的百分比。值：0-100%,from（与 0% 相同）,to（与 100% 相同）
css-styles 必需。一个或多个合法的 CSS 样式属性。
4@media :可以根据屏幕大小响应式改变样式
接下来利用transition和transfrom实现一个简单的翻牌效果,先看效果
选择器
CSS选择器主要包括id、class和标记选择器。复合选择器就是两个或多个基本选择器，通过不同方式连接而成的选择器。
交集选择器由连个选择器直接连接构成，其中第一个必须是标记选择器，第二个必须是类别选择器或者id选择器，这两个选择器之间不能有空格。这种方式构成的选择器，将选中同时满足前后定义的元素。
并集选择器是多个选择器通过逗号连接而成的。
最常用的是通过嵌套的形式，即多个选择器之间以空格隔开的后代选择器。
伪类选择器
除了3种主要类型的选择器之外，还有伪类选择器和伪元素选择器。
伪类选择器是在之前选择器的基础上，加上一些用于指定元素状态的关键字，如鼠标位置、浏览历史、内容状态等。伪类选择器的标志是在选择器与关键字之间以:间隔。
a:hover{background:green;}
a:visited{color:green;}123456
伪元素选择器的功能是在选择某元素的基础上，在文档中再增加一些额外的元素。伪元素的标志是添加::
<p>isaboy</p>p::before{content:"sysuzhyupeng";}1234
before选择器将在段落之前插入content属性中的文字内容，所以段落将显示为”sysuzhyupengisaboy”。
CSS层叠
CSS层叠指的是在CSS继承的基础上，出现冲突的解决方案。层叠的规则涉及权重的计算，这里不详细展开。
CSS禅意花园
CSS禅意花园是加拿大的设计师DaveShea创建的，他在网站设计的过程中发现CSS的巨大潜力没有被发掘出来，采用征集作品的方式来展现CSS魅力。像两列布局的代表作《郊野》，三列布局的代表作193号作品，三列布局的变体《百合池塘》，多列布局的代表作《郁金香》，圆角设计的《日与夜》等。
盒子模型
在CSS中，一个独立的盒子由content、padding、margin和border组成。一个盒子所占的宽度和高度，是由盒子的4个部分相加而成的。
一个页面由很多盒子组成，这些盒子之间会相互影响，因此掌握盒模型需要从两方面来理解，一是理解一个孤立的盒子的内部结构，二是理解多个盒子间的相互关系。
盒子模型分为IE盒模型和w3c盒模型，IE盒模型的width包括了盒子的padding和border，而w3c的width只包括盒子content的宽度。怎么样才算是选择了“标准w3c盒子模型”呢？很简单，就是在网页的顶部加上doctype声明。假如不加doctype声明，那么各个浏览器会根据自己的行为去理解网页，即IE浏览器会采用IE盒子模型去解释你的盒子，而ff会采用标准w3c盒子模型解释你的盒子，假如加上了doctype声明，那么所有浏览器都会采用标准w3c盒子模型去解释你的盒子。
border用于分隔不同元素，在计算精细的版面时，一定要将border的宽度考虑进去。border的属性有三个，分别是border-color、border-width和border-style。在给元素设background-color的时候，IE的作用域为padding+content，而Firefox则为padding+content+border。这在border设为dotted的时候表现得更明显(dotted的间隙展现出背景色)。
为了方便组织各种盒子的排列和布局，CSS规范的指定者进行了深入细致的考虑。CSS规范的思路是，先确定一种标准的排版模式，这样可以保证设置的简单化，这就是标准流。但是仅仅通过标准流的方式，很多版式是无法实现的，所以CSS规范又给出了浮动属性和定位属性等。
<span>和<div>标记一样，作为容器标记而被广泛应用在HTML语言中，两者除了块级元素和行内元素的区别之外，可以互换，这两个标记起到的作用都是独立出各个区块，在这个意义上两者没有不同。
如果要精确地控制盒子的位置，就必须对margin有更深的理解，因为padding存在于盒子内部，通常它不会涉及盒子之间的关系和相互影响的问题。当两个行内元素紧邻时，它们之间的距离为第一个盒子的margin-right加上第二个盒子的margin-left。然而如果不是行内元素，而是垂直的块级元素，就会出现外边距合并的情况，较小的margin塌陷到较大的margin中，要解决这个问题可以参考我另一篇博文BFC
margin也可以设为负值，会使盒子向相反的反向移动，甚至覆盖在另外的盒子上。当块是父子关系的时候，可以将子块从父块中分离出来。
盒子的浮动与定位
在标准流中，没有指定宽度的块级元素会沿着水平方向无限伸展，直到包含它的元素的边界。CSS中有一个属性float，默认值为none，如果将float的值设为left或者right，盒子的宽度不再伸展，而是根据盒子内的内容宽度来确定。当两个元素分别向左和向右浮动的时候(box1向右浮动，box2向左浮动)，我们发现，可以在不调整HTML的情况下通过CSS布局调整内容的显示位置(box2在box1的左边)。这样我们就可以在写HTML的时候，确定内容的逻辑位置，在CSS中确定内容的显示位置，把重要的内容放在逻辑位置的较前面，这样加载网页的时候，用户就会先看到重要内容。
使用clear属性可以清除浮动的影响，假设不希望文字围绕左边浮动的盒子，可以在文字的p标签中设置clear:left。clear属性可以设为left、right和both(both通常用来清除整行元素的浮动)。
CSS中position的值有四种：
static，默认值，盒子按照标准流(包括浮动)方式布局
relative，盒子相对于它原来的标准进行移动，相对定位的盒子仍在标准流。
absolute，绝对定位，盒子以它的包含框为基准进行偏移，绝对定位的盒子从文档流中脱离。
fixed，固定定位，与绝对定位相似，只是包含框变成浏览器窗口。
确定absolute的包含框有这几个原则：
position属性已经被设置，而且不是static。所以经常出现父元素相对定位、绝对定位或者固定定位，而子元素绝对定位的情况。
是从子元素向祖先元素中查找，祖先元素中第一个满足上一条规则的元素。
IE6中有一个固有错误，相对于父元素的左边进行绝对定位会加上父元素的padding，这时候需要给父元素添加一个属性height:1%。
浏览器的Bug与Hack
任何程序都很难清除掉所有Bug，浏览器也一样。加上对规范的解释不统一，因此类似的错误一直存在。因此也应运而生很多CSSHack来解决这些Bug，多数CSSHack都是用来解决IE55以下浏览器的。因为浏览器的支持度问题，网站又分为了渐进增强和优雅降级两种开发方式。
z-index
z-index用来设置重叠块的上下位置，和它的名称一样，想象页面为x-y轴，垂直于页面的方向为z轴。当两个块z-index值相同时，按照原来的方式堆叠。z-index默认值为0，可以设置正负值。
字体
p{font-family:Arial,"TimesNewRoman";}123以上语句同时声明了两个字体名称，如果用户的计算机中没有第一种，则使用第二种。一些字体的名字中含有空格，所以需要用引号将其引起来。
文字大小的常用单位是px，表示在浏览器上一个像素单位的大小，因为访问者的显示器分辨率不同，而且每个像素的实际大小也不同，所以px实际上是一个相对单位。现在我们常用的适配屏幕布局的单位是rem。
字体的行高line-heigth可以设置成与字体大小的比值。
颜色
在HTML页面中，颜色统一采用RGB格式。由三原色的不同比重组成，一共有0-255档。当三种颜色都设置为255时就是白色，其中，FFFFFF是十六进制的表示法，前两位为红色分量，接下来为绿色，最后为蓝色。不仅可以写成十进制，也可以写成rgb(0%,0%,0%)的百分比，或者0-255的十进制数字。
圆角
一个150pxx150px大小的方形，将它的四个角的半径都设置成50%。根据W3Cborder-radius的规范定义，如果border-radius的值是百分比的话，就是相对于borderbox的宽度和高度的百分比。在我们的例子中，盒子的宽高都是150px，所以50%对应的就是75px。
也就是说，把border-radius设置为50%已经可以实现圆角效果了，设成100%反而会损失性能，具体可以参考border-radius50%和100%的区别
CSS3动画
CSS3动画主要通过transition和animation两种方式来实现，其中，transition是为页面元素设置某个需要产生动画效果的属性，如宽度(width)，高度(height)，透明度(opacity)，甚至3D旋转等，并使这些值在变化时产生相应的过渡效果。而animation可以预先为动画设置多个节点，在每个节点中含有不同的状态属性，比transition来得更精细。
a{color:fff;}a:hover{color:green;}
a{-webkit-transition:all5s;transition:all5s;}12345678910
这里我们设置了all，即a标签任何属性变化，都以动画的形式呈现，动画的时间为05秒。我们还可以设置过渡效果的速度变化(加速度)，除了linear，ease外，还有ease-in，ease-out，ease-in-out等速度曲线可以选择，分别代表慢速开始，慢速结束，慢速开始和结束。
a{-webkit-transition:all5slinear;transition:all5slinear;}1234我们还能为动画设置延迟的时间，放在最后一个参数。
a{transition:color5slinear,background5sease-in-out1s;}123我们还可以利用伪元素来实现一些动画效果，这里要注意的是，伪元素的hover状态是:hover::after，而不能为::after:hover(在less中不用考虑这个问题)
a:hover{padding-left:20px;}a:hover::after{right:5%;}123456
通过CSS3可以实现很多动画效果，比如滑屏(切换left值)，或者对页面进行缩放，使用transform属性中的scale方法。
content{-webkit-transform:scale(1,1);transform:scale(1,1);}contentmove{-webkit-transform:scale(0,0);transform:scale(0,0);}
希望能帮到您
欢迎分享，转载请注明来源：表白网
微信扫一扫
支付宝扫一扫
评论列表（0条）