web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
动画效果
9种纯CSS3人物信息卡片UI设计效果
分类:
动画效果
日期:
2024-05-14
点击(0)
评论(0)
演 示
免费下载
简介
##### HTML结构 该人物信息卡片的基本HTML结构如下: ```html
标题
子标题
描述信息...
``` ##### CSS样式 为卡片添加一些通用样式: ```html .single-member{ width: 280px; float: left; font-family: sans-sarif; margin: 30px 2.5%; background-color: #fff; text-align: center; position: relative; } .member-image img{ max-width: 100%; vertical-align: middle; } h3 { font-size: 24px; font-weight: normal; margin: 10px 0 0; text-transform: uppercase; } h5 { font-size: 16px; font-weight: 300; margin: 0 0 15px; line-height: 22px; } p {font-size: 14px; font-weight: 300; line-height: 22px; padding: 0 30px; margin-bottom: 10px; } .social-touch a{ display: inline-block; width: 27px; height: 26px; vertical-align: middle; margin: 0 2px; background-image: url(images/social-icons.png); background-repeat: no-repeat; opacity: 0.7; transition: 0.3s; } .social-touch a:hover{ opacity: 1; transition: 0.3s; } .fb-touch{ background-position: 0 0; } .tweet-touch{ background-position: -35px 0; } .linkedin-touch{ background-position: -71px 0; } .icon-colored .fb-touch{ background-position: 0 -27px; } .icon-colored .tweet-touch{ background-position: -35px -27px; } .icon-colored .linkedin-touch{ background-position: -71px -27px; } ``` 第三种效果的CSS代码如下: ```html .effect-3{ max-height: 302px; min-height: 302px; overflow: hidden; } .effect-3 h3{ padding-top: 7px; line-height: 33px; } .effect-3 .member-image{ border-bottom: 5px solid #e5642b; transition: 0.4s; height: 212px; width: 100%; display: inline-block; float: none; vertical-align: middle; } .effect-3 .member-info{ transition: 0.4s; } .effect-3 .member-image img{ width: 100%; vertical-align: bottom; } .effect-3 .social-touch{ background-color: #e5642b; float: left; left: 0; bottom: 0; overflow: hidden; padding: 5px 0; width: 100%; transition: 0.4s; } .effect-3:hover .member-image{ border-bottom: 0; border-radius: 0 0 50px 50px; height: 81px; display: inline-block; overflow: hidden; width: 109px; transition: 0.4s; } ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告