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

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

一个新手

풀어 주다： 2017-10-19 09:11:11

원래의

3424명이 탐색했습니다.

요 며칠 회사에서 모바일 웹페이지를 업데이트해야 하는 일이 있어서 초보자인 제가 해보겠습니다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!