css3 효과 대집합(1)
.main{
background: -webkit-linear-gradient(#a18cd1, #fbc2eb); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(#a18cd1, #fbc2eb); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(#a18cd1, #fbc2eb); /* Firefox 3.6 - 15 */
background: linear-gradient(#a18cd1, #fbc2eb); /* */
}
2. 삼각형 효과
.main{
width:0px;height:0px;
border-right:50px solid rgba(0,0,0,0);
border-bottom:50px solid #fbc2eb;
border-left:50px solid rgba(0,0,0,0);
}
3, 라운드 효과
.main{
width: 100px;
height: 100px;
background-color: #fbc2eb;
border-radius: 50%;
}
.main:after{
content: " ";
display: block;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #fff;
position: relative;
top: 25px;
left: 25px;
}
위아래로 뛰다
@keyframes tips{
25% {transform: translateY(-3px);}
50%{transform: translateY(0);}
75% {transform: translateY(3px);}
100% {transform: translateY(0);}
}
.main{
width: 50px;
height: 50px;
background: #fbc2eb;
-webkit-animation: tips 1s linear infinite;
animation: tips 1s linear infinite;
}
5.loading 효과 로드
.load{width: 100px;height: 100px;position: relative;margin: 0 auto;margin-top:100px;}
.load span{display: inline-block;width: 17px;height: 17px;border-radius: 50%;background: #fbc2eb;position: absolute;-webkit-animation: load 1.04s ease infinite;}
@-webkit-keyframes load{
0%{
opacity: 1;
}
100%{
opacity: 0.2;
}
}
.load span:nth-child(1){left: 0;top: 50%;margin-top:-8px;-webkit-animation-delay:0.13s;}
.load span:nth-child(2){left: 15px;top: 15px;-webkit-animation-delay:0.26s;}
.load span:nth-child(3){left: 50%;top: 0;margin-left: -8px;-webkit-animation-delay:0.39s;}
.load span:nth-child(4){top: 15px;right:15px;-webkit-animation-delay:0.52s;}
.load span:nth-child(5){right: 0;top: 50%;margin-top:-8px;-webkit-animation-delay:0.65s;}
.load span:nth-child(6){right: 15px;bottom:15px;-webkit-animation-delay:0.78s;}
.load span:nth-child(7){bottom: 0;left: 50%;margin-left: -8px;-webkit-animation-delay:0.91s;}
.load span:nth-child(8){bottom: 15px;left: 15px;-webkit-animation-delay:1.04s;}
기사 링크
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
초보자를 위한 간단한 카드 호버 애니메이션html과 css만 사용하여 만든 매우 간단한 카드 호버 애니메이션을 살펴보겠습니다. css 속성을 알고 있다면 이해할 수 있지만 완전히 초보자라면 css의 기초를 배우는 것이 좋습니다. 1단계: 마크업 즉, HTM...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.