CSS로 간단한 애니메이션 효과 구현-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS로 간단한 애니메이션 효과 구현

一个新手

Oct 19, 2017 am 09:11 AM

css 효과

요 며칠 회사에서 모바일 웹페이지를 업데이트해야 하는 일이 있어서 초보자인 제가 해보겠습니다. CSS를 처음 접한 것은 2014년 신입생 때 HTML로 공부한 뒤 다시는 접하지 못했습니다. 그래서 공부와 과제를 동시에 완료해야 했습니다. (⊙﹏⊙)b

구조: java 웹 프로젝트의 WebContent 디렉터리에 "main"이라는 폴더를 생성하고, 그 폴더에 css라는 하위 폴더를 2개 생성합니다. (저장 CSS 파일), img (이미지 저장용) 및 html 파일이 기본 폴더에 배치됩니다.

html 파일에서 ... css">, 그렇지 않으면 CSS 스타일을 로드할 수 없습니다.

CSS의 전체 레이아웃은 작성하기 지루하므로 애니메이션 설정에 대해 이야기해 보겠습니다.

.logo{
		            position: absolute;
			    width: 86%;
			    left: 6%;
			    height: 33%;
			    z-index: 3;
			    top: 50%;
			    background: url(../img/test.png) no-repeat top center;
			    background-size: contain;
			    animation: bounceInUp .7s ease 0s normal both;
			    -moz-animation: bounceInUp .7s ease 0s normal both;
			    -webkit-animation: bounceInUp .7s ease 0s  normal both;
			    -o-animation:  bounceInUp .7s ease 0s normal both;
			}
			section.active .logo{
				animation: bounceInUp .7s ease 0s normal both;
				-moz-animation: bounceInUp .7s ease 0s normal both;
				-webkit-animation: bounceInUp .7s ease 0s  normal both;
				-o-animation:  bounceInUp .7s ease 0s normal both;
			}
			
			@keyframes bounceInUp
			{
			0% {top: -30%;}
			40%{top: 55%;}
			60%{top: 30%;}
			80%{top: 45%;}
			100% {top: 50%;}
			}
			
			@-webkit-keyframes bounceInUp  /* Safari 鍜� Chrome */
			{
			0% {top: -30%;}
			40%{top: 55%;}
			60%{top: 30%;}
			80%{top: 45%;}
			100% {top: 50%;}
			}
			@-moz-keyframes bounceInUp /* Firefox */
			{
			0% {top: -30%;}
			40%{top: 55%;}
			60%{top: 30%;}
			80%{top: 45%;}
			100% {top: 50%;}
			}
			
			@-o-keyframes bounceInUp /* bounceInUp */
			{
			0% {top: -30%;}
			40%{top: 55%;}
			60%{top: 30%;}
			80%{top: 45%;}
			100% {top: 50%;}
			}

로그인 후 복사

　.logo{...}에는 특정 이미지의 관련 CSS 스타일이 모두 포함되어 있으며,

　위치 속성이 사용됩니다. 위치 지정 유형 요소의 위치를 지정하기 위해 절대값은 절대 위치의 요소를 생성하는 것입니다.

　 너비, 높이는 그림의 너비와 높이를 설정합니다. 여기서 너비와 높이가 설정되지 않은 경우에 유의해야 합니다. 그림, 그림 자체는 요소를 확장하지 않습니다.

왼쪽(/오른쪽)은 그림과 왼쪽 테두리(/오른쪽 테두리)를 지정하는 데 사용됩니다.

　　Z-index는 사진이 쌓이는 순서를 지정하는 데 사용됩니다. 뒤에 있는 값이 클수록 사진이 맨 앞에 표시됩니다(즉, 다른 사진에 가려지지 않음). 그림과 위쪽 테두리 사이의 거리

background:url(../img/2.png); 사용할 이미지의 경로를 지정합니다.

　 background-repeat: 속성은 일반적으로 이미지를 반복할지 여부를 나타냅니다. 기본값은 반복 없음을 의미하는 "no-repeat"입니다.

　배경 -size 속성은 이미지 배경의 크기를 설정합니다.

　.logo{...}의 마지막 네 문장은 이미지 애니메이션을 설정하는 것입니다. 애니메이션 애니메이션 속성의 구문을 어느 정도 이해해야 합니다.

        animation:   name    duration    timing-function     delay    iteration-count    direction    fill-mode     play-state;
其相应的作用是：
　　　　动画(声明) :   动画的名称   动画完成时间    运动路径   延迟时间   播放次数   是否逆向播放   动画不播放时要用到的元素样式   指定动画是否正在运行或暂停
     此时会有人说为什么相同的一句语法要重复四次？因为有些浏览器不支持keyframes规则，所以要用相应的浏览器中的支持替代，所以
    @keyframes bounceInUp{...}  
    @-webkit-keyframes bounceInUp{...} 
    @-moz-keyframes bounceInUp{...} 
    @-o-keyframes bounceInUp{...}
    这四条语句块中的内容也是完全相同，其中的0%{}，40%{}，60%{}，80%{}，100%{}指定图片的动画在完成到整体动画的百分比进度时的位置所在，因为我使用的是bounceInUp动画，即从上往下进入，所以其中用top指定图片的位置

最后在html中调用外部css样式语句，在<body>...</body>中添加<p class="logo"></p>即可调用动画

로그인 후 복사

위 내용은 CSS로 간단한 애니메이션 효과 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7345

자바 튜토리얼

1627

Cakephp 튜토리얼

1352

라라벨 튜토리얼

1265

PHP 튜토리얼

1214

Related knowledge

vue에서 자리 표시자는 무엇을 의미합니까? May 07, 2024 am 09:57 AM

Vue.js에서 placeholder 속성은 사용자가 콘텐츠를 입력하지 않을 때 표시되는 입력 요소의 자리 표시자 텍스트를 지정하고 입력 팁이나 예제를 제공하며 양식 접근성을 향상시킵니다. 사용법은 입력 요소에 자리 표시자 속성을 설정하고 CSS를 사용하여 모양을 사용자 정의하는 것입니다. 모범 사례에는 입력과 관련성, 짧고 명확함, 기본 텍스트 방지, 접근성 고려 등이 포함됩니다.

js에서 스팬은 무엇을 의미하나요? May 06, 2024 am 11:42 AM

스팬 태그는 텍스트에 스타일, 속성 또는 동작을 추가할 수 있습니다. 색상 및 글꼴 크기와 같은 스타일을 추가하는 데 사용됩니다. ID, 클래스 등의 속성을 설정합니다. 클릭, 호버 등과 같은 관련 동작 추가 처리 또는 인용을 위해 텍스트를 표시합니다.

js에서 rem은 무엇을 의미합니까? May 06, 2024 am 11:30 AM

CSS의 REM은 루트 요소(html)의 글꼴 크기에 상대적인 단위입니다. 여기에는 다음과 같은 특징이 있습니다. 루트 요소의 글꼴 크기를 기준으로 하며 상위 요소의 영향을 받지 않습니다. 루트 요소의 글꼴 크기가 변경되면 REM을 사용하는 요소가 그에 따라 조정됩니다. 모든 CSS 속성과 함께 사용할 수 있습니다. REM 사용의 장점은 다음과 같습니다. 반응성: 다양한 장치 및 화면 크기에서 텍스트를 읽을 수 있도록 유지합니다. 일관성: 웹사이트 전체에서 글꼴 크기가 일관되게 유지되어야 합니다. 확장성: 루트 요소 글꼴 크기를 조정하여 전역 글꼴 크기를 쉽게 변경할 수 있습니다.

게임하기에는 좋은 화면입니다. iQOO Neo9S Pro+ 화면에 대한 간략한 분석입니다. Jul 19, 2024 pm 03:53 PM

오늘날 스마트폰 시장에서 화면 품질은 휴대폰의 전반적인 성능을 측정하는 주요 지표 중 하나가 되었습니다. iQOO의 Neo 시리즈는 항상 사용자에게 뛰어난 게임 경험과 시각적 즐거움을 제공하기 위해 노력해 왔습니다. 최신 제품인 iQOO Neo9SPro+는 "Three Good Eye Protection Gaming Screen"을 사용합니다. 다음으로 이 화면의 품질이 얼마나 뛰어난지 살펴보겠습니다. iQOO Neo9S Pro+에는 1Hz~144Hz의 플래그십 LTPO 적응형 새로 고침 빈도를 지원하는 1.5 KOLED e스포츠 다이렉트 화면이 장착되어 있어 정적 콘텐츠를 표시할 때 초저전력 대기 상태를 달성할 수 있으며 지능적일 수도 있습니다. 게임 중에는 90Hz에서 144Hz로 동적 높음으로 전환합니다.

js의 노드 란 무엇입니까? May 07, 2024 pm 09:06 PM

노드는 HTML 요소를 나타내는 JavaScript DOM의 엔터티입니다. 이는 페이지의 특정 요소를 나타내며 해당 요소에 액세스하고 조작하는 데 사용될 수 있습니다. 일반적인 노드 유형에는 요소 노드, 텍스트 노드, 주석 노드 및 문서 노드가 포함됩니다. getElementById()와 같은 DOM 메서드를 통해 노드에 액세스하고 속성 수정, 하위 노드 추가/제거, 노드 삽입/교체, 노드 복제 등의 작업을 수행할 수 있습니다. 노드 순회는 DOM 구조 내에서 탐색하는 데 도움이 됩니다. 노드는 페이지 콘텐츠, 이벤트 처리, 애니메이션 및 데이터 바인딩을 동적으로 생성하는 데 유용합니다.

OPPO Find X7은 걸작입니다! 이미지로 모든 순간을 포착하세요 Aug 07, 2024 pm 07:19 PM

빠르게 변화하는 시대에 OPPO Find X7은 이미징 능력을 활용하여 우리가 인생의 모든 아름다운 순간을 즐길 수 있도록 해줍니다. 웅장한 산, 강, 호수, 바다, 따뜻한 가족 모임, 거리에서의 만남과 놀라움 등 무엇이든 "비할 데 없는" 화질로 기록하는 데 도움이 될 수 있습니다. 외관상 파인드잇의 카메라 데코 디자인은 인지도가 매우 높으며 고급스러운 느낌을 줍니다. 기본적인 하드웨어 구성부터 시작해 내부도 독특하다. FindX7은 이전을 유지합니다