CSS3+SVG 响应式图标设计

来源：互联网发布：程序员空闲编辑：程序博客网时间：2024/04/30 19:32

除了网页内容、布局需要进行响应式设计之外，有时图标也需要针对不同的屏幕尺寸做出相应的调整。

本文简单介绍一个使用SVG图和CSS3来实现的响应式设计实例。

1. CSS代码，Logo的背景使用了一张svg图片，该图片包含了不同的尺寸的logo元素。

body {    background: #000;}header {    height: 100vh;    display: -webkit-flex;    display: flex;    -webkit-justify-content: center;    justify-content: center;    -webkit-align-items: center;    align-items: center;    -moz-transition: all, 0.5s;    -o-transition: all, 0.5s;    -webkit-transition: all, 0.5s;    transition: all, 0.5s;}.logo {    margin: 0;    padding: 0;    text-indent: -9999em;    background: url("/uploads/150101/dd-logo.svg") no-repeat;    background-position: center -500px;    height: 300px;    width: 300px;}@media only screen and (min-width: 640px) {    .logo {        background-position: center -200px;    }}@media only screen and (min-width: 960px) {    .logo {        background-position: center 100px;    }}

2. html代码

<div class='container'>    <header>        <h1 class='logo'>Deloitte Digital</h1>    </header></div>

在线演示地址：http://wow.techbrood.com/fiddle/4302

拖动改变预览屏幕的尺寸即可看到响应式设计的效果。

by iefreer

0 0