用css和html做一个宣传海报,用css和html实现的一个forest logo

用css和html实现的一个forest logo

html代码如下：

css代码如下：

* {

margin:0;

padding:0;

}

.logo {

height:300px;

width:260px;

margin:150px auto;

position:relative;

}

#tree {

border-bottom:300px solid #063;

border-left:130px solid transparent;

border-right:130px solid transparent;

position:absolute;

left:0;

top:0;

height:0;

width:0;

}

#trunk {

height:180px;

width:32px;

background:#3b543f;

position:absolute;

left:109px;

bottom:-60px;

}

#left-branch {

background:#3b543f;

height:70px;

width:10px;

position:absolute;

left:-18px;

top:15px;

transform:rotate(-40deg);

-webkit-transform:rotate(-40deg);

-moz-transform:rotate(-40deg);

-o-transform:rotate(-40deg);

-ms-transform:rotate(-40deg);

}

#right-bottom-branch {

background:#3b543f;

height:100px;

width:10px;

position:absolute;

top:20px;

left:50px;

transform:rotate(40deg);

-webkit-transform:rotate(40deg);

-moz-transform:rotate(40deg);

-o-transform:rotate(40deg);

-ms-transform:rotate(40deg);

}

#right-top-branch {

background:#3b543f;

height:50px;

width:10px;

position:absolute;

left:40px;

top:0px;

transform:rotate(40deg);

-webkit-transform:rotate(40deg);

-moz-transform:rotate(40deg);

-o-transform:rotate(40deg);

-ms-transform:rotate(40deg);

}

预览效果；不支持ie8及以下的浏览器：

补充：web前端 , HTML/CSS ,

用css和html做一个宣传海报,用css和html实现的一个forest logo相关推荐

31 给华为P10做个宣传海报 33 认识图标
换个角度认识图标为什么要用图标图标的功能: 强化理解,拓展性很强在一个PPT中一个图标表达一个意思让受众曲解意思图标给人修改图标的统一大小统一图标的识别性图标的设计趋势阿里巴巴图标 ...
宣传海报用什么软件做？
宣传海报用什么软件做?宣传海报运用的场景比较多,无论是各行各业需要做宣传,推广的时候都会用到.线上的海报,线下的海报都少不了.那么,宣传海报有哪些比较好用的案例可以直接使用吗?宣传海报用什么软件做呢? ...
AI 一键抠图助你快速打造活动宣传海报
本文介绍使用 PaddleHub 工具快速完成人像抠图. 背景我们经常看到各种大牛演讲或者活动的各种海报和宣传页,职业照造型姿势那叫一个专业.那么,学好姿势排好照片后,如何给自己做一个宣传海报呢? ...
毕业设计计算机画册怎么做,问题：我们的毕业设计是制作一个宣传画册，那怎样才算是一个好的宣传画册呢...
问题:我们的毕业设计是制作一个宣传画册,那怎样才算是一个好的宣传画册呢发表日期:2016-03-29 20:45:02 浏览:338 分享给朋友: 导语专业顾问回答:热心朋友回答:宣传画册设计基本原 ...
[css] 使用css3做一个魔方旋转的效果
[css] 使用css3做一个魔方旋转的效果总的来说,用了一些 3D 效果的样式,如 translate3d,rotate3d,perspective,transform-style: preser ...
利用css样式表做一个旋转写轮眼
利用css样式表做一个旋转写轮眼成品效果图首先分析效果图图中有红色背景圈和里面的三个椭圆和最中心的黑圈组成. 因此,我们应该写一个大的div盒子,来装这三个椭圆div,里面的三个椭圆div和圆的 ...
只用html5与CSS做一个简单的页面,HTML+CSS基础训练之做一个简单页面的布局
下面进入正题:布局是网页设计的基础中的基础,一个好的布局可以让人一目了然,一个失败的布局会让协同人员抓狂.所以前端开发,从布局开始. 首先分析一下图片的布局 ,分析各个色块之间的嵌套关系如图所示:红 ...
实战篇-制作微信小程序码宣传海报
一.制作前的说明上一篇文章讲了微信官方提供的动态生成小程序码的一些说明与注意事项. 本篇文章就带大家一起把绘制带参小程序码的宣传海报给画出来以及如何保存已经生成的小程序码,方便下次复用. 注意: 上 ...
如何免费（轻成本）在网上做推广宣传
最近有很多人在问我一个问题,如何少成本或者免费的在网上做推广宣传,这里我也总结一下,给各位一些建议和小方法,目前就以"BAT"和其他平台为例说明一下,通常来说都会以百度重技术.阿里 ...

用css和html做一个宣传海报,用css和html实现的一个forest logo

用css和html做一个宣传海报,用css和html实现的一个forest logo相关推荐

最新文章

热门文章