HTML 和CSS 学习（5）-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42919657/article/details/103941944

HTML 和CSS 学习----五

文件介绍

![Alt]
(https://yt3.ggpht.com/a/AGF-l7_JOPbXWp3QXZDuk7CCOzxdwpRg8MFJliMx5A=s900-c-k-c0xffffffff-no-rj-mo0）
这个学习资源来自于一个youtuber开的频道，名字叫做online tutorial（https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog/featured）, 从第一次无意间系统推送给我他的频道的时候我就被他发的一些自创css style深深吸引，也借以这个平台来和大家分享一下一些很有用的学习资源。**

代码

在这一期中将会介绍animation，通过设计一个简单的animation也可以更加加强我们对于css中一些元素设计原理的认知

html

<body>
    <h2> Follow The Cursor | javascript</h2>
    <div id="cursor"></div>
</body>

css文件

body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: sans-serif;
    overflow: hidden;
    cursor: none;
}

#cursor {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid #000;
    box-sizing: border-box;
    transition: 0.1s;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
}

意图是首先将文字与图形放置于屏幕正中央
再次强调一个方法就是：在元素的母元素添加

    display: flex;
    justify-content: center;
    align-items: center;

接下来是使用javascript来使图形沿着鼠标的移动轨迹移动，原理就是通过线段间的移动，通过设置线段长度以及移动时间来创建想要的活动效果

废话不多说，放上代码

<script type="text/javascript">
        var cursor = document.getElementById('cursor');
        document.addEventListener('mousemove', function(e) {
            var x = e.clientX;
            var y = e.clientY;
            cursor.style.left = x + "px";
            cursor.style.top = y + "px";
        });
    </script>

最后就是添加一点特效啦，hover文字会使圆圈变大，并且顺时针转动

思路是这样子的：
先通过h2:hover 设置css

h2:hover~#cursor {
    width: 100px;
    height: 100px;
    border: 2px dashed #000;
    animation: animate 5s linear infinite;
}

然后通过设置@keyframe创建这个叫做animate的animation。一个 keyframe 定义了一个完整动画里某一时刻的一种动画样式。动画绘制引擎会连贯平滑的实现各种样式间的转换。

@keyframes animate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

意思就是原地不动转360度.