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

이번에는 이미지에 마우스를 넣었을 때의 CSS3 동적 프롬프트 효과를 가져오겠습니다. 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()

의미: 기울기 예는 다음과 같습니다. Follows

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

로그인 후 복사

transform:scale()

meaning: ratio 1.8 1.8배율의 배율을 나타냅니다. 배율 3배 등 정수 배율인 경우에는 3.0으로 표기해야 합니다. 예는 다음과 같습니다

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

로그인 후 복사

3. 변환 예

demo01 설명: 마우스를 안으로 이동하면 이미지가 왼쪽으로 이동하고 내용이 순서대로 들어갑니다. :

1.html 코드를 작성하고 초기 스타일을 설정합니다. CSS를 통해 내용과 그림(텍스트 내용이 그림에 있음)

2. 설명 내용이 더 이상 표시되지 않을 때까지 변환 속성을 통해 왼쪽으로 이동합니다.

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

/*图片左移 文字依次进入*/
.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);}

로그인 후 복사

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

로그인 후 복사

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

단계:

1. HTML 코드를 작성하고 CSS를 통해 설정합니다. 좋은 내용과 그림의 초기 스타일(그림에 직사각형 텍스트가 있음)

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

3. 다음으로 마우스가 움직일 때(:hover) 스타일 변위를 0으로 설정하고 360도 회전 변환: 변환(0, 0) 회전(360deg);

/*旋转*/
.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;}

로그인 후 복사

        <!--旋转-->
        <figure class="test2">
            <img src="img/altimg05.jpg">
            <figcaption>
                <h2>图片标题</h2>
                <p>飞来飞去</p>
                <p></p>
            </figcaption>
        </figure>

로그인 후 복사

demo03 설명: 마우스가 안으로 들어간 후 왜곡됩니다. 단어가 정상적으로 표시됩니다(예제에서 텍스트가 90도 비틀어져 시각적으로 텍스트가 보이지 않기 때문입니다)

단계 :

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

2 .텍스트 콘텐츠를 90도 왜곡합니다: Skew(90deg);

3. 다음으로 스타일을 설정합니다. 마우스를 안으로 이동(:hover)하고 텍스트 내용을 0도 왜곡합니다. 변환:skew(0);

/*扭曲*/
.test3{background:#CCCCCC;}
.test3 figcaption{position: absolute;left:15%;top:15%}
.test3 figcaption h2{transform: skew(90deg);}
.test3 figcaption p{transform: skew(90deg);}
.test3:hover img{opacity: 0.6;}
.test3:hover figcaption h2{transform: skew(0);}
.test3:hover figcaption p{transform: skew(0);}

로그인 후 복사

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

로그인 후 복사

demo04 설명: 마우스 이동 후 사각형과 텍스트가 표시되고 축소되며, 이미지도 축소됩니다

단계:

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

2. 콘텐츠를 1.2배로 확대합니다. 이동 후 배율이 1이 됩니다. 콘텐츠의 투명도는 0으로 설정됩니다.

3.接下来设置鼠标移入时(:hover)的样式内容放大倍数变成1也就是原始大小图片缩小透明度都变成1;

/*缩放*/
.test4{background: #000;}
.test4 figcaption{width: 100%;height: 100%;}
.test4 figcaption h2{margin:15% 0 0 15%;opacity:0;transform: scale(1.2);}
.test4 figcaption p{margin-left:15%;opacity:0;transform: scale(1.2);}
.test4 figcaption p{border:2px solid #ccc;width: 80%;height: 80%;position:absolute;top:10%;left:10%;transform: scale(1.2,1.2);opacity: 0;}
.test4:hover figcaption p{transform: scale(1,1);opacity: 1;}
.test4:hover img{opacity: 0.6;transform: scale(0.9,0.9);}
.test4:hover figcaption h2{opacity: 1;transform: scale(1);}
.test4:hover figcaption p{opacity: 1;transform: scale(1);}

로그인 후 복사

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

로그인 후 복사

demo05 说明：鼠标移入后内容显示并出现井字格

步骤：

1.写好html代码并通过css设置好内容和图片的初始样式（井字就是两个矩形的重叠）

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中文网其它相关文章！