用PS实现星光效果。 休闲练习

 用的软件:PS CS3  效果:星光

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用CSS中的`position`属性和`@keyframes`关键字来实现星光闪入的动态效果。 首先,我们可以创建一个包含所有星光的容器,使用`position: relative;`来设置相对定位。然后,可以为每个星光创建一个单独的元素,并使用`position: absolute;`来设置绝对定位。接下来,通过`@keyframes`来定义星光闪入的动画效果。 以下是一个示例代码: HTML代码: ``` <div class="stars-container"> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> </div> ``` CSS代码: ``` .stars-container { position: relative; width: 100%; height: 100%; } .star { position: absolute; width: 2px; height: 2px; background-color: white; border-radius: 50%; animation: star 1s infinite; } @keyframes star { 0% { opacity: 0; transform: scale(0); } 50% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0); } } ``` 在上面的代码中,我们定义了一个名为`stars-container`的容器,并为其中的每个星光元素创建了`star`类。在`@keyframes`中,我们定义了星光的动画效果,包括透明度和缩放比例的变化。通过将`animation`属性设置为`star`,我们将此动画应用于每个星光元素。 你可以在自己的项目中使用类似的代码来实现星光闪入的动态效果
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值