取巧&视觉欺诈——纯css互动小飞机

Qayrup

已于 2023-10-04 13:32:58 修改

阅读量3w

点赞数 1

分类专栏： js拒绝者联盟

于 2021-09-03 11:49:25 首次发布

CSDN_Qayrup

本文链接：https://blog.csdn.net/weixin_44368963/article/details/120076253

版权

CSS 动画交互过渡属性鼠标跟随

关键词由CSDN通过智能技术生成

js拒绝者联盟专栏收录该内容

8 篇文章 0 订阅

订阅专栏

今天做的小案例是一个纯css的小飞机，能进行简单的交互在这里插入图片描述

如上gif今天的案例是一架飞行的小飞机
纯css，原理很简单
将有纹理的背景图往后位移然后再将盒子溢出隐藏，这样就制造了飞机在飞的感觉，然后再在飞机的背景图上添加一个小飞机的阴影背景
这样就更显真实了

但是飞机为什么会跟随鼠标移动呢？

css确实没这个功能
首先想让飞机动起来，只能是动画，但是动画是预先写好的，而且一旦触发，光凭css是不能关闭的
而上图中的小飞机是要跟随鼠标，所以排除动画，
那怎么让飞机动起来呢？
我们可以给飞机一个定位，然后再将盒子分成三份左中右并分别放一个透明的盒子标记这三个区域，
再然后就是添加伪类了让飞机过去了
这个时候飞机会出现在你的鼠标所在的区域，效果贼假

但是css有过度属性，

我们为这些味蕾添加一个过度属性之后，飞机就会缓慢的朝着我们鼠标所在的区域“飞”过去了
于是上面的效果就出来了
下面是代码，自取
完整的

<!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>Css小飞机</title>
    <style>
        * {
            /* 定义过度属性 所有属性 0.25秒 以相同的速度开始至结束 */
            transition: all 0.25s linear;
        }

        html {
            width: 100%;
        }

        body {
            width: 100%;
            background: url(images/airplane-back.jpg);
            /* 规定背景尺寸拉升至完全覆盖背景区域 */
            /* background-size: cover; */
            /* 定义动画 back所需花费时间20s并指定动画应该播放无限次（永远）*/
            animation: back 20s infinite;
            -webkit-animation: back 2s infinite;
            /* Safari 与 Chrome */
            -moz-animation: back 20s infinite;
            -o-animation: back 20s infinite;
            /* 指定动画执行速度恒速 */
            animation-timing-function: linear;
            -webkit-animation-timing-function: linear;
            /* The background animation */
            -moz-animation-timing-function: linear;
            -o-animation-timing-function: linear;
            /* 溢出隐藏 */
            overflow: hidden;
        }

        @keyframes back {

            /* 这个动画的意思是让背景先由下对其变为上对齐，给人背景在往后面跑模拟飞机在往前飞 */
            from {
                background-position-y: bottom;
            }

            to {
                background-position-y: top;
            }
        }

        @-webkit-keyframes back {
            from {
                background-position-y: bottom;
            }

            to {
                background-position-y: top;
            }
        }

        body>div:last-of-type {
            width: 35%;
            height: 40%;
            max-width: 300px;
            max-height: 330px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            background: url(images/airplane-shadow.png) no-repeat bottom right;
            background-size: 20%;
            transition: all 10s cubic-bezier(0.5, 0.025, 0.005, 2);
            -webkit-transition: all 10s cubic-bezier(0.5, 0.025, 0.005, 2);
            -moz-transition: all 10s cubic-bezier(0.5, 0.025, 0.005, 2);
            -o--transition: all 10s cubic-bezier(0.5, 0.025, 0.005, 2);
        }

        body>div:last-of-type>img:only-child {
            display: block;
            width: 80%;
            height: auto;
            margin: auto;
        }

        body>a {
            position: absolute;
            z-index: 1;
            height: 100%;
        }

        body>a:first-of-type,
        body>a:last-of-type {
            width: 40%;
        }
        body>a:nth-child(3){
            width: 20%;
            /* The direction anchors */

            right: 0;
            left: 0;
            margin: auto;
            cursor: url(images/pointer-center.png), w-resize;
        }
        body>a:first-of-type{
            left: 0;
            cursor: url(images/pointer-left.png), w-resize;
        }
        body>a:last-of-type{
            right: 0;
            cursor: url(images/pointer-right.png), w-resize;
        }
        body>a:last-of-type:hover+div:last-of-type{
            transform: translateX(120%) rotateZ(2deg);
        }
        body>a:first-of-type:hover~div:last-of-type {
            transform: translateX(-120%) rotateZ(-2deg);
        }

        body>div:first-of-type>h3:only-of-type {
            position: fixed;
            z-index: 9;
            bottom: 10%;
            left: 0;
            right: 0;
            width: 100%;
            height: 50px;
            margin: auto;
            font-family: 'Open sans', 'Lato', 'Helvetica', sans-serif;
            font-size: 11px;
            color: white;
            text-align: center;
            line-height: 1;
            font-weight: 100;
            padding: 0px;
            margin: 0px;
        }
        @media all and (max-height: 500px) {
            body>div:first-of-type{
                bottom: 75%;
                line-height: 1;
                font-size: 14px;
            }

            body>div:last-of-type>img:only-of-type {
                height: 70% !important;
                display: block;
                width: auto;
            }
        }
    </style>
</head>

<body>
    <div>
        <h3>左右移动鼠标飞机会响应哦~</h3>
    </div>
    <a></a>
    <a></a>
    <a></a>
    <div>
        <img src="images/airplane.png">
    </div>
</body>

</html>