CSS3实现UI卡片样式代码效果

CSS3实现UI卡片样式代码效果

一款js基于css3属性制作社交博客网站个人信息卡片UI布局代码。点击弹出发送信息页面代码。

使用方法
在页面引入需要用到的JS代码index.js

1
<script  src="js/index.js"></script>

HTML结构

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<div class="wrapper">
    <div class="profile-card js-profile-card">
        <div class="profile-card__img">
            <img src="https://res.cloudinary.com/muhammederdem/image/upload/v1537638518/Ba%C5%9Fl%C4%B1ks%C4%B1z-1.jpg" alt="profile card">
        </div>
   
        <div class="profile-card__cnt js-profile-cnt">
            <div class="profile-card__name">Muhammed Erdem</div>
            <div class="profile-card__txt">Front-end Developer from <strong>Mesopotamia</strong></div>
            <div class="profile-card-loc">
                <span class="profile-card-loc__icon">
                    <svg class="icon"><use xlink:href="#icon-location"></use></svg>
                </span>
                <span class="profile-card-loc__txt">Istanbul, Turkey</span>
            </div>
       
            <div class="profile-card-inf">
                <div class="profile-card-inf__item">
                    <div class="profile-card-inf__title">1598</div>
                    <div class="profile-card-inf__txt">Followers</div>
                </div>
           
                <div class="profile-card-inf__item">
                    <div class="profile-card-inf__title">65</div>
                    <div class="profile-card-inf__txt">Following</div>
                </div>
           
                <div class="profile-card-inf__item">
                    <div class="profile-card-inf__title">123</div>
                    <div class="profile-card-inf__txt">Articles</div>
                </div>
           
                <div class="profile-card-inf__item">
                    <div class="profile-card-inf__title">85</div>
                    <div class="profile-card-inf__txt">Works</div>
                </div>
            </div>
       
            <div class="profile-card-social">
                <a href="#" class="profile-card-social__item facebook">
                    <span class="icon-font">
                        <svg class="icon"><use xlink:href="#icon-facebook"></use></svg>
                    </span>
                </a>
           
                <a href="#" class="profile-card-social__item twitter">
                    <span class="icon-font">
                        <svg class="icon"><use xlink:href="#icon-twitter"></use></svg>
                    </span>
                </a>
           
                <a href="#" class="profile-card-social__item instagram">
                    <span class="icon-font">
                        <svg class="icon"><use xlink:href="#icon-instagram"></use></svg>
                    </span>
                </a>
           
                <a href="#" class="profile-card-social__item behance">
                    <span class="icon-font">
                        <svg class="icon"><use xlink:href="#icon-behance"></use></svg>
                    </span>
                </a>
               
                <a href="#" class="profile-card-social__item github">
                    <span class="icon-font">
                        <svg class="icon"><use xlink:href="#icon-github"></use></svg>
                    </span>
                </a>
               
                <a href="#" class="profile-card-social__item codepen">
                    <span class="icon-font">
                        <svg class="icon"><use xlink:href="#icon-codepen"></use></svg>
                    </span>
                </a>
               
                <a href="#" class="profile-card-social__item link">
                    <span class="icon-font">
                        <svg class="icon"><use xlink:href="#icon-link"></use></svg>
                    </span>
                </a>
           
            </div>
       
            <div class="profile-card-ctr">
                <button class="profile-card__button button--blue js-message-btn">Message</button>
                <button class="profile-card__button button--orange">Follow</button>
            </div>
        </div>
   
        <div class="profile-card-message js-message">
            <form class="profile-card-form">
                <div class="profile-card-form__container">
                    <textarea placeholder="Say something..."></textarea>
                </div>
           
                <div class="profile-card-form__bottom">
                    <button class="profile-card__button button--blue js-message-close">
                    Send
                    </button>
                   
                    <button class="profile-card__button button--gray js-message-close">
                    Cancel
                    </button>
                </div>
            </form>
       
            <div class="profile-card__overlay js-message-close"></div>
        </div>
    </div>
</div>
当前内容只有登录了才能查看,如果您已经注册,请登录
0

发表评论