在Flex 4中建立一个自定义Halo Accordion header的皮肤

最新推荐文章于 2019-07-25 15:15:54 发布
最新推荐文章于 2019-07-25 15:15:54 发布
阅读量2.2k 收藏
点赞数
文章标签： flex header library layer application encoding

本文来自:RIAMeeting：http://riameeting.com/node/404

这是一篇来自Flex Example的文章，介绍《如何在Flex 4中自定义Halo Accordion组件的header部分的皮肤》。

原文地址：http://blog.flexexamples.com/2009/06/21/creating-a-custom-halo-accordion-header-skin-in-flex-4/

下面的例子描述了在Flex 4里面，我们如何自定义Accordion header，使用的方式是建立一个新的基于spark skin的skin，然后对其skin parts进行修改以便设定Accordion header。 默认Halo Accordion header spark skin可以在以下位置找到 ：/frameworks/projects/sparkskins/src/mx/skins/spark/AccordionHeaderSkin.mxml

如果要执行这个例子，您必须安装Flash Player 10，同时在您的Flex Builder 3中安装Flex SDK 4。 关于更多的关于如何下载和安装Flex SDK 4在Flex Builder，请看

http://blog.flexexamples.com/2008/08/02/using-the-beta-gumbo-sdk-in-flex-builder-3/

关于下载Flex SDK 4 latest build，请访问

http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4

（编者注：本篇文章撰写的时候，还未有Flash Builder 4，因此是在Flex Builder 3里面完成的。）

 

  
  
  1. 
    
    
    
     
     <?xml 
     
     version=
     
     "1.0" encoding=
     
     "utf-8"
     
     ?>
    
    
  2. 
    
    
    
     
     <!-- 
     
     <a href=
     
     "http://blog.flexexamples.com/2009/06/21/creating-a-custom-halo-accordion-header-skin-in-flex-4/" title=
     
     "http://blog.flexexamples.com/2009/06/21/creating-a-custom-halo-accordion-header-skin-in-flex-4/"
     
     >http
     
     :
     
     //blog.flexexamples.com/2009/06/21/creating-a-custom-halo-accordion...</a> -->
    
    
  3. 
    
    
    
     
     <s
     
     :Application 
     
     name=
     
     "Accordion_SparkSkin_headerStyleName_skin_test"
    
    
  4. 
    
    
    
     
     xmlns
     
     :fx=
     
     "http://ns.adobe.com/mxml/2009"
    
    
  5. 
    
    
    
     
     xmlns
     
     :mx=
     
     "library://ns.adobe.com/flex/halo"
    
    
  6. 
    
    
    
     
     xmlns
     
     :s=
     
     "library://ns.adobe.com/flex/spark"
     
     >
    
    
  7. 
    
    
    
     
      
    
    
  8. 
    
    
     
     
     <fx
     
     :Style
     
     >
    
    
  9. 
    
    
    
     
     .customAccordionHeadStyles 
     
     {
    
    
  10. 
    
    
    
     
     skin
     
     : ClassReference
     
     (
     
     "skins.CustomAccordionHeaderSkin"
     
     );
    
    
  11. 
    
    
     
     
     }
    
    
  12. 
    
    
     
     
     </fx
     
     :Style
     
     >
    
    
  13. 
    
    
    
     
      
    
    
  14. 
    
    
     
     
     <mx
     
     :Accordion id=
     
     "accordion"
    
    
  15. 
    
    
    
     
     headerStyleName=
     
     "customAccordionHeadStyles"
    
    
  16. 
    
    
     
     
     left=
     
     "20" 
     
     right=
     
     "20" 
     
     top=
     
     "20" 
     
     bottom=
     
     "20"
     
     >
    
    
  17. 
    
    
     
     
     <mx
     
     :VBox label=
     
     "Red" 
     
     width=
     
     "100%" 
     
     height=
     
     "100%"
     
     >
    
    
  18. 
    
    
     
     
     <mx
     
     :Text 
     
     text=
     
     "Panel 1" 
     
     />
    
    
  19. 
    
    
     
     
     </mx
     
     :VBox
     
     >
    
    
  20. 
    
    
     
     
     <mx
     
     :VBox label=
     
     "Orange" 
     
     width=
     
     "100%" 
     
     height=
     
     "100%"
     
     >
    
    
  21. 
    
    
     
     
     <mx
     
     :Text 
     
     text=
     
     "Panel 2" 
     
     />
    
    
  22. 
    
    
     
     
     </mx
     
     :VBox
     
     >
    
    
  23. 
    
    
     
     
     <mx
     
     :VBox label=
     
     "Yellow" 
     
     width=
     
     "100%" 
     
     height=
     
     "100%"
     
     >
    
    
  24. 
    
    
     
     
     <mx
     
     :Text 
     
     text=
     
     "Panel 3" 
     
     />
    
    
  25. 
    
    
     
     
     </mx
     
     :VBox
     
     >
    
    
  26. 
    
    
     
     
     <mx
     
     :VBox label=
     
     "Green" 
     
     width=
     
     "100%" 
     
     height=
     
     "100%"
     
     >
    
    
  27. 
    
    
     
     
     <mx
     
     :Text 
     
     text=
     
     "Panel 4" 
     
     />
    
    
  28. 
    
    
     
     
     </mx
     
     :VBox
     
     >
    
    
  29. 
    
    
     
     
     <mx
     
     :VBox label=
     
     "Blue" 
     
     width=
     
     "100%" 
     
     height=
     
     "100%"
     
     >
    
    
  30. 
    
    
     
     
     <mx
     
     :Text 
     
     text=
     
     "Panel 5" 
     
     />
    
    
  31. 
    
    
     
     
     </mx
     
     :VBox
     
     >
    
    
  32. 
    
    
     
     
     </mx
     
     :Accordion
     
     >
    
    
  33. 
    
    
    
     
      
    
    
  34. 
    
    
    
     
     </s
     
     :Application
     
     >

 

自定义Accordion header skin，请看以下代码：

 

  
  
  1. 
    
    
    
     
     <?xml 
     
     version=
     
     "1.0" encoding=
     
     "utf-8"
     
     ?>
    
    
  2. 
    
    
    
     
     <!-- 
     
     <a href=
     
     "http://blog.flexexamples.com/2009/06/21/creating-a-custom-halo-accordion-header-skin-in-flex-4/" title=
     
     "http://blog.flexexamples.com/2009/06/21/creating-a-custom-halo-accordion-header-skin-in-flex-4/"
     
     >http
     
     :
     
     //blog.flexexamples.com/2009/06/21/creating-a-custom-halo-accordion...</a> -->
    
    
  3. 
    
    
    
     
     <s
     
     :SparkSkin 
     
     name=
     
     "CustomAccordionHeaderSkin"
    
    
  4. 
    
    
    
     
     xmlns
     
     :fx=
     
     "http://ns.adobe.com/mxml/2009"
    
    
  5. 
    
    
    
     
     xmlns
     
     :s=
     
     "library://ns.adobe.com/flex/spark"
    
    
  6. 
    
    
    
     
     minWidth=
     
     "21" minHeight=
     
     "21"
    
    
  7. 
    
    
     
     
     alpha.disabled=
     
     "0.5"
     
     >
    
    
  8. 
    
    
     
     
     <!-- states 
     
     -->
    
    
  9. 
    
    
     
     
     <s
     
     :states
     
     >
    
    
  10. 
    
    
     
     
     <s
     
     :State 
     
     name=
     
     "up" 
     
     />
    
    
  11. 
    
    
     
     
     <s
     
     :State 
     
     name=
     
     "over" 
     
     />
    
    
  12. 
    
    
     
     
     <s
     
     :State 
     
     name=
     
     "down" 
     
     />
    
    
  13. 
    
    
     
     
     <s
     
     :State 
     
     name=
     
     "disabled" 
     
     />
    
    
  14. 
    
    
     
     
     <s
     
     :State 
     
     name=
     
     "selectedUp" 
     
     />
    
    
  15. 
    
    
     
     
     <s
     
     :State 
     
     name=
     
     "selectedOver" 
     
     />
    
    
  16. 
    
    
     
     
     <s
     
     :State 
     
     name=
     
     "selectedDown" 
     
     />
    
    
  17. 
    
    
     
     
     <s
     
     :State 
     
     name=
     
     "selectedDisabled" 
     
     />
    
    
  18. 
    
    
     
     
     </s
     
     :states
     
     >
    
    
  19. 
    
    
    
     
      
    
    
  20. 
    
    
     
     
     <!-- layer 
     
     3
     
     : fill 
     
     -->
    
    
  21. 
    
    
     
     
     <s
     
     :Rect 
     
     left=
     
     "1" 
     
     right=
     
     "1" 
     
     top=
     
     "1" 
     
     bottom=
     
     "1"
     
     >
    
    
  22. 
    
    
     
     
     <s
     
     :fill
     
     >
    
    
  23. 
    
    
     
     
     <s
     
     :SolidColor 
     
     color=
     
     "white"
    
    
  24. 
    
    
     
     
     color.up=
     
     "red"
    
    
  25. 
    
    
     
     
     color.over=
     
     "haloOrange"
    
    
  26. 
    
    
     
     
     color.down=
     
     "yellow"
    
    
  27. 
    
    
     
     
     color.selectedUp=
     
     "haloGreen"
    
    
  28. 
    
    
     
     
     color.selectedOver=
     
     "haloBlue"
    
    
  29. 
    
    
     
     
     color.selectedDown=
     
     "purple" 
     
     />
    
    
  30. 
    
    
     
     
     </s
     
     :fill
     
     >
    
    
  31. 
    
    
     
     
     </s
     
     :Rect
     
     >
    
    
  32. 
    
    
    
     
      
    
    
  33. 
    
    
     
     
     <!-- layer 
     
     4
     
     : fill lowlight 
     
     -->
    
    
  34. 
    
    
     
     
     <s
     
     :Rect 
     
     left=
     
     "1" 
     
     right=
     
     "1" 
     
     bottom=
     
     "1" 
     
     height=
     
     "9"
     
     >
    
    
  35. 
    
    
     
     
     <s
     
     :fill
     
     >
    
    
  36. 
    
    
     
     
     <s
     
     :LinearGradient 
     
     rotation=
     
     "90"
     
     >
    
    
  37. 
    
    
     
     
     <s
     
     :GradientEntry 
     
     color=
     
     "0x000000" 
     
     alpha=
     
     "0.0099" 
     
     />
    
    
  38. 
    
    
     
     
     <s
     
     :GradientEntry 
     
     color=
     
     "0x000000" 
     
     alpha=
     
     "0.0627" 
     
     />
    
    
  39. 
    
    
     
     
     </s
     
     :LinearGradient
     
     >
    
    
  40. 
    
    
     
     
     </s
     
     :fill
     
     >
    
    
  41. 
    
    
     
     
     </s
     
     :Rect
     
     >
    
    
  42. 
    
    
    
     
      
    
    
  43. 
    
    
     
     
     <!-- layer 
     
     5
     
     : fill highlight 
     
     -->
    
    
  44. 
    
    
     
     
     <s
     
     :Rect 
     
     left=
     
     "1" 
     
     right=
     
     "1" 
     
     top=
     
     "1" 
     
     height=
     
     "9"
     
     >
    
    
  45. 
    
    
     
     
     <s
     
     :fill
     
     >
    
    
  46. 
    
    
     
     
     <s
     
     :SolidColor 
     
     color=
     
     "0xFFFFFF"
    
    
  47. 
    
    
     
     
     alpha=
     
     "0.33"
    
    
  48. 
    
    
     
     
     alpha.over=
     
     "0.22"
    
    
  49. 
    
    
     
     
     alpha.down=
     
     "0.12" 
     
     />
    
    
  50. 
    
    
     
     
     </s
     
     :fill
     
     >
    
    
  51. 
    
    
     
     
     </s
     
     :Rect
     
     >
    
    
  52. 
    
    
    
     
      
    
    
  53. 
    
    
     
     
     <!-- layer 
     
     6
     
     : highlight stroke 
     
     (all states except down
     
     ) 
     
     -->
    
    
  54. 
    
    
     
     
     <s
     
     :Rect 
     
     left=
     
     "1" 
     
     right=
     
     "1" 
     
     top=
     
     "1" 
     
     bottom=
     
     "1" excludeFrom=
     
     "down"
     
     >
    
    
  55. 
    
    
     
     
     <s
     
     :stroke
     
     >
    
    
  56. 
    
    
     
     
     <s
     
     :LinearGradientStroke 
     
     rotation=
     
     "90"
     
     >
    
    
  57. 
    
    
     
     
     <s
     
     :GradientEntry 
     
     color=
     
     "0xFFFFFF" 
     
     alpha.over=
     
     "0.22" 
     
     />
    
    
  58. 
    
    
     
     
     <s
     
     :GradientEntry 
     
     color=
     
     "0xD8D8D8" 
     
     alpha.over=
     
     "0.22" 
     
     />
    
    
  59. 
    
    
     
     
     </s
     
     :LinearGradientStroke
     
     >
    
    
  60. 
    
    
     
     
     </s
     
     :stroke
     
     >
    
    
  61. 
    
    
     
     
     </s
     
     :Rect
     
     >
    
    
  62. 
    
    
    
     
      
    
    
  63. 
    
    
     
     
     <!-- layer 
     
     6
     
     : highlight stroke 
     
     (down state only
     
     ) 
     
     -->
    
    
  64. 
    
    
     
     
     <s
     
     :Rect 
     
     left=
     
     "1" 
     
     top=
     
     "1" 
     
     bottom=
     
     "1" 
     
     width=
     
     "1" includeIn=
     
     "down"
     
     >
    
    
  65. 
    
    
     
     
     <s
     
     :fill
     
     >
    
    
  66. 
    
    
     
     
     <s
     
     :SolidColor 
     
     color=
     
     "0x000000" 
     
     alpha=
     
     "0.07" 
     
     />
    
    
  67. 
    
    
     
     
     </s
     
     :fill
     
     >
    
    
  68. 
    
    
     
     
     </s
     
     :Rect
     
     >
    
    
  69. 
    
    
     
     
     <s
     
     :Rect 
     
     right=
     
     "1" 
     
     top=
     
     "1" 
     
     bottom=
     
     "1" 
     
     width=
     
     "1" includeIn=
     
     "down"
     
     >
    
    
  70. 
    
    
     
     
     <s
     
     :fill
     
     >
    
    
  71. 
    
    
     
     
     <s
     
     :SolidColor 
     
     color=
     
     "0x000000" 
     
     alpha=
     
     "0.07" 
     
     />
    
    
  72. 
    
    
     
     
     </s
     
     :fill
     
     >
    
    
  73. 
    
    
     
     
     </s
     
     :Rect
     
     >
    
    
  74. 
    
    
     
     
     <s
     
     :Rect 
     
     left=
     
     "1" 
     
     top=
     
     "1" 
     
     right=
     
     "1" 
     
     height=
     
     "1" includeIn=
     
     "down"
     
     >
    
    
  75. 
    
    
     
     
     <s
     
     :fill
     
     >
    
    
  76. 
    
    
     
     
     <s
     
     :SolidColor 
     
     color=
     
     "0x000000" 
     
     alpha=
     
     "0.25" 
     
     />
    
    
  77. 
    
    
     
     
     </s
     
     :fill
     
     >
    
    
  78. 
    
    
     
     
     </s
     
     :Rect
     
     >
    
    
  79. 
    
    
     
     
     <s
     
     :Rect 
     
     left=
     
     "1" 
     
     top=
     
     "2" 
     
     right=
     
     "1" 
     
     height=
     
     "1" includeIn=
     
     "down"
     
     >
    
    
  80. 
    
    
     
     
     <s
     
     :fill
     
     >
    
    
  81. 
    
    
     
     
     <s
     
     :SolidColor 
     
     color=
     
     "0x000000" 
     
     alpha=
     
     "0.09" 
     
     />
    
    
  82. 
    
    
     
     
     </s
     
     :fill
     
     >
    
    
  83. 
    
    
     
     
     </s
     
     :Rect
     
     >
    
    
  84. 
    
    
    
     
      
    
    
  85. 
    
    
     
     
     <!-- layer 
     
     2
     
     : 
     
     border 
     
     -->
    
    
  86. 
    
    
     
     
     <s
     
     :Rect 
     
     left=
     
     "0" 
     
     right=
     
     "0" 
     
     top=
     
     "0" 
     
     bottom=
     
     "0" 
     
     width=
     
     "69" 
     
     height=
     
     "20"
     
     >
    
    
  87. 
    
    
     
     
     <s
     
     :stroke
     
     >
    
    
  88. 
    
    
     
     
     <s
     
     :SolidColorStroke 
     
     color=
     
     "0x696969"
    
    
  89. 
    
    
     
     
     alpha=
     
     "1"
    
    
  90. 
    
    
     
     
     alpha.over=
     
     "1"
    
    
  91. 
    
    
     
     
     alpha.down=
     
     "1" 
     
     />
    
    
  92. 
    
    
     
     
     </s
     
     :stroke
     
     >
    
    
  93. 
    
    
     
     
     </s
     
     :Rect
     
     >
    
    
  94. 
    
    
    
     
      
    
    
  95. 
    
    
    
     
     </s
     
     :SparkSkin
     
     >

 

注意：此项目是基于测试版的Flex SDK 4，当你用新版本的Flex SDK 4编译的时候，API可以会发生改变，造成无法编译成功。

lihe111
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ReachVariantEditor:一个编辑 Halo 的工具
07-24
ReachVariant工具用于编辑 Halo: Reach 游戏变体的工具，在从 Halo: The Master Chief Collection 的 PC 版本获得的文件上进行测试。... 前一个文件夹包含 JavaScript zlib 端口“pako”，其原始部分是
halo-theme-yun:一个 halo 主题
05-08
Halo Theme Yun特点 已适配 PC、PAD、手机 CSS、JS 已进行兼容处理，浏览器兼容性较好 支持个性化主题颜色修改、夜间模式、图片轮播、阅读进度等等 想了大半天整出来的效果不错性能拉胯的封面+导航条关于本主题第一...
使用Halo搭建我的博客
xuzhougeng blog
07-25 786
这两年来写的东西越来越多，而这些东西又到处乱放，导致我找自己写过的笔记也是非常麻烦，所以这次借着搭建博客的机会整理以前的文档。 安装 Step1: 从https://github.com/halo-dev/halo/releases/下载最新的Halo安装包 mkdir Halo && cd Halo # 1.1.0beta wget http...
创建一个自定义的 Halo Accordion header skin
xiaoxin888888的专栏
02-21 1013
<br />The default Halo Accordion header Spark skin can be found at /frameworks/projects/sparkskins/src/mx/skins/spark/AccordionHeaderSkin.mxml.<br />主应用<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/06/21/creating-a-custom-h
Flex中Accordion用法
前端开发、简约至上！ - Html，Css，Js，Jquery ...
12-23 131
&lt;? xml version = " 1.0 " encoding = " utf-8 " ?&gt; &lt; mx:Application   xmlns:mx = " http://www.adobe.com/2006/mxml "         layout = " vertical " ...
flex里面Accordion的用法
liusong721的专栏
09-04 6139
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <!--[CDATA[
Flex4之各种导航条设计
JavaCrazyer的ItEye(codewu.com)技术博客
06-25 131
目前常用的Flex4的导航容器有TabNavigator,Accordion,ViewStack，目前Flex4的大部分可视UI组件都被替换为&lt;s:开头【也通常叫Spark组件】取代了Flex3的&lt;mx:标签 首先来说下TabNavigator   &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;s:Application ...
halo-1.2.0.jar
05-14
你可以用它来部署一个博客网站的框架，可以在本地运行，也可以再云服务器。在上面发表一些博客文章。有后台有前台，还可以通过下载皮肤更变博客的展示样式
halo-api:一个 NodeJS 包，它是官方 Halo API 的包装器
05-29
每个命令都包含一个示例用法。 例子 var haloWrapper = require('@ekgrahn/halo-api'); var halo = new haloWrapper(YOUR_API_KEY); // Halo 5 PC Service Records halo.h5.stats.playerServiceRecordsPC('MAX1MUM...
H2Codez:一个用于还原并向Halo 2 Editing Kit添加功能的模块
05-25
产生一个玩家，让您测试某些事物如何与人互动/从游戏内的角度查看地图。 （没有动静）。 恢复了一些H2tool命令。 （模型碰撞，模型物理学）。 基本渲染模型导入方法（BSP转换）。 删除共享标签成为可选操作。 ...
Flex 学习之路之十五 导航的使用 Accordion、NavigatorContent
Leove的专栏
10-13 364
Accordion、NavigatorContent
Flex Accordion样式
hpu_jxust的专栏
05-13 615
Accordion {    borderStyle: solid;    borderThickness: 1;    headerHeight: 29;    backgroundAlpha: 0.68;    textIndent: 0;    openDuration: 481;    highlightAlphas: 0.56, 0.58;    f
flex 控制accordion 导航器中的按钮
Swordstone的专栏
04-13 1155
如果想要控制按钮权限，单纯使用 change事件无法实现，因为这个事件发生的时候，按钮还没有被创建，所以引用时不起作用，只能在控件的complete事件中才能起作用，代码如下： http://ns.adobe.com/mxml/2009"       xmlns:s="library://ns.adobe.com/flex/spark"       xmlns:mx="library:/
Flex 学习笔记（十一） 改变Accordion的标题样式
raphero
12-27 3390
目前据我观察Accordion的标题样式无法直接更改，需要通过Accordion的headerStyleName引用CSS样式中的Skin，并创建一个Skin来设置其样式。Application：  <s:Button label=" 过渡安置与生活重建中需关注的问题" skinClass="skins.rebui
Flex样式-Accordion篇
牛栏山矿泉水
12-31 138
Accordion { borderStyle: solid; borderThickness: 1; headerHeight: 29; backgroundAlpha: 0.68; textIndent: 0; openDuration: 481; highlightAlphas: 0.56, 0.58; fillAlphas: 0.81, 0....
Flex中Accordion圆角标题栏的实现
xinem的专栏
02-21 2999
 问题概要     一些UI设计使用到了圆角并且accordion要求定义圆角以使得它与UI设计一致。这就需要为Accordion header添加新的渲染（renderer）。  解决办法一种很简单的方法是为accordion定义一些圆角和其他的一些东西。而不是定义新的渲染（renderer），其他支持圆角的Flex皮肤都可以使用。在这个解决办法中，我们使用和acco
Flex4 可折叠的面板控件Accordion
僕はなきむし
12-05 197
设置非常简单，和TabNavigator基本一样 &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:m...
node-v0.8.10-sunos-x64.tar.gz
最新发布
05-16
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
【课程设计】实现的金融风控贷款违约预测python源码.zip
05-16
【课程设计】实现的金融风控贷款违约预测python源码.zip
html画一个有光晕的动态光环
05-25
以下是一个基于CSS3的动态光晕效果： HTML代码： ``` <div class="halo"></div> ``` CSS代码： ``` .halo { width: 150px; height: 150px; border-radius: 50%; position: relative; background-color: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,1); animation: halo 2s linear infinite; } @keyframes halo { from { box-shadow: 0 0 0 0 rgba(255,255,255,0.8); } to { box-shadow: 0 0 0 70px rgba(255,255,255,0); } } ``` 通过box-shadow属性设置光晕效果，利用CSS3的动画实现动态效果。可以根据自己的需求调整宽高、颜色等参数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值