마우스가 그림 안으로 이동할 때 CSS3 동적 프롬프트 효과-CSS 튜토리얼-php.cn

이 글에서는 주로 이미지에 마우스를 올렸을 때의 CSS3 동적 프롬프트 효과(변형)에 대해 소개하고 있는데 내용이 꽤 좋아서 참고용으로 올려보겠습니다.

처음으로 블로그를 작성해봅니다. 혹시 실수나 오류가 있으면 수정해 주시기 바랍니다. 오늘은 주로 CSS3의 중요한 속성인 변환 사용에 대해 작성하고 있습니다. 전에는 MOOC를 공부했고, 선생님의 수업을 듣고 직접 타이핑했어요.

1. 소개

1. 변환이란?

transform의 의미는 변경, 변형...; 변형의 일반적인 속성은 무엇입니까?

변환의 속성에는 다음이 포함됩니다:translate()/rotate()/skew()/scale()/, 각각 x와 y(예:rotatex()및rotate()등).

transform:translate()

의미: 변경, 변위; 예를 들어 오른쪽으로 20픽셀 이동, 위로 50픽셀 이동(음수 값은 왼쪽 및 아래로) 예는 다음과 같습니다

.test01{-webkit-transform:translate(20px,50px);-moz-transform:translate(20px,50px)}

로그인 후 복사

transform:rotate()

의미: 회전; "deg"는 회전 각도입니다. 예를 들어 "180deg"는 "180도"의 회전을 의미합니다.

.test02{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg)}

로그인 후 복사

transform:skew ()

의미: 기울어짐 예시는 다음과 같습니다

.test03{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}

로그인 후 복사

transform:scale()

의미: Ratio 1.8은 3배 확대와 같이 정수배로 확대하는 경우 1.8의 비율로 확대한다는 의미입니다. , 3.0 으로 작성해야 합니다. 예시는 다음과 같습니다

3. 변환 예시

demo01 설명 : 마우스를 안으로 이동한 후 이미지가 왼쪽으로 이동하고 내용이 들어갑니다 시퀀스

단계:

1. HTML 코드를 작성하고 CSS를 통해 콘텐츠와 이미지의 초기 스타일을 설정합니다. (텍스트 콘텐츠는 모두 이미지에 있습니다.)

3. 다음으로, 마우스가 안으로 움직일 때의 스타일을 설정합니다(:hover). 또한 변환을 사용하여 콘텐츠를 왼쪽으로 이동합니다. 거리는 0입니다(transform:translate(0,0)). 여기서는 세 가지 콘텐츠를 서로 다른 시간 동안 지연하여 순차적으로 입력하는 효과를 형성하는 데 주로 사용됩니다.

.test03{-webkit-transform:scale(2.5);-moz-transform:scale(2.5)}

로그인 후 복사

/*图片左移 文字依次进入*/
.test1{background: #fff;}
.test1 figcaption p{background: #fff;color:#333;margin:5px 0;transform: translate(-600px,0px);}
.test1 figcaption{padding:20px}
.test1:hover figcaption p{transform: translate(0,0);}

.test1 figcaption p:nth-of-type(1){transition-delay: 0.2s;}
.test1 figcaption p:nth-of-type(2){transition-delay: 0.3s;}
.test1 figcaption p:nth-of-type(3){transition-delay: 0.4s;}
.test1:hover img{transform: translate(-5px,0);}

로그인 후 복사

demo02 설명: 마우스를 안으로 이동하면 그림이 흐려지고 사각형이 그림 외부에서 그림의 지정된 위치로 회전합니다. 텍스트가 오른쪽에서 날아갑니다. 점진적으로 표시

단계:

1. HTML 코드를 작성하고 CSS를 통해 콘텐츠와 이미지의 초기 스타일을 설정합니다(직사각형 텍스트가 이미지에 있음).

2를 통해 사각형을 위로 이동합니다. 보이지 않을 때까지 변환 속성을 설정하고 회전 각도를 0으로 설정합니다. 360도 변환: 변환(0,0) 회전(360deg);

        <!--移动-->
        <figure class="test1">
            <img src="img/altimg05.jpg">
            <figcaption>
                <h2>图片标题</h2>
                <p>这里是图片的相关描述内容</p>
                <p>这里是图片的相关描述内容</p>
                <p>这里是图片的相关描述内容</p>
            </figcaption>
        </figure>

로그인 후 복사

/*旋转*/
.test2{background: #ccc;}
.test2 figcaption{width: 100%;height: 100%;}
.test2 figcaption h2{margin:15% 0 0 15%}
.test2 figcaption p{margin-left:15%;transform: translate(50px,0);opacity: 0;}
.test2 figcaption p{border:2px solid #ccc;width: 80%;height: 80%;position:absolute;top:10%;left:10%;transform: translate(0,-400px) rotate(0deg);}
.test2:hover figcaption p{transform: translate(0,0) rotate(360deg);}
.test2:hover img{opacity: 0.6;}
.test2:hover figcaption p{transform: translate(0,0);opacity: 1;}

로그인 후 복사

demo03 설명: 마우스를 이동한 후 왜곡된 단어가 정상적으로 표시됩니다(텍스트가 예제에서는 90도 왜곡되어 텍스트가 시각적으로 표시되지 않습니다.)

　　　　　단계:

1. 좋은 HTML 코드를 작성하고 CSS를 통해 콘텐츠와 그림의 초기 스타일을 설정합니다.

2. 각도 변환: 기울이기(90deg);

3. 다음으로 마우스가 움직일 때의 텍스트 스타일을 설정합니다(:hover). 내용이 0도 왜곡됩니다.

demo04 설명: 마우스를 안으로 이동하면 사각형과 텍스트가 표시되고 축소되며 그림도 축소됩니다

단계:

1 쓰기 좋은 HTML 코드를 사용하고 초기 스타일을 설정합니다. CSS를 통해 콘텐츠와 그림

2. 콘텐츠를 1.2배로 확대합니다. 마우스를 이동한 후 확대 비율이 1이 될 때 콘텐츠의 투명도를 0으로 설정합니다.

3. , 마우스를 안으로 움직일 때(:hover) 스타일 콘텐츠의 확대 비율을 1로 설정합니다. 즉, 이미지의 원래 크기가 줄어들고 투명도가 1이 됩니다. Tic-tac-toe 그리드

단계:

1. HTML 코드를 작성하고 CSS를 통해 콘텐츠와 그림의 초기 스타일을 설정합니다(tic-tac-toe는 두 개의 직사각형이 겹치는 것입니다)

2. 두 개의 직사각형을 0.8로 축소하고 투명도를 설정합니다. 0으로 설정하고 콘텐츠 투명도를 0으로 설정합니다.

3.接下来设置鼠标移入时(:hover)的样式内容透明度设置为1 设置矩形缩放为1 这里利用到transition属性主要是为了缩小放大过程逐渐变化;

/*井字格*/
.test5{background: #000;}
.test5 figcaption{width: 100%;height: 100%;}
.test5 figcaption h2{margin: 15% 0 0 18%;opacity: 0;}
.test5 figcaption p{margin-left: 18%;opacity: 0;}
.test5 figcaption p{position: absolute;}
.test5 figcaption p.p01{width: 80%;height:70%;border-top: 2px solid #ccc;border-bottom: 2px solid #ccc;left:10%;top:15%;opacity: 0;transform: scale(0.8);}
.test5 figcaption p.p02{width: 70%;height:80%;border-left: 2px solid #ccc;border-right: 2px solid #ccc;left: 15%;top:10%;opacity: 0;transform: scale(0.8);}
.test5:hover p.p01{opacity: 1;transform: scale(1);transition: transform 0.3s ease-in}
.test5:hover p.p02{opacity: 1;transform: scale(1);transition: transform 0.3s ease-in}
.test5:hover figcaption p{opacity: 1;}
.test5:hover figcaption h2{opacity: 1;}
.test5:hover img{opacity: 0.6;}

로그인 후 복사

        <!--井字格-->
        <figure class="test5">
            <img src="img/altimg05.jpg">
            <figcaption>
                <h2>图片标题</h2>
                <p>这里是图片的相关描述内容</p>
                <p class="p01"></p>
                <p class="p02"></p>
            </figcaption>
        </figure>

로그인 후 복사

以上是几个简单的小例子，之所以用figure和figcaption标签，主要是标签的语义化，截取动态图用到的是GifCam第一次用挺好用的很可爱哈哈。

figure标签主要是用于规定独立的流内容（图片，图表，照片，代码等）而figcaption与figure标签配套使用，主要用于定义figure元素的标题

哦，对了，由于这几个例子写在一个html里面所以提取出了部分公用的样式

body,figure,figcaption,h2,p{margin:0;padding:0;font-family: "微软雅黑";}
figure{position: relative;overflow: hidden;float: left;width:33.33%;height: 350px;}
figcaption{position: absolute;top: 0;left: 0;color:#fff;}
figure img{width:101%;height: 360px;opacity: 0.8;transition: all 0.35s}
figure figcaption p,h2,span,p{transition: all 0.35s}
@media screen and (max-width: 600px) {
    figure{width: 100%;}
}
@media screen and (min-width:601px) and (max-width: 1000px) {
    figure{width: 50%;}
}
@media screen and (min-width: 1001px) {
    figure{width: 33.33%;}
}

로그인 후 복사

总结：

之所以选择写博客主要是为了锻炼自己的表达能力，培养一个总结知识点的好习惯，以前看别人写的一些好的文章时都很羡慕，自己却总是不知道从何下手，直到最近投简历的时候发现很多公司都要求注明自己的博客地址，所以有必要逼着自己写一下东西啦！

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！