집 > 기사 > 웹 프론트엔드 > CSS3를 사용하여 아이콘 효과를 만드는 방법

CSS3를 사용하여 아이콘 효과를 만드는 방법

php中世界最好的语言원래의: 2017-11-25 10:33:562455검색

현재 회사 프로젝트에 관해 말하자면, JS에 프레임워크가 없을 뿐만 아니라 CSS에 프레임워크를 사용하지 않기 때문에 많은 회사의 프런트 엔드가 엉망이라고 생각합니다. 이로 인해 필요할 때 프로젝트가 특히 어려워집니다. 업그레이드되거나 유지되는 어려움.

최근 리더는 CSS 스타일을 정리하는 데 많은 시간을 할애하기로 결정했습니다. 그의 말에 따르면 이는 우리를 뒤따르는 사람들에게 도움이 될 것입니다.

우선 스타일을 정리하기 전에 우리 팀만의 기준이 있어야 해요.

생각이 정말 중요합니다. 소위 칼을 가는 것은 나무꾼을 놓치지 않는다는 뜻입니다. 사실 어떤 일을 하기 전에 전반적인 과정과 일반적인 아이디어를 충분히 생각해야 한다는 뜻입니다. 그렇지 않으면 그렇지 않을 수도 있습니다. 나는 이것이 잘못되었다는 것을 반쯤 깨달았고, 이전의 모든 노력은 올바른 시작 방법이 아닙니다. . .

이전에 쓸데없는 말을 많이 했는데, 이제 제가 컴파일한 아이콘(모두 CSS로 구현)을 간략하게 소개하겠습니다.

CSS에는 상속, 다형성 등이 없으므로 적게 작성하고 더 많은 작업을 수행하려면 다양한 방법을 생각해야 합니다(모든 공개 및 구성 요소 수준 스타일은 u-로 시작한다고 규정했습니다).

여기에 쓰는 모든 태그의 스타일 이름은 u-icon으로 시작하므로 이렇게 u-icon으로 시작하는 모든 스타일에는 다음 세 가지 스타일이 적용된다고 생각하세요. 100 u-아이콘 스타일을 사용하면 300줄의 코드를 절약할 수 있습니다!

[class^="u-icon"]{
display: inline-block;
color: #fff;
vertical-align: middle;
}
手机上的切换标签
html代码如下：
<span><i></i></span>
<span class="u-icon-toggle on"><i></i></span>

페이지 표시 효과는 다음과 같습니다.

css 스타일 코드:

/*手机上的切换标签*/
.u-icon-toggle{
position: relative;
width: 60px;
height: 30px;
border-radius: 30px;
box-shadow: 0 0 0 1px #e5e5e5;
}
/*因为这里可能会在父元素上加on 也可能在子元素上加on 所以*/
.on.u-icon-toggle, .on .u-icon-toggle{
box-shadow: 0 0 0 1px #4089e8;
background-color: #4089e8;
}
.u-icon-toggle i{
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
-webkit-box-shadow: 0 0 2px #bbb;
border-radius: 100%;
background-color: #fff;
-webkit-transition: 300ms linear;
-webkit-transform: translate3d(0,0,0);
}
.on.u-icon-toggle i, .on .u-icon-toggle i{
-webkit-transform: translate3d(30px,0,0);
}
各种点（空心点、实心点、蓝色点、橙色点）
html代码如下：
<span class="u-icon-pointB cur"></span>
<span></span>
<span></span>
<span class="u-icon-pointO cur"></span>
页面显示效果如下：
用css3实现各种图标效果
 
css样式代码：
.u-icon-pointB, .u-icon-pointO{
width: 6px;
height: 6px;
margin: 0 3px;
border-radius: 100%;/*圆角为100%就实现圆的效果*/
box-shadow: 0 0 0 1px #6bb5ff;
}
/*机票筛选界面橙色点icon*/
.u-icon-pointO{
background-color: #fff;
box-shadow: 0 0 0 1px #ff5d1d;
}
/*蓝色点icon*/
.cur.u-icon-pointB,.cur .u-icon-pointB{
background-color: #6bb5ff;/*如果背景和boder颜色不一致 则为空心圆*/
}
.cur.u-icon-pointO,.cur .u-icon-pointO{
background-color: #ff5d1d;
}
箭头
html代码如下：
<span></span>
<span class="u-icon-arr u-icon-arrD"></span>
<span class="u-icon-arr u-icon-arrU"></span>
页面显示效果如下：
用css3实现各种图标效果
 
css样式代码：
.u-icon-arr{
position: absolute;
top: 50%;
right: 15px;
width: 8px;
height: 8px;
margin-top: -2px;
border-style: solid;
border-width: 2px 2px 0 0;
border-color: #ababab;
-webkit-transform-origin: 75% 25%;
-webkit-transform: rotateZ(45deg);
-webkit-transition: 100ms ease-in .1s;
transition: 100ms ease-in .1s;
}

css3로 아이콘 효과를 만드는 방법에 대한 튜토리얼이 너무 많습니다. 더 흥미로운 콘텐츠를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!