CSS3的自定义动画帧_html/css_WEB-ITnose
CSS3新增的动画帧非常绚丽,可以简单实现一些动画效果,目前除IE外各大主流浏览器都支持
本文演示三个:transform: scale3d(x, y, z)-缩放;、transform: translate3d(x, y, z)-位移;、transform:rotateX/Y(?deg)-旋转;
演示地址:http://wjf444128852.github.io/demo02/css3/index.html
@keyframes 动画名{}
@-处理兼容性-keyframes<br />animation: expand 0.6s ease-out infinite;[动画名 动画执行时间 动画速度 动画次数]<br />-处理兼容-animation:
<html lang="en"><head> <meta charset="UTF-8"> <title>CSS3</title> <link rel="stylesheet" href="index.css"></head><body> <div class="parent"> <div class="main"></div> <div class="d2"></div> <div class="d3">A</div> </div></body></html>
html,body{ width: 98%; height: 98%; } /*方法二*/ body{ display: flex; align-items: center;/****水平居中****/ justify-content: center;/*垂直居中*/ } .parent{ overflow: hidden; width: 500px; height: 400px; background: orange; /*方法一*/ /*margin: 0 auto;*/ position: relative; /*top: 50%;*/ /*margin-top: -200px;*//***此行等于transform:translateY(-50%)******/ } .parent div{ width: 100px; height:100px; margin: 0 auto; margin-top: 20px; } .main{ position: relative; /*top:150px;*/ background: pink; -webkit-animation: expand 0.6s ease-out infinite; -moz-animation: expand 0.6s ease-out infinite; -o-animation: expand 0.6s ease-out infinite; -ms-animation: expand 0.6s ease-out infinite; animation: expand 0.6s ease-out infinite; } .d2{ background: green; -webkit-animation: bounce 3s ease-out infinite; -moz-animation: bounce 3s ease-out infinite; -o-animation: bounce 3s ease-out infinite; -ms-animation: bounce 3s ease-out infinite; animation: bounce 3s ease-out infinite; } @keyframes bounce { 0% { transform: translate3d(0, -25px, 0); opacity: 0; } 25% { transform: translate3d(0, 10px, 0); } 50% { transform: translate3d(0, -6px, 0); } 75% { transform: translate3d(0, 2px, 0); } 100% { transform: translate3d(0, 0, 0); opacity: 1; } } @-webkit-keyframes bounce { 0% { transform: translate3d(0, -25px, 0); opacity: 0; } 25% { transform: translate3d(0, 10px, 0); } 50% { transform: translate3d(0, -6px, 0); } 75% { transform: translate3d(0, 2px, 0); } 100% { transform: translate3d(0, 0, 0); opacity: 1; } } @-moz-keyframes bounce { 0% { transform: translate3d(0, -25px, 0); opacity: 0; } 25% { transform: translate3d(0, 10px, 0); } 50% { transform: translate3d(0, -6px, 0); } 75% { transform: translate3d(0, 2px, 0); } 100% { transform: translate3d(0, 0, 0); opacity: 1; } } @-o-keyframes bounce { 0% { transform: translate3d(0, -25px, 0); opacity: 0; } 25% { transform: translate3d(0, 10px, 0); } 50% { transform: translate3d(0, -6px, 0); } 75% { transform: translate3d(0, 2px, 0); } 100% { transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes expand { 0% { transform: scale3d(1, 0, 1); } 25% { transform: scale3d(1, 1.2, 1); } 50% { transform: scale3d(1, 0.85, 1); } 75% { transform: scale3d(1, 1.05, 1); } 100% { transform: scale3d(1, 1, 1); } } @-webkit-keyframes expand { 0% { transform: scale3d(1, 0, 1); } 25% { transform: scale3d(1, 1.2, 1); } 50% { transform: scale3d(1, 0.85, 1); } 75% { transform: scale3d(1, 1.05, 1); } 100% { transform: scale3d(1, 1, 1); } } @-moz-keyframes expand { 0% { transform: scale3d(1, 0, 1); } 25% { transform: scale3d(1, 1.2, 1); } 50% { transform: scale3d(1, 0.85, 1); } 75% { transform: scale3d(1, 1.05, 1); } 100% { transform: scale3d(1, 1, 1); } } @-o-keyframes expand { 0% { transform: scale3d(1, 0, 1); } 25% { transform: scale3d(1, 1.2, 1); } 50% { transform: scale3d(1, 0.85, 1); } 75% { transform: scale3d(1, 1.05, 1); } 100% { transform: scale3d(1, 1, 1); } } /*transform:rotate3d(x,y,z,deg);*/ /*transform:rotate3d(1,1,0,45deg);*/ .d3{ background: #e4393c; -webkit-animation: move 3s linear infinite; -moz-animation: move 3s linear infinite; -ms-animation: move 3s linear infinite; -o-animation: move 3s linear infinite; animation: move 3s linear infinite; } @-o-keyframes move{ 25%{ transform:rotateY(45deg); } 50%{ transform:rotateY(360deg); } 75%{ transform:rotateX(45deg); } 100%{ transform:rotateX(180deg); } } @-moz-keyframes move{ 25%{ transform:rotateY(45deg); } 50%{ transform:rotateY(360deg); } 75%{ transform:rotateX(45deg); } 100%{ transform:rotateX(180deg); } } @-webkit-keyframes move{ 25%{ transform:rotateY(45deg); } 50%{ transform:rotateY(360deg); } 75%{ transform:rotateX(45deg); } 100%{ transform:rotateX(180deg); } } @keyframes move{ 25%{ transform:rotateY(45deg); } 50%{ transform:rotateY(360deg); } 75%{ transform:rotateX(45deg); } 100%{ transform:rotateX(180deg); } }

핫 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)

뜨거운 주제











이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.

이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

이 기사는 모바일 장치의 반응 형 웹 디자인에 필수적인 Viewport Meta Tag에 대해 설명합니다. 적절한 사용이 최적의 컨텐츠 스케일링 및 사용자 상호 작용을 보장하는 방법을 설명하는 반면, 오용은 설계 및 접근성 문제로 이어질 수 있습니다.

이 기사는 & lt; iframe & gt; 외부 컨텐츠를 웹 페이지, 공통 용도, 보안 위험 및 객체 태그 및 API와 같은 대안을 포함시키는 태그의 목적.

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.
