


1 /*对元素进行改变(移动、变形、伸缩、扭曲)*/ 2 .wrapper{ 3 margin:100px 100px auto auto; 4 width:300px; 5 height:200px; 6 border:2px dotted blue; 7 } 8 .wrapper div{ 9 width:300px;10 height:200px;11 background:red;12 color:blue;/*设置文本颜色 如果有的话*/13 text-align:center;/* 设置文本位置 如果子元素有的话 */14 line-height:200px;/* 设置行间距 */15 border-radius:30px;/* 设置角半径 */16 17 /*属性*/18 transform-origin:top right;/*设置元素的中心点 top center right left bottom 合理的情况下任意两两组合 例如 top right 表示右上角*/19 20 /*函数*/21 transform:rotate(20deg);/* 旋转20°,整数表示顺时针,负数表示逆时针 */22 transform:skew(15deg,20deg);/*x轴扭曲15°,y轴扭曲20°*/23 transform:scale(1.5,0.5);/*根据中心点x方向放大1.5倍 y轴缩小0.5倍*/24 transform:translate(-100px,50px);/*沿x轴负方向移动100px,沿y轴正方向移动 25 50px*/26 }27 span{28 display:block;/* 转换为块状元素 */29 }
通过鼠标的点击、获得焦点,被点击或对元素的任何改变中触发,并平滑的以动画的效果改变css的属性值对元素用到的四个属性为:
- transition- property: width;//Indicates changes to that property
- transition-duration: 5s; //Indicates the duration of the animation
- transition-timing-function: ease;
- transition-delay: 0.5s;//Indicates animation delay time
例子: 1 .wrapper{ 2 margin:auto; 3 width:300px; 4 height:200px; 5 border:2px dotted blue; 6 7 transition-property:all;/*表示hover事件中的所有属性,改成width的话就只对width有 8 效,而height会瞬间变为50px不具有过度效果*/ 9 transition-duration:5s;/*表示动画的持续时间*/10 transition-timing-function:ease-in;/*表示动画的播放方式由快到慢*/11 transition-delay:0.15s;/*表示动画的延时时间*/12 }13 .wrapper:hover14 {15 width:500px;16 height:50px;17 }

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

SublimeText3 English version
Recommended: Win version, supports code prompts!

VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
