css 鼠标hover 水流上升动画

最新推荐文章于 2023-02-03 11:48:06 发布

VIP文章大东哦哦

最新推荐文章于 2023-02-03 11:48:06 发布

阅读量451

点赞数

分类专栏： html 文章标签： css3

本文链接：https://blog.csdn.net/qq_36454089/article/details/106761465

版权

实现原理
1 . 子盒子撑满父盒子 , 设置水流颜色
2 . 子盒子的伪元素after 宽高 1:1 , 设置边框圆角 , 颜色和文档背景色相同
3 . 带边框的圆角 , rotate(360deg) , 旋转360度 , 模拟水流动画
4 . 鼠标hover , 子盒子的伪元素加旋转动画 , 在加上 translateY()向上平移动画
5 . 给父盒子添加 overflow: hidden

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 300px;
      height: 400px;
      border: 1px solid #000;
      margin: 100px auto;
      position: relative;
    }

    .round {
      width: 100%;
      height: 100%;
      background: rgba(101, 203, 250, 0.3);
      position: relative;
      overflow: hidden;
    }

    .round:after {
      content: '';
      width: 800px;
      height: 800px;
      bac

最低0.47元/天解锁文章

大东哦哦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 鼠标hover 水流上升动画

实现原理1 . 子盒子撑满父盒子 , 设置水流颜色2 . 子盒子的伪元素after 宽高 1:1 , 设置边框圆角 , 颜色和文档背景色相同3 . 带边框的圆角 , rotate(360deg) , 旋转360度 , 模拟水流动画4 . 鼠标hover , 子盒子的伪元素加旋转动画 , 在加上 translateY()向上平移动画5 . 给父盒子添加 overflow: hidden<!DOCTYPE html><html lang="en"><h...
复制链接

扫一扫