第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

css3邊框加載 鼠標(biāo)滑過，線能有一個閉合的過程

css3邊框加載 鼠標(biāo)滑過，線能有一個閉合的過程

慕哥9229398 2019-03-04 08:04:39
css3邊框加載 鼠標(biāo)滑過，線能有一個閉合的過程
查看完整描述

3 回答

?
MMMHUHU

TA貢獻(xiàn)1834條經(jīng)驗 獲得超8個贊

我想的應(yīng)該是四個邊用四個標(biāo)簽?zāi)M一下。。然后每個邊用css3處理做動畫。

不知道有沒有更好的辦法。

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

<style>

    .outer{position:relative;width:100px;height:100px;border:3px solid #ccc;}

    .outer i{}

    .outer:before,

    .outer:after{position:absolute;display:block;content:"";-webkit-transition:all 0.1s;}

     

    .outer:before{top:-3px;left:-3px;width:0;height:0;border-top:3px solid #F00;-webkit-transition-delay: 0.3s;}

    .outer:after{bottom:-3px;right:-3px;width:0;height:0;border-top:3px solid #F00;-webkit-transition-delay: 0.1s;}

     

    .outer i:before,

    .outer i:after{position:absolute;display:block;content:"";-webkit-transition:all 0.1s;}

     

    .outer i:before{left:-3px;bottom:-3px;height:0;width:0;border-left:3px solid #F00;-webkit-transition-delay: 0s;}

    .outer i:after{right:-3px;top:-3px;height:0;width:0;border-left:3px solid #F00;-webkit-transition-delay: 0.2s;}

     

    .outer:hover:after,

    .outer:hover:before{width:103px;}

    .outer:hover i:after,

    .outer:hover i:before{height:103px;}

    .outer:hover:before{-webkit-transition-delay: 0s;}

    .outer:hover:after{-webkit-transition-delay: 0.2s;}

    .outer:hover i:after{-webkit-transition-delay: 0.1s;}

    .outer:hover i:before{-webkit-transition-delay: 0.3s;}

</style>

 

<div class="outer">

    <i></i>

</div>



查看完整回答
反對 回復(fù) 2019-03-14
?
qq_遁去的一_1

TA貢獻(xiàn)1725條經(jīng)驗 獲得超8個贊

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

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>鼠標(biāo)移入顯示文本</title>

<link href="my.css" rel="stylesheet" type="text/css">

<style>

#body1{width:960px; height:auto; margin:20px auto 0px auto}

#body1 ul{}

#body1 li{float:left; width:239px; text-align:center; height:318px; position:relative}

#body1 img{ position:absolute; top:0px; left:5px}

#body1 span{display:block; position:absolute; background:#666; height:70px;bottom:0px; left:5px; width:220px;color:#fff; opacity:0.7}

</style>

<script src="jquery-1.3.2.min.js"></script>

<script>

$(function(){

    $('#body1 li').find('span').hide(); //隱藏全部

    $('#body1 li').hover(function(){

        $(this).find('span').stop(true,true).slideDown();    

        },function(){

        $(this).find('span').stop(true,true).slideUp();        

    });    

});

</script>

</head>

<body>

  <div id="body1">

    <ul>

        <li>

            <a href="#">

            <img src="img/3.jpg" />

            <span>說明內(nèi)容說明內(nèi)容說明內(nèi)容說明內(nèi)容</span>

            </a>

        </li>

        <li>

            <a href="#">

            <img src="img/4.jpg" />

            <span>說明2內(nèi)容說明內(nèi)容說明內(nèi)容說明內(nèi)容</span>

            </a>

        </li>

        <li>

            <a href="#">

            <img src="img/5.jpg" />

            <span>說明3內(nèi)容說明內(nèi)容說明內(nèi)容說明內(nèi)容</span>

            </a>

        </li>

        <li>

            <a href="#">

            <img src="img/6.jpg" />

            <span>說明4內(nèi)容說明內(nèi)容說明內(nèi)容說明內(nèi)容</span>

            </a>

        </li>

    </ul>

      

</div>

 

</body>

</html>

第二種：還有一種是用的css3實現(xiàn)的，

實現(xiàn)原理：剛開始框就存在了，只不過透明度為全透明，鼠標(biāo)移入后透明度不透明就顯示出來了，框稍微動畫一些的話就用到css3的旋轉(zhuǎn)之類的了。如下圖

https://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=6fe6e306cffcc3ceb495c135a275fab0/d4628535e5dde711b8192cd2a0efce1b9c1661ce.jpg

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

41

42

43

44

45

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>css3練習(xí)</title>

<link href="my-1.css" rel="stylesheet" type="text/css">

<style>

#bt{width:100%; height:50px; font-size:20px; background:#06F; color:#fff; text-align:center; line-height:50px; margin-bottom:10px}

figure{position:relative; width:33.33%; height:270px; float:left; overflow:hidden}

figure img{width:100%; opacity:0.9;transition: all 0.35s;}

figcaption{position:absolute; top:10px; left:10px; color:#fff; font-family:"微軟雅黑"}

@media screen and (max-width:600px){

    figure{width:100%}

    }

@media screen and (max-width:1000px) and (min-width:601px){

    figure{width:50%}

    }

@media screen and (min-width:1001px){

    figure{width:33.33%}

    }

.d2{background:#000}

.d2 figcaption{width:100%; height:100%;}

.d2 figcaption h2{margin-top:10%;margin-left:15%}

.d2 figcaption p{margin-top:5%;margin-left:15% ;transform:translate(0px,50px); opacity:0}

.d2 figcaption div{width:80%; height:60%; border:5px solid white; position:absolute; top:10%; left:10%; transform:translate(0px,-210px) rotate(0deg)}

.d2:hover figcaption div{ transform:translate(0px,0px) rotate(180deg);}

.d2:hover img{ opacity:0.7}

.d2:hover figcaption p{margin-top:5%;margin-left:15%; font-size:17px; font-weight:bold; transform:translate(0px,0px);opacity:1}

/*----------------------------end-------------------------------------------*/

</style> 

</head>

 

<body>

<div id="bt">CSS3.0的樣式練習(xí)</div>

 

<figure class="d2">

    <img src="img/48.jpg"/>

    <figcaption>

        <h2>旋轉(zhuǎn)動畫</h2>

        <p>飛來飛去，飛來飛舞</p>

        <div></div>

    </figcaption>

</figure>

</body>

</html>


 


查看完整回答
反對 回復(fù) 2019-03-14
  • 3 回答
  • 0 關(guān)注
  • 610 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號