基于CSS实现元素融合效果

樱花羽蝶

前言

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

复制代码

实现效果

完整源码

1. <template>
2. <div class="parentBox">
3. <div class="contantBox"></div>
4. </div>
5. </template>
6. <style lang="less" scoped>
7. .parentBox {
8. height: 100%;
9. background: rgb(31, 31, 31);
10. padding: 100px;
11. @keyframes filterBallMove {
12. 50% {
13. left: 140px;
14. }
15. }
16. @keyframes filterBallMove2 {
17. 50% {
18. right: 140px;
19. }
20. }
21. .contantBox {
22. position: absolute;
23. top: 50%;
24. left: 50%;
25. transform: translate(-50%, -50%);
26. width: 300px;
27. height: 200px;
28. filter: contrast(20);
29. }
30. .contantBox::before {
31. content: "";
32. position: absolute;
33. width: 120px;
34. height: 120px;
35. border-radius: 50%;
36. background: olive;
37. top: 40px;
38. left: 80px;
39. z-index: 2;
40. filter: blur(6px);
41. box-sizing: border-box;
42. animation: filterBallMove 4s ease-out infinite;
43. }
44. .contantBox::after {
45. content: "";
46. position: absolute;
47. width: 80px;
48. height: 80px;
49. border-radius: 50%;
50. background: green;
51. top: 60px;
52. right: 40px;
53. z-index: 2;
54. filter: blur(6px);
55. animation: filterBallMove2 4s ease-out infinite;
56. }
57. }
58. </style>

复制代码

1. 文字融合

复制代码

实现效果

完整源码

1. <template>
2. <div class="parentBox">
3. <div class="contantBox">
4. <h1>hello Word!</h1>
5. </div>
6. </div>
7. </template>
8. <style lang="less" scoped>
9. .parentBox {
10. height: 100%;
11. background: rgb(31, 31, 31);
12. padding: 100px;
13. .contantBox {
14. width: 100%;
15. height: 100%;
16. position: relative;
17. padding: 4em;
18. filter: contrast(20);
19. overflow: hidden;
20. background: rgb(0, 0, 0);
21. h1 {
22. font-family: Righteous;
23. color: white;
24. font-size: 4rem;
25. text-transform: uppercase;
26. line-height: 1;
27. animation: letterspacing 3s infinite alternate ease-in-out;
28. display: block;
29. position: absolute;
30. left: 50%;
31. top: 50%;
32. transform: translate3d(-50%, -50%, 0);
33. letter-spacing: -2.2rem;
34. }
35. }
36. @keyframes letterspacing {
37. 0% {
38. letter-spacing: -2.4rem;
39. filter: blur(0.3rem);
40. }
41. 50% {
42. filter: blur(0.5rem);
43. }
44. 100% {
45. letter-spacing: 0.5rem;
46. filter: blur(0rem);
47. color: #fff;
48. }
49. }
50. }
51. </style>

复制代码

到此这篇关于基于CSS实现元素融合效果的文章就介绍到这了,更多相关css元素融合内容请搜索晓枫资讯以前的文章或继续浏览下面的相关文章，希望大家以后多多支持晓枫资讯！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

成都大神通

看看，学习学习～～～～

福陶宜

顶顶更健康！！！

RyeWhisky

感谢楼主分享。