CSS3를 사용하여 스타일을 통해 웹페이지 요소에 애니메이션 적용
css3를 사용하면 자바스크립트나 플래시를 사용하지 않고도 스타일을 통해 웹 요소에 애니메이션을 적용할 수 있어 웹사이트를 더욱 멋지게 만들 수 있습니다.
css3 전환
trainsition 속성을 사용하여 요소 스타일을 지정할 수 있습니다. 지원되는 브라우저 교육을 통해 ie10, Firefox, Chrome 및 Opera가 포함됩니다.
먼저 trainsition의 여러 속성을 살펴보겠습니다.
trainsition-property: 애플리케이션 전환의 CSS 속성 이름을 지정합니다.
trainsition-duration: 과도한 시간 소요를 지정합니다.
trainsiton-timing-function: 전환 시간 곡선을 지정합니다.
trainsition-delay: 전환이 시작되는 시기를 지정합니다.
먼저 간단한 전환 예시를 살펴보겠습니다. 데모.css에
p{
width:100px;
height:100px;
background:red;
trainsition:width 3s,height 2s;//在这里为了方便，将过渡属性简写了，我们可以将过渡属性简写为trainsition:加上上面四个属性，可以把默认属性省略。
}
p:hover
{
width:300px;
height:200px;
}<를 작성합니다. 🎜 >demo.html에
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="demo.css"/> </head> <body> <p></p> </body> </html>
를 입력하세요. 빨간색 p 블록 위로 마우스를 이동하면 빨간색 블록의 길이와 너비가 천천히 증가하는 것을 볼 수 있습니다. 이것이 가장 간단한 전환입니다. 성취하다.
참고: 전환 시간을 설정하지 않으면 기본적으로 0이 됩니다. 전환 효과가 없습니다.
우리가 더 자주 사용하는 방법은 js를 통해 스타일을 추가하여 다양한 애니메이션 전환을 연습하는 것입니다.
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<style>
p{
background:red;
width:200px;
height:200px;
transition:width 2s,height 2s;
}
p.over{
width:300px;
height:300px;
}
</style>
</head>
<body>
<p
</p>
<script>
$('p').hover(function(){
$('p').addClass('over');},
function(){
$('p').removeClass('over');
});
</script>
</body>
</html>수정된 코드에서는 jquery를 사용하여 마우스가 지나갈 때 오버 스타일을 추가하고 마우스가 떠날 때 오버 스타일을 제거합니다. 전환 애니메이션이 구현되었습니다.
그러나 위에서 스타일 변경을 구현했지만, 초기 상태에서 최종 상태로 변경되는 것을 알 수 있고 그 한계도 매우 크다. , 그래서 중간 단계의 변환 상태가 있기를 바랍니다. 이때 키프레임 애니메이션(@keyframes)이 사용됩니다:
기본 형식은
@keyframes Name｛
시점｛요소상태｝
....
｝
예를 들어
@frames chgground{
from{ backgroud:red;}
to{backgroud:yellow;}
}p{
animation:chgbackground 3s;
}@frames chgbackground{
0%{background:yellow;}
50%{background:red;}
100%{background:black;}
}
animate.css를 사용하려면 animate.css를 다운로드하고 파일을 참조한 후 다음과 같이 다양한 효과를 얻는 데 필요한 특정 애니메이션 클래스 이름을 추가하세요.
위 내용은 CSS3를 사용하여 스타일을 통해 웹페이지 요소에 애니메이션 적용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7552
15
1382
52
83
11
58
19
22
91
순수한 CSS3로 물결 효과를 얻는 방법은 무엇입니까? (코드 예)
Jun 28, 2022 pm 01:39 PM
순수한 CSS3로 물결 효과를 얻는 방법은 무엇입니까? 이 기사에서는 SVG 및 CSS 애니메이션을 사용하여 물결 효과를 만드는 방법을 소개합니다. 도움이 되길 바랍니다.
CSS를 능숙하게 사용하여 다양한 이상한 모양의 버튼 구현(코드 포함)
Jul 19, 2022 am 11:28 AM
이 글에서는 CSS를 활용하여 자주 나타나는 다양한 모양의 버튼을 쉽게 구현하는 방법을 알려드리겠습니다. 도움이 되셨으면 좋겠습니다.
공간을 차지하지 않고 CSS에서 요소를 숨기는 방법
Jun 01, 2022 pm 07:15 PM
두 가지 방법: 1. 표시 속성을 사용하여 요소에 "display:none;" 스타일을 추가합니다. 2. 요소를 숨기려면 위치 및 상단 속성을 사용하여 요소의 절대 위치를 설정하세요. 요소에 "position:absolute;top:-9999px;" 스타일을 추가하세요.
Vue 페이지 전환 애니메이션 구현 및 일반 애니메이션 효과
Jun 09, 2023 pm 04:11 PM
Vue는 데이터 기반 접근 방식을 사용하여 개발자가 강력한 상호 작용과 아름다운 데이터 표현을 갖춘 단일 페이지 웹 애플리케이션을 구축할 수 있도록 지원하는 인기 있는 JavaScript 프레임워크입니다. Vue에는 유용한 기능이 많이 내장되어 있으며 그 중 하나가 페이지 전환 애니메이션입니다. 이 글에서는 Vue의 전환 애니메이션 기능을 사용하는 방법을 소개하고 가장 일반적인 애니메이션 효과에 대해 논의합니다. Vue 페이지 전환 애니메이션 구현 Vue의 페이지 전환 애니메이션은 Vue의 <transition>
CSS3에서 레이스 테두리를 구현하는 방법
Sep 16, 2022 pm 07:11 PM
CSS에서는 border-image 속성을 사용하여 레이스 테두리를 만들 수 있습니다. border-image 속성은 이미지를 사용하여 테두리를 생성할 수 있습니다. 즉, 배경 이미지를 레이스 스타일로 지정하기만 하면 됩니다. "border-image: url(이미지 경로)은 이미지 테두리 너비가 안쪽으로 반복되는지 여부입니다.
웹 페이지 요소를 가져오는 JavaScript에 대한 자세한 설명
Apr 09, 2024 pm 12:45 PM
답변: JavaScript는 ID, 태그 이름, 클래스 이름 및 CSS 선택기 사용을 포함하여 웹 페이지 요소를 얻기 위한 다양한 방법을 제공합니다. 자세한 설명: getElementById(id): 고유 ID를 기반으로 요소를 가져옵니다. getElementsByTagName(tag): 지정된 태그 이름을 가진 요소 그룹을 가져옵니다. getElementsByClassName(class): 지정된 클래스 이름을 가진 요소 그룹을 가져옵니다. querySelector(selector): CSS 선택기를 사용하여 일치하는 첫 번째 요소를 가져옵니다. querySelectorAll(selector): CSS 선택기를 사용하여 모든 일치 항목 가져오기
uniapp을 사용하여 페이지 전환 애니메이션 효과 얻기
Nov 21, 2023 pm 02:38 PM
모바일 인터넷의 급속한 발전으로 인해 점점 더 많은 프로그래머가 uniapp을 사용하여 크로스 플랫폼 애플리케이션을 구축하기 시작했습니다. 모바일 애플리케이션 개발에서 페이지 전환 애니메이션은 사용자 경험을 향상시키는 데 매우 중요한 역할을 합니다. 페이지 전환 애니메이션을 통해 사용자 경험을 효과적으로 향상시키고 사용자 유지율과 만족도를 높일 수 있습니다. 따라서 uniapp을 사용하여 페이지 전환 애니메이션 효과를 얻는 방법을 공유하고 구체적인 코드 예제를 제공하겠습니다. 1. uniapp 소개 Uniapp은 DCloud 개발팀에서 출시한 기본 제품입니다.
순수 CSS를 통해 부동 애니메이션 효과를 얻는 방법에 대한 방법 및 기법
Oct 25, 2023 am 08:10 AM
순수 CSS를 통해 플로팅 애니메이션 효과를 구현하는 방법 및 기술 현대 웹 디자인에서 애니메이션 효과는 사용자의 관심을 끄는 중요한 요소 중 하나가 되었습니다. 일반적인 애니메이션 효과 중 하나는 웹 페이지에 움직임과 활력을 더해 사용자 경험을 더욱 풍부하고 흥미롭게 만들 수 있는 플로팅 효과입니다. 이 기사에서는 순수 CSS를 통해 부동 애니메이션 효과를 얻는 방법을 소개하고 참조할 수 있는 몇 가지 코드 예제를 제공합니다. 1. CSS의 전환 속성을 사용하여 플로팅 효과를 얻을 수 있습니다.
