html画一个有光晕的动态光环
时间: 2023-07-31 12:14:09 浏览: 179
以下是一个基于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的动画实现动态效果。可以根据自己的需求调整宽高、颜色等参数。
相关问题
android button光晕动画
您可以通过为Button设置一个StateListDrawable来实现Button点击时的光晕效果,具体步骤如下:
1. 在drawable目录下创建一个selector文件,例如:button_selector.xml
```xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/button_pressed" android:state_pressed="true"/>
<item android:drawable="@drawable/button_normal"/>
</selector>
```
2. 在drawable目录下创建button_pressed.xml和button_normal.xml文件,分别表示按钮点击和未点击时的状态
button_pressed.xml:
```xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#33000000"/>
<corners android:radius="50dp"/>
</shape>
```
button_normal.xml:
```xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#000000"/>
<corners android:radius="50dp"/>
</shape>
```
3. 在布局文件中将Button的background设置为button_selector.xml即可实现光晕效果
```xml
<Button
android:id="@+id/btn_test"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:background="@drawable/button_selector"/>
```
当按钮被点击时,会显示一个半透明的圆形光晕,效果如下:
![button_pressed](https://img-blog.csdn.net/20180823144913744?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhcnRpY2lwYW50X2Jsb2c=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/q/80)
android button背景光晕动画
如果您想要实现一个在Button背景上显示光晕的动画效果,可以使用ValueAnimator和BlurMaskFilter来实现。具体步骤如下:
1. 在布局文件中,将Button的background设置为一个带圆角的背景,例如:
```xml
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:background="@drawable/button_bg"/>
```
2. 在drawable文件夹下创建一个新的xml文件,例如button_bg.xml,用来定义Button的背景:
```xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#343434" />
<corners android:radius="50dp" />
</shape>
```
这里的背景颜色为#343434,您可以根据需要修改。
3. 在Activity中,为Button设置点击事件,并在点击事件中实现光晕效果:
```java
Button button = findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 创建一个ValueAnimator,用来控制光晕的大小
ValueAnimator animator = ValueAnimator.ofInt(0, 50);
animator.setDuration(500);
animator.setInterpolator(new AccelerateDecelerateInterpolator());
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
// 获取光晕的大小值
int value = (int) animation.getAnimatedValue();
// 创建一个BlurMaskFilter,用来实现高斯模糊效果
BlurMaskFilter filter = new BlurMaskFilter(value, BlurMaskFilter.Blur.NORMAL);
// 创建一个Paint,设置光晕效果
Paint paint = new Paint();
paint.setMaskFilter(filter);
paint.setColor(Color.WHITE);
// 将光晕效果应用到背景上
Drawable drawable = button.getBackground();
if (drawable instanceof ShapeDrawable) {
((ShapeDrawable) drawable).getPaint().set(paint);
} else if (drawable instanceof GradientDrawable) {
((GradientDrawable) drawable).getPaint().set(paint);
} else if (drawable instanceof ColorDrawable) {
// do nothing
}
}
});
animator.start();
}
});
```
这里通过创建一个ValueAnimator,来修改光晕的大小值。同时,创建一个BlurMaskFilter,用来实现高斯模糊效果。然后将光晕效果应用到Button的背景上。
运行效果如下:
![button_background_animation](https://img-blog.csdn.net/20180823150343184?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhcnRpY2lwYW50X2Jsb2c=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/q/80)
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)