css实现会动的小水滴
2021/11/13 23:40:15
本文主要是介绍css实现会动的小水滴,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>会动的小水滴</title> <style type="text/css"> * { margin: 0; padding: 0; } body { height: 100vh; background: linear-gradient(rgb(95, 95, 250) 10%, rgb(3, 3, 110)); } .content { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .water-polo { position: relative; width: 200px; height: 200px; background: darkturquoise; overflow: hidden; border-top-left-radius: 80% 55%; border-top-right-radius: 0px; border-bottom-right-radius: 55% 80%; border-bottom-left-radius: 50%; transform: rotate(-45deg); } .water-polo::after { } .water-level{ position: absolute; /* 初始值 */ top: 33%; left: 67%; /* 初始值 */ top: 10%; left: 90%; transform: translate(-50%, -50%); width: 300px; height: 300px; border-radius: 45%; background: rgba(255, 255, 255, 0.8); animation: wave 5s linear infinite; } @keyframes wave { 100% { transform: translate(-50%, -50%) rotate(360deg); } } </style> </head> <body> <div class="content"> <div class="water-polo"> <div class="water-level" style="top: -10%;left: 110%;"> </div> </div> </div> </body> </html>
这篇关于css实现会动的小水滴的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-07uniapp动态设置不同的css有哪些方法?-icode9专业技术文章分享
- 2024-12-07UniApp 中,怎么通过 CSS 设置 view 组件的水平居中效果?-icode9专业技术文章分享
- 2024-12-06TailwindCSS开发入门教程
- 2024-12-06TailwindCSS项目实战:从入门到上手
- 2024-12-06TailwindCss项目实战:初学者指南
- 2024-12-05TailwindCSS入门指南:轻松上手实用教程
- 2024-12-05TailwindCss入门指南:轻松上手实用技巧
- 2024-12-04Tailwind.css入门:简洁高效的设计利器
- 2024-12-03Tailwind.css学习:从入门到实战的全面指南
- 2024-11-29Tailwind.css入门指南:快速上手实用教程