前端练习1

Kahvia2023-04-182023-04-18

代码

HTML:

<!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>Button Anime</title>
    <link rel="stylesheet" href="button.css">
</head>

<body>
    <div class="btn">
        <a href=":javascript"><span>Hello</span></a>
    </div>
</body>

<script src="button.js"></script>

</html>

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn {
    position: relative;
    padding: 13px 30px;
    font-size: 20px;
    border: 1px solid black;
    font-weight: bold;
    border-radius: 5px;
    background-image: linear-gradient(rgb(43, 190, 96), rgb(15, 157, 88));
    overflow: hidden;
    transition: 0.5s;
}

a {
    color: inherit;
    text-decoration: none;
}

.btn::before {
    content: '';
    position: absolute;
    /* var函数的参数必须以--开头 */
    left: var(--xPos);
    top: var(--yPos);
    transform: translate(-50%, -50%);
    width: 0px;
    height: 0px;
    background-color: black;
    border-radius: 50%;
    transition: width 0.5s, height 0.5s;
}

.btn:hover {
    color: white;
}


.btn:hover::before {
    width: 600px;
    height: 600px;

}

.btn a span {
    position: relative;
    z-index: 1;
}

JS:

var button = document.querySelector('.btn')

button.addEventListener('mouseover', function (e) {
    const x = e.clientX - button.offsetLeft;
    const y = e.clientY - button.offsetTop;

    //element.style.setPorperty是用于设置css的属性
    button.style.setProperty('--xPos', x + 'px');
    button.style.setProperty('--yPos', y + 'px');
    //element.setAttribute可以用于设置document元素的style属性，但是会覆盖style

})

效果图

总结

transition和transform是两个不同的CSS属性，它们的作用和用法也不同：
- transition是用来设置元素在不同状态之间切换时的过渡效果的，它可以指定要过渡的属性、过渡的持续时间、过渡的速度曲线和过渡的延迟时间¹。transition可以让元素的属性值平滑地变化，而不是突然跳变。
- transform是用来设置元素的变形效果的，它可以对元素进行旋转、缩放、倾斜、移动等操作，改变元素在二维或三维空间中的形状和位置²。transform可以让元素产生视觉上的变化，而不影响元素在文档流中的位置。
简单地说，transition是用来控制元素属性值的变化速度和方式的，而transform是用来控制元素形状和位置的变化效果的。两者可以结合使用，实现更多种类的动画效果。例如，你可以用transition来设置transform属性的过渡效果，让元素在旋转或缩放时有一个平滑的动画³。

源: 与必应的对话， 2023/4/18
(1) CSS transforms VS transitions - Stack Overflow. https://stackoverflow.com/questions/19186585/css-transforms-vs-transitions.
(2) CSS Transitions - W3School. https://www.w3schools.com/css/css3_transitions.asp.
(3) Easy CSS Animation With Transition & Transforms. https://webdesignerwall.com/tutorials/easy-css-animation-transition-transforms.
element.setAttribute()和element.style.setProperty()有一些区别，主要是：
- element.setAttribute()是用来设置元素的属性的，它可以设置任何属性，包括自定义属性¹。element.style.setProperty()是用来设置元素的样式属性的，它只能设置CSS属性²。
- element.setAttribute()的第一个参数是属性名，第二个参数是属性值。如果属性已经存在，它会更新属性值，如果不存在，它会添加一个新的属性¹。element.style.setProperty()的第一个参数是CSS属性名，第二个参数是CSS属性值，第三个参数是可选的，表示优先级（如"important"）²。
- element.setAttribute()的属性名不区分大小写，但是在HTML文档中，它会自动转换为小写¹。element.style.setProperty()的CSS属性名区分大小写，但是要使用连字符分隔的形式（如"background-color"），而不是驼峰形式（如"backgroundColor"）²。
一般来说，如果你想设置元素的样式属性，建议使用element.style.setProperty()，因为它更符合CSS规范，并且可以避免一些浏览器兼容性问题³。如果你想设置元素的其他属性，例如id、class、data-*等，可以使用element.setAttribute()。

源: 与必应的对话， 2023/4/18
(1) javascript - Setting a property via property or setAttribute - Stack … https://stackoverflow.com/questions/8018814/setting-a-property-via-property-or-setattribute.
(2) Element: setAttribute() method - Web APIs | MDN - Mozilla Developer. https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute.
(3) When to use setAttribute vs .attribute= in JavaScript?. https://stackoverflow.com/questions/3919291/when-to-use-setattribute-vs-attribute-in-javascript.
var()函数是CSS中的一个函数，它可以插入一个自定义属性（有时也被称为“CSS变量”）的值，用来代替非自定义属性中值的任何部分¹²。例如，你可以在:root上定义一个名为–main-bg-color的自定义属性，然后在其他地方使用var(–main-bg-color)来引用它的值²。var()函数的第一个参数是要替换的自定义属性的名称，第二个参数是可选的，用作回退值，如果第一个参数引用的自定义属性无效，则该函数将使用第二个值¹。

源: 与必应的对话， 2023/4/18
(1) var() - CSS：层叠样式表 | MDN - Mozilla Developer. https://developer.mozilla.org/zh-CN/docs/Web/CSS/var.
(2) CSS var() 函数 - w3school. https://www.w3school.com.cn/cssref/func_var.asp.
(3) var() - CSS: Cascading Style Sheets | MDN - Mozilla Developer. https://developer.mozilla.org/en-US/docs/Web/CSS/var.
var()函数的第一个参数必须是一个以两个破折号开头的有效标识符，表示自定义属性的名称¹。你可以元素上定义这两个自定义属性，然后给它们赋值，例如：

:root {
–data-x: 50%;
–data-y: 50%;
}

或者

.btn {
–data-x: 50%;
–data-y: 50%;
}

然后你就可以在::before伪元素中使用var(–data-x)和var(–data-y)来引用它们的值了。

源: 与必应的对话， 2023/4/18
(1) var() - CSS: Cascading Style Sheets | MDN - Mozilla Developer. https://developer.mozilla.org/en-US/docs/Web/CSS/var.
(2) var() - CSS：层叠样式表 | MDN - Mozilla Developer. https://developer.mozilla.org/zh-CN/docs/Web/CSS/var.