CSS3 新特性学习案例

最新推荐文章于 2022-07-20 22:29:57 发布

GoldenaArcher

最新推荐文章于 2022-07-20 22:29:57 发布

阅读量261

点赞数 1

分类专栏： # CSS 文章标签： css3 css html js 前端

本文链接：https://blog.csdn.net/weixin_42938619/article/details/116410683

版权

CSS 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

CSS3 新特性学习案例

先放一个结合了 JavaScript 的案例，做完了之后发现 CSS 的动画真的蛮有意思的，怪不得之前看到 PVZ（植物大战僵尸, Plant vs Zombie）也有用 H5C3 + JS 实现的:

一只僵尸爱跳舞

案例 1,使用伪元素完成导航栏悬浮切割

这种轮播的功能其实真的还蛮适合拆出来单独作为组件的拆分，只要将轮换的宽度传进去，就可以做到复用了——毕竟点击事件的效果都是一样的。

效果图：

pseudo-element

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @font-face {
        font-family: "iconfont";
        src: url("//at.alicdn.com/t/font_2515425_tgqqtv87f1d.eot");
        src: url("//at.alicdn.com/t/font_2515425_tgqqtv87f1d.eot?#iefix") format("embedded-opentype"),
          url("//at.alicdn.com/t/font_2515425_tgqqtv87f1d.woff2") format("woff2"),
          url("//at.alicdn.com/t/font_2515425_tgqqtv87f1d.woff") format("woff"),
          url("//at.alicdn.com/t/font_2515425_tgqqtv87f1d.ttf") format("truetype"),
          url("//at.alicdn.com/t/font_2515425_tgqqtv87f1d.svg#iconfont") format("svg");
      }
      .iconfont {
        font-family: "iconfont";
      }

      .banner {
        position: relative;
        margin: 100px auto;
        width: 500px;
        height: 200px;
        background-color: #eee;
      }
      .banner::before,
      .banner::after {
        display: none;
        top: calc(50% - 9px);
        font-family: "iconfont";
        font-size: 18px;
      }
      .banner::before {
        position: absolute;
        left: 0;
        /* &#xe63b; */
        content: "\e63b";
      }
      .banner::after {
        position: absolute;
        right: 0;
        /* &#xe639; */
        content: "\e639";
      }
      .banner:hover::before,
      .banner:hover::after {
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="banner"></div>
  </body>
</html>

案例 2，初试 transition

使区域可以自动伸缩：

transision-1

源码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 200px;
        height: 100px;
        background-color: #aaa;
        transition: width 1s ease 0s;
      }
      div:hover {
        width: 400px;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

案例 2，transition 结合 JavaScript 模拟血量增长

其实就像以前玩的页游，用血瓶会加血的简单效果

效果图：

transition-2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .blood {
        box-sizing: border-box;
        padding: 5px;
        margin-bottom: 20px;
        width: 200px;
        height: 50px;
        border: 1px solid red;
      }
      .blood-percentage {
        height: 100%;
        max-width: 100%;
        /* width: 50%; */
        background-color: red;
        transition: width 0.5s;
      }
    </style>
  </head>
  <body>
    <div class="blood">
      <div class="blood-percentage"></div>
    </div>
    <button>点我加血</button>
    <script>
      const btn = document.querySelector("button");
      const bloodPercentage = document.querySelector(".blood-percentage");
      bloodPercentage.style.width = "50%";
      console.log(btn);
      btn.onclick = function () {
        // console.log(bloodPercentage.style.width);
        bloodPercentage.style.width =
          parseInt(bloodPercentage.style.width) + 10 + "%";
        console.log(bloodPercentage.style.width);
      };
    </script>
  </body>
</html>

案例 3，transition 结合 hover 的使用

其实就是当鼠标悬浮在图片上，用 transition 完成页面切换的延时效果

效果图：

transition-2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .zombie {
        background-image: url("https://wdrfree.com/public/demos/animatespritekeyframes/walkingdead.png");
        height: 312px;
        width: 200px;
        transition: all 0.5s;
      }
      .zombie:hover {
          background-position: -200px;
      }
    </style>
  </head>
  <body>
    <div class="lawn">
      <div class="zombie"></div>
    </div>
</html>

后来我发现，不用 transition 看起来效果更有意思一点：

zombie-moving

我就想到了之前偶然看到的植物大战僵尸前端版，于是就想着用 setInterval 结合 transition 与精灵图特效——精灵图部分可以参考 CSS 的十个高级使用技巧中的对应部分——或许能够完成一个移动的僵尸？

最后自然也是实现了效果：

zombie-3

实现的代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .zombie {
        position: absolute;
        right: 0;
        background-image: url("https://wdrfree.com/public/demos/animatespritekeyframes/walkingdead.png");
        height: 312px;
        width: 200px;
        transition: right 0.5s;
        /* transition: all 0.5s; */
      }
      .lawn {
        position: relative;
        height: 312px;
        width: 500px;
        border-bottom: 1px solid green;
      }
    </style>
  </head>
  <body>
    <div class="lawn">
      <div class="zombie"></div>
    </div>
    <script>
      const div = document.querySelector(".zombie");
      div.onmouseenter = function () {
        console.log(div.style);

        setInterval(function () {
          div.style.backgroundPosition =
            (parseInt(div.style.backgroundPosition) || 0) - 200 + "px";
          div.style.right = (parseInt(div.style.right) || 0) + 10 + "px";
        }, 200);
      };
    </script>
  </body>
</html>

GoldenaArcher

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
CSS3 新特性学习案例

CSS3 新特性学习案例先放一个结合了 JavaScript 的案例，做完了之后发现 CSS 的动画真的蛮有意思的，怪不得之前看到 PVZ（植物大战僵尸, Plant vs Zombie）也有用 H5C3 + JS 实现的:案例 1,使用伪元素完成导航栏悬浮切割这种轮播的功能其实真的还蛮适合拆出来单独作为组件的拆分，只要将轮换的宽度传进去，就可以做到复用了——毕竟点击事件的效果都是一样的。效果图：<!DOCTYPE html><html lang="en"> &l
复制链接

扫一扫