网站地图 | 联系我们 排名技术建站,让你对手追赶
你现在的位置:网站首页 > 学无止境 > CSS3|Html5 > 正文内容


CCS3教程:巧用CSS3渐变色实现动画/手记

发布时间:2019-03-17 | 编辑 : 小勇 | 分类 : CSS3|Html5 | 阅读: 次 | 评论 :0

CCS3教程:巧用CSS3渐变色实现动画/手记:如图

  1.  
  2. .page-login-v3
  3.     positionrelative
  4.     overflowhidden
  5. .page-login-v3:before { 
  6.     positionabsolute
  7.     z-index-1
  8.     content''
  9.     top: -100%
  10.     left: -100%
  11.     bottom: -100%
  12.     right: -100%
  13.     background-size100% 100%
  14.     background-color#FFE53B
  15.     background-image: linear-gradient(147deg, #FFE53B 0%#fd3838 74%); 
  16.     filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#FFE53B, endColorstr=#fd3838);/*IE<9>*/ 
  17.     -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#FFE53B, endColorstr=#fd3838)";/*IE8+*/ 
  18.     animation: bgposition 4s infinite linear alternate; 
  19.     z-index-1
  20. @keyframes bgposition { 
  21.     0% { 
  22.         transform: translate3d(30%30%0); 
  23.     } 
  24.     25% { 
  25.         transform: translate3d(-30%30%0); 
  26.     } 
  27.     50% { 
  28.         transform: translate3d(30%30%0); 
  29.     } 
  30.     75% { 
  31.         transform: translate3d(-30%30%0); 
  32.     } 
  33.     100% { 
  34.         transform: translate3d(30%-30%0); 
  35.     } 

下面来解释下上面属性的用法,以及注意点。


animation: bgposition  属性为 @keyframes 动画规定名称。
注释:请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。
@keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:

规定动画的名称
规定动画的时长
请用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。
0% 是动画的开始,100% 是动画的完成。
为了得到最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。

本文标签CCS3教程   赣州网站建设  

赞助我们:如果你觉得本站的内容对你确实有所帮助,请赞助我们让我们有动力为你继续奉献更多有用的内容→赞助我们

版权说明:如非注明,本站文章均为 小勇工作室 原创,转载请注明出处和附带本文链接 http://www.yl0797.com/html/2019/css_0317/389.html。


联系我们
QQ:
873268813
旺旺:
wsuper勇
邮箱:
给我发邮件
QQ群:
加入交流群

Powered By 小勇工作室,Copyright www.yl0797.com © 2008-2019, 赣ICP备15004575号