基于CSS实现元素融合效果

ID:15961 / 打印

前言

现如今网页越来越趋近于动画,相信大家平时浏览网页或多或少都能看到一些动画效果,今天我们来做一个有意思的动画效果,通过 css3 实现元素融合效果,下面一起看看吧。

实现效果

在这里插入图片描述

完整源码

 <template>   <div class="parentBox">     <div class="contantBox"></div>   </div> </template> <style lang="less" scoped> .parentBox {   height: 100%;   background: rgb(31, 31, 31);   padding: 100px;   @keyframes filterBallMove {     50% {       left: 140px;     }   }   @keyframes filterBallMove2 {     50% {       right: 140px;     }   }   .contantBox {     position: absolute;     top: 50%;     left: 50%;     transform: translate(-50%, -50%);     width: 300px;     height: 200px;     filter: contrast(20);   }   .contantBox::before {     content: "";     position: absolute;     width: 120px;     height: 120px;     border-radius: 50%;     background: olive;     top: 40px;     left: 80px;     z-index: 2;     filter: blur(6px);     box-sizing: border-box;     animation: filterBallMove 4s ease-out infinite;   }   .contantBox::after {     content: "";     position: absolute;     width: 80px;     height: 80px;     border-radius: 50%;     background: green;     top: 60px;     right: 40px;     z-index: 2;     filter: blur(6px);     animation: filterBallMove2 4s ease-out infinite;   } } </style> 
文字融合

实现效果

在这里插入图片描述

完整源码

 <template>   <div class="parentBox">     <div class="contantBox">       <h1>hello Word!</h1>     </div>   </div> </template> <style lang="less" scoped> .parentBox {   height: 100%;   background: rgb(31, 31, 31);   padding: 100px;   .contantBox {     width: 100%;     height: 100%;     position: relative;     padding: 4em;     filter: contrast(20);     overflow: hidden;     background: rgb(0, 0, 0);     h1 {       font-family: Righteous;       color: white;       font-size: 4rem;       text-transform: uppercase;       line-height: 1;       animation: letterspacing 3s infinite alternate ease-in-out;       display: block;       position: absolute;       left: 50%;       top: 50%;       transform: translate3d(-50%, -50%, 0);       letter-spacing: -2.2rem;     }   }   @keyframes letterspacing {     0% {       letter-spacing: -2.4rem;       filter: blur(0.3rem);     }     50% {       filter: blur(0.5rem);     }     100% {       letter-spacing: 0.5rem;       filter: blur(0rem);       color: #fff;     }   } } </style> 
上一篇: css 动画实现节流的示例代码
下一篇: CSS-@规则(At-rules)常用语法使用总结

作者:admin @ 24资源网   2024-10-30

本站所有软件、源码、文章均有网友提供,如有侵权联系308410122@qq.com

与本文相关文章

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。