freeCodeCamp

1.6 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d78a5367417b2b2512ada	Use the CSS Transform scale Property to Scale an Element on Hover	0		使用CSS Transform scale属性在悬停上缩放元素

Description

transform属性具有多种功能，可让您缩放，移动，旋转，倾斜等元素。当与伪类（例如:hover ，指定元素的某个状态， transform属性可以轻松地为元素添加交互性。这是一个示例，当用户将鼠标悬停在原始大小上时，将段落元素缩放到原始大小的2.1倍：

p：悬停{
变换：规模（2.1）;
}

Instructions

为div的hover状态添加CSS规则，并使用transform属性将div元素缩放到其原始大小的1.1倍，当用户将鼠标悬停在其上时。

Tests

tests:
  - text: 当用户将鼠标悬停在其上时， <code>div</code>元素的大小应缩放1.1倍。
    testString: 'assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi), "The size of the <code>div</code> element should scale 1.1 times when the user hovers over it.");'

Challenge Seed

<style>
  div {
    width: 70%;
    height: 100px;
    margin:  50px auto;
    background: linear-gradient(
      53deg,
      #ccfffc,
      #ffcccf
    );
  }



</style>

<div></div>

Solution

// solution required

1.6 KiB Raw Blame History Unescape Escape