CSS3 작은 아이콘 프롬프트 효과
어서 예를 들어보세요
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/normalize.css" />/*normalize这个css框架呢,可以去搜搜,挺好用的*/ <link rel="stylesheet" href="css/font-awesome.min.css" />/*这个呢,是小图标css框架,用法和bootstrap差不多*/ <style> *,*:before,*:after{ -ms-box-sizing:border-box; -o-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;/*这里主要是想真正的widdth就是width,不要把什么padding啊,border啊等加进来,这才真正的符合人的视角*/ } html,body{ width: 100%; height: 100%; background: rgba(95, 234, 234, 0.8); font-size: 24px; font-weight: 600; font-family: "arial black"; } ul,li{ list-style: none; display: inline-block; } a{ display: block; text-decoration: none; color:rgba(0,0,0,0.3); } li{ padding: 20px 0; margin: 0 10px; } .da{ width: 700px; margin-top: 200px; margin-left: 50%; -webkit-transform:translateX(-50%);/*这两行代码也是居中的技巧*/ } .da li{ width: 100px; height: 100px; text-align: center; position: relative; z-index: 999;/*一定位就要想到z-index,不管有没有用*/ } .da span{ position: absolute; bottom:100%;/*我归之为“巧用100%”,先什么left,top 啊,都不加,光是position看看,因为%是相对于他的父类,如果他的上边贴紧父类的上边框,这就是不是可以考虑用100%了呢?*/ left: 60%; margin-left: -50%; z-index: 9998; width: 80px; height: 80px; background: #fff; border-radius: 50%;/*圆角*/ color:rgba(12, 130, 130, 0.8); opacity: 0; transition:opacity 0.3;/*css3很重要的标签,过渡。4个值,标签名(对象是谁)时间(多久)方式(匀速啊,变速啊,先怎么后怎么样啊)延迟时间(等多久开始)我这里只用到前两个*/ } .da span:after{/*做完今天这个,我感觉伪类就是来修修补补,或者拼接用的,当然,他还有一个很好用的东东,就是清除浮动{content:“”;display:block;clear:both,核心这个}*/ content: ""; width: 40px; height: 40px; background: url(imges/tip.svg) no-repeat;/*avg格式的图片,不会因为变大而失真*/ position: absolute; top:100%; left:80%; margin-left: -50%; margin-top: -8px; } .da i{ position: absolute; left:85%; margin-left:-50%; margin-top:30px; margin-bottom: 20px; } /*-----------------------接下来就是核心代码,前边是在搭框架-----------------------------------------------------------------*/ span{ transition:transform 0.3s; -webkit-transition:transform 0.3s; } span i{ transition:transform 0.1s; -webkit-transition:transform 0.1s; } li:hover span{ transform:rotate3d(0,0,0,0deg) translate3d(0,0,0) scale3d(1,1,1); -webkit-transform:rotate3d(0,0,0,0deg) translate3d(0,0,0) scale3d(1,1,1); opacity: 1; } li:hover span i{ transform:scale3d(1,1,1) translate3d(0,0,0); -webkit-transform:scale3d(1,1,1) translate3d(0,0,0); }/*这里每个类吧相同的都提出来了,相同的是什么?就是最终的状态是一样的*/
/*接下来就是每个分部分,rotatwd旋转角度 scale缩放 translate平移 其中加了3d就是让他进行3d变换,当然还有一个2d。 */
span.content1{ transform-origin: center bottom; -webkit-transform-origin: center bottom; transform:rotate3d(1,1,1,60deg); -webkit-transform:rotate3d(1,1,1,60deg); } span.content1 i{ transform:scale3d(0.01,0.01,1); -webkit-transform:scale3d(0.01,0.01,1); } span.content2{ transform-origin: center bottom; -webkit-transform-origin: center bottom; transform:translate3d(0,20px,0); -webkit-transform:translate3d(0,20px,0); } span.content2 i{ transform:translate3d(0,10px,0); -webkit-transform:translate3d(0,10px,0); } span.content3{ transform-origin: center bottom; -webkit-transform-origin: center bottom; transform:rotate3d(0,1,0,90deg) translate3d(0,8px,0); -webkit-transform:rotate3d(0,1,0,90deg) translate3d(0,8px,0); } span.content3 i{ transform:translate3d(0,-2px,0); -webkit-transform:translate3d(0,-2px,0); } span.content4{ transform:translate3d(0,-12px,0); -webkit-transform:translate3d(0,-12px,0); } span.content4 i{ transform:translate3d(0,12px,0); -webkit-transform:translate3d(0,12px,0); } span.content5{ transform:scale(0.01) translate3d(0,10px,0);/*最重要的,就是scale如果你把它缩成0,可能会发生效果不发出现的情况,不行你可以去试,所以尽可能把他弄成0,01*/ -webkit-transform:scale(0.01) translate3d(0,10px,0); } span.content5 i{ transform:translate3d(0,20px,0); -webkit-transform:translate3d(0,20px,0); } </style> </head> <body> <p class="da"> <ul> <li> <a href="#">nomalse<span class="content1"><i class="fa fa-camera"></i></span></a> </li> <li> <a href="#">palse<span class="content2" ><i class="fa fa-bicycle"></i></span></a> </li> <li> <a href="#">mate<span class="content3" ><i class="fa fa-bus"></i></span></a> </li> <li> <a href="#">script<span class="content4"><i class="fa fa-ship"></i></span></a> </li> <li> <a href="#">css3<span class="content5"><i class="fa fa-plane"></i></span></a> </li> </ul> </p> </body> </html>
더 많은 CSS3 작은 아이콘 프롬프트 효과 및 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











순수한 CSS3로 물결 효과를 얻는 방법은 무엇입니까? 이 기사에서는 SVG 및 CSS 애니메이션을 사용하여 물결 효과를 만드는 방법을 소개합니다. 도움이 되길 바랍니다.

이 글에서는 CSS를 활용하여 자주 나타나는 다양한 모양의 버튼을 쉽게 구현하는 방법을 알려드리겠습니다. 도움이 되셨으면 좋겠습니다.

두 가지 방법: 1. 표시 속성을 사용하여 요소에 "display:none;" 스타일을 추가합니다. 2. 요소를 숨기려면 위치 및 상단 속성을 사용하여 요소의 절대 위치를 설정하세요. 요소에 "position:absolute;top:-9999px;" 스타일을 추가하세요.

CSS에서는 border-image 속성을 사용하여 레이스 테두리를 만들 수 있습니다. border-image 속성은 이미지를 사용하여 테두리를 생성할 수 있습니다. 즉, 배경 이미지를 레이스 스타일로 지정하기만 하면 됩니다. "border-image: url(이미지 경로)은 이미지 테두리 너비가 안쪽으로 반복되는지 여부입니다.

구현 방법: 1. ":active" 선택기를 사용하여 그림에 대한 마우스 클릭 상태를 선택합니다. 2. 변환 속성과 scale() 함수를 사용하여 그림 확대 효과를 얻습니다. 구문은 "img:active {transform; : scale(x축 배율, y축 배율);}".

텍스트 회전판과 이미지 회전판을 만드는 방법은 무엇입니까? 누구나 가장 먼저 생각하는 것은 js를 사용할지 여부입니다. 실제로 순수 CSS를 사용하여 구현하는 방법도 모두에게 도움이 되기를 바랍니다.

CSS3에서는 "animation-timing-function" 속성을 사용하여 애니메이션 회전 속도를 설정할 수 있습니다. 이 속성은 애니메이션이 순환을 완료하는 방법을 지정하고 애니메이션의 속도 곡선을 설정하는 데 사용됩니다. 애니메이션 타이밍 기능: 속도 속성 값;}".

CSS3의 애니메이션 효과에는 변형이 있습니다. 애니메이션 속성은 애니메이션 스타일을 설정하는 데 사용됩니다. 변형 속성은 변형 스타일을 설정하는 데 사용됩니다.
