뛰는 심장

WBOY
풀어 주다: 2016-09-21 13:56:13
원래의
2428명이 탐색했습니다.

사진을 사용하지 않고 CSS3를 사용하여 뛰는 심장을 만들어보세요.

HTML:

1

2

3

4

<span style="color: #0000ff;">    <</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box"</span><span style="color: #0000ff;">></span>

            <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="left"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

            <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="right"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

로그인 후 복사

먼저 두 개의 div가 부동되고 왼쪽 상단과 오른쪽 상단 모서리가 둥글게 됩니다.

1

2

3

4

5

6

7

8

9

10

11

12

<span style="color: #800000;">            .box</span>{<span style="color: #ff0000;">

            margin</span>:<span style="color: #0000ff;"> 100px</span>;

            }<span style="color: #800000;">

            .left,.right</span>{<span style="color: #ff0000;">

                float</span>:<span style="color: #0000ff;"> left</span>;

            }<span style="color: #800000;">

            .box div</span>{<span style="color: #ff0000;">

                height</span>:<span style="color: #0000ff;">160px</span>;<span style="color: #ff0000;">

                width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">

                border-radius</span>:<span style="color: #0000ff;"> 50px 50px 0 0</span>;<span style="color: #ff0000;">

                background</span>:<span style="color: #0000ff;"> red</span>;

            }

로그인 후 복사

은 다음과 같습니다.

그런 다음 두 div를 회전합니다. 왼쪽은 오른쪽 하단 모서리를 회전점으로 사용하고 시계 반대 방향으로 45도 회전합니다. 🎜>

1

2

3

4

5

6

7

8

9

10

<span style="color: #800000;">.left</span>{<span style="color: #ff0000;">       

                transform-origin</span>:<span style="color: #0000ff;"> 100% 100%</span>;<span style="color: #ff0000;">

                transform</span>:<span style="color: #0000ff;"> rotate(45deg)</span>;<span style="color: #ff0000;">

                box-shadow</span>:<span style="color: #0000ff;"> 8px 10px 10px #888888</span>;      

        }<span style="color: #800000;">

.right</span>{<span style="color: #ff0000;">               

                transform-origin</span>:<span style="color: #0000ff;"> 0% 100%</span>;<span style="color: #ff0000;">

                transform</span>:<span style="color: #0000ff;"> rotate(-45deg)</span>;<span style="color: #ff0000;">

                box-shadow</span>:<span style="color: #0000ff;"> -10px -1px 10px #888888</span>;    

            }<br><br>

로그인 후 복사
하트 모양이 나옵니다 :

심장을 뛰게 하고 애니메이션을 추가하세요.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<span style="color: #800000;">    .box div</span>{<span style="color: #ff0000;">

                animation</span>:<span style="color: #0000ff;"> lb  1s  cubic-bezier(0.3,0.4,0.3,1) 0s infinite</span>;<span style="color: #ff0000;">

                border</span>:<span style="color: #0000ff;"> 0px solid red</span>;/*这个不能少*/

          }<span style="color: #800000;">

    @keyframes lb</span>{<span style="color: #ff0000;">

                0%{

                    border</span>:<span style="color: #0000ff;"> 10px solid red</span>;<span style="color: #ff0000;">

                    border-radius</span>:<span style="color: #0000ff;"> 58px 58px 0 0</span>;

                }<span style="color: #800000;">

                50%</span>{<span style="color: #ff0000;">

                    border</span>:<span style="color: #0000ff;"> 20px solid red</span>;<span style="color: #ff0000;">

                    border-radius</span>:<span style="color: #0000ff;"> 66px 66px 0 0</span>;

                }<span style="color: #800000;">

                100%</span>{<span style="color: #ff0000;">

                    border</span>:<span style="color: #0000ff;">0px solid red</span>;<span style="color: #ff0000;">

                    border-radius</span>:<span style="color: #0000ff;"> 50px 50px 0 0</span>;

                }<span style="color: #800000;">

            }</span>

로그인 후 복사
자, 심장이 쿵쾅쿵쾅 뛰는 것이 완성되었습니다.

전체 CSS:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

<span style="color: #800000;">        <style>

            .box</span>{<span style="color: #ff0000;">

                margin</span>:<span style="color: #0000ff;"> 100px</span>;

            }<span style="color: #800000;">

            .left,.right</span>{<span style="color: #ff0000;">

                float</span>:<span style="color: #0000ff;"> left</span>;

            }<span style="color: #800000;">

            .box div</span>{<span style="color: #ff0000;">

                height</span>:<span style="color: #0000ff;">160px</span>;<span style="color: #ff0000;">

                width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">

                border-radius</span>:<span style="color: #0000ff;"> 50px 50px 0 0</span>;<span style="color: #ff0000;">

                background</span>:<span style="color: #0000ff;"> red</span>;<span style="color: #ff0000;">

                animation</span>:<span style="color: #0000ff;"> lb  1s  cubic-bezier(0.3,0.4,0.3,1) 0s infinite</span>;<span style="color: #ff0000;">

                border</span>:<span style="color: #0000ff;"> 0px solid red</span>;

            }<span style="color: #800000;">

            .left</span>{<span style="color: #ff0000;">       

                transform-origin</span>:<span style="color: #0000ff;"> 100% 100%</span>;<span style="color: #ff0000;">

                transform</span>:<span style="color: #0000ff;"> rotate(45deg)</span>;<span style="color: #ff0000;">

                box-shadow</span>:<span style="color: #0000ff;"> 8px 10px 10px #888888</span>;      

            }<span style="color: #800000;">

            @keyframes lb</span>{<span style="color: #ff0000;">

                0%{

                    border</span>:<span style="color: #0000ff;"> 10px solid red</span>;<span style="color: #ff0000;">

                    border-radius</span>:<span style="color: #0000ff;"> 58px 58px 0 0</span>;

                }<span style="color: #800000;">

                50%</span>{<span style="color: #ff0000;">

                    border</span>:<span style="color: #0000ff;"> 20px solid red</span>;<span style="color: #ff0000;">

                    border-radius</span>:<span style="color: #0000ff;"> 66px 66px 0 0</span>;

                }<span style="color: #800000;">

                100%</span>{<span style="color: #ff0000;">

                    border</span>:<span style="color: #0000ff;">0px solid red</span>;<span style="color: #ff0000;">

                    border-radius</span>:<span style="color: #0000ff;"> 50px 50px 0 0</span>;

                }<span style="color: #800000;">

            }

            .right</span>{<span style="color: #ff0000;">               

                transform-origin</span>:<span style="color: #0000ff;"> 0% 100%</span>;<span style="color: #ff0000;">

                transform</span>:<span style="color: #0000ff;"> rotate(-45deg)</span>;<span style="color: #ff0000;">

                box-shadow</span>:<span style="color: #0000ff;"> -10px -1px 10px #888888</span>;    

            }<span style="color: #800000;">

        </style>    </span>

로그인 후 복사

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿