利用CSS3来绘制宝马BMW的logo

最新推荐文章于 2022-01-20 15:36:35 发布
最新推荐文章于 2022-01-20 15:36:35 发布
阅读量1.6k 收藏
点赞数
分类专栏： CSS3 文章标签： CSS3 
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">

</script>
    <style type="text/css">
        .wrapper {
            width:365px;
            height:365px;
            background: -webkit-gradient(linear, 0 0, 100% 100%, from(#f3f3f3), to(#f3f3f3));
            background:-moz-linear-gradient(0 0 0deg,#f3f3f3 0%,#b0b1b5 50%,#f3f3f3 100%);
            border-radius:365px;
            border:1px solid #d3d3d3;
        }
        .wrapper .wrapper1 {
            position:relative;
            border:1px solid #0f0f0f;
            width:351px;
            height:351px;
            margin-top:7px;
            margin-left:7px;
            border-radius:351px;
            background: -webkit-gradient(linear, 0 0, 50% 100%, from(#aaa), to(#000));
            background:-moz-linear-gradient(0 0 -60deg,#aaa 0%, #000 100%);
            box-shadow: #000 0px 0px 1px;
        }
        .wrapper .wrapper1 .text {
            color:#fbfbfb;
            font-size:72px;
            font-weight:bold;
            text-shadow:#000 0px 3px 4px;
            position:absolute;
            font-family:Arial, Helvetica, sans-serif;
        }
        .wrapper .wrapper1 .text.B {
            left: 38px;
            top: 42px;
            -webkit-transform: rotate(-54deg) scale(1);
            /*-moz-transform: rotate | scale | skew | translate ;
            -webkit-transform: rotate | scale | skew | translate ;
            -o-transform: rotate | scale | skew | translate ;
            -ms-transform: rotate | scale | skew | translate ;
            transform: rotate | scale | skew | translate ;
            */
            -webkit-transform: rotate(-54deg) scaleX(1.5);
            -o-transform: rotate(-54deg) scaleX(1.5);
            -ms-transform: rotate(-54deg) scaleX(1.5);
            transform: rotate(-54deg) scaleX(1.5);
        }
        .wrapper .wrapper1 .text.M {
            left: 148px;
            top: -10px;
            -webkit-transform:scaleX(1.3);
            -o-transform:scaleX(1.3);
            -ms-transform:scaleX(1.3);
            transform:scaleX(1.3);
        }
        .wrapper .wrapper1 .text.W {
            right: 32px;
            top: 42px;
            -webkit-transform: rotate(51deg) scaleX(1.1);
            -o-transform: rotate(51deg) scaleX(1.1);
            -ms-transform: rotate(51deg) scaleX(1.1);
            transform: rotate(51deg) scaleX(1.1);
        }
        .wrapper .wrapper1 .wrapper2 {
            position:relative;
            width:217px;
            height:217px;
            margin-top:62.5px;
            margin-left:62.5px;
            background: -webkit-gradient(linear, 100% 100%, 0 0, from(#fff), to(#818181));
            background:-moz-linear-gradient(0 0 90deg,#fff 100%, #818181 0%);
            border:4px solid #000;
            border-radius:217px;
            box-shadow: #000 0px 0px 5px;
        }
        .wrapper .wrapper1 .wrapper2 .arc1 {
            position:absolute;
            width:100px;
            height:100px;
            background: -webkit-gradient(linear, 0 0, 100% 100%, from(#bee5ea), to(#2ba4eb));
            background:-moz-linear-gradient(0 0 0deg,#bee5ea 0%, #2ba4eb 100%);
            border-radius:200px 0 0 0;
            border-right:1px solid #1a91c9;
            border-bottom:1px solid #1a91c9;
            border-left:1px solid #d0eaeb;
            border-top:1px solid #ffffff;
            box-shadow:#015486 2px 2px 1px;
            top:3px;
            left:4px;
        }
        .wrapper .wrapper1 .wrapper2 .arc2 {
            position:absolute;
            width:100px;
            height:100px;
            background: -webkit-gradient(linear, 0 0, 100% 100%, from(#e8e8e8), to(#f5f5f5));
            background:-moz-linear-gradient(0 0 0deg,#e8e8e8 0%, #f5f5f5 100%);
            border-radius:0 0 0 200px;
            border-top:1px solid #d1ded7;
            border-right:1px solid #55595c;
            border-bottom:1px solid #55565a;
            box-shadow:#282b30 1px 1px 1px;
            bottom:4px;
            left:5px;
        }
        .wrapper .wrapper1 .wrapper2 .arc3 {
            position:absolute;
            width:100px;
            height:100px;
            background: -webkit-gradient(linear, 0 0, 100% 100%, from(#44c2e8), to(#0e5c9c));
            background:-moz-linear-gradient(0 0 0deg,#44c2e8 0%, #0e5c9c 100%);
            border-radius:0 0 200px 0;
            border-left:1px solid #c4eefe;
            border-top:1px solid #c4eefe;
            border-right:1px solid #00284b;
            border-bottom:1px solid #00284b;
            box-shadow:#015486 1px 1px 2px;
            bottom:4px;
            right:4px;
        }
        .wrapper .wrapper1 .wrapper2 .arc4 {
            position:absolute;
            width:100px;
            height:100px;
            background: -webkit-gradient(linear, 0 100%, 100% 0, from(#e8e8e8), to(#f5f5f5));
            background:-moz-linear-gradient(0 0 0deg,#e8e8e8 0%, #f5f5f5 100%);
            border-radius:0 200px 0 0;
            border-left:1px solid #fffffd;
            border-right:1px solid #55595c;
            border-bottom:1px solid #55565a;
            box-shadow:#282b30 1px 2px 1px;
            top:5px;
            right:4px;
        }

    </style>
</head>

<body>
<div class="wrapper">
    <div class="wrapper1">
        <span class="text B">B</span>
        <span class="text M">M</span>
        <span class="text W">W</span>
        <div class="wrapper2">
            <div class="arc1"></div>
            <div class="arc2"></div>
            <div class="arc3"></div>
            <div class="arc4"></div>
        </div>
    </div>
</div>

</body>
</html>

hu-flyyafly
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
制作宝马车标
kagamikohaku的博客
06-28 2128
今天我们来学习用AI来制作我们熟悉的宝马汽车的车标 1.先用椭圆工具来绘制一个黑色的圆,黑色圆外部加上灰色的描边,也不用太大参数值为6就可以了.如图: 2.然后在这黑色的圆里面在做一个蓝色的小圆,外部加上白色的描边,基本图案模型就完成啦.如图: 3.在圆的顶部、中间、还有底部都加上参考线,好利于后面的操作.如图: 4.在圆的右上角和左下角加上一个正方形,然后用它们来减去顶层如图: 先选一个正方形设为顶层然后键盘按住SHIFT键和鼠标左键点击里面蓝色的圆,最后在路径查找器里点减去顶层如图:
CSS3 绘制BMW logo实的现代码
09-25
在本示例中，我们将探讨如何使用CSS3技术来绘制宝马(BMW)的标志。CSS3是一种强大的样式表语言，允许开发人员创建丰富的图形和布局，而无需依赖图像。在这个项目中，我们主要利用了CSS3的渐变、边框半径、旋转和缩放...
py画图_宝马车标
m0_46625346的博客
09-30 1682
from turtle import * from random import * speed(0) pensize(10) for i in range(360): if i>=0 and i<=90 or i>=180 and i<=270: color('blue') else: color('white') left(1) fd(100) backward(100) input()
绘制宝马的标志
xiaoxin888888的专栏
09-21 2920
绘制宝马的标志的关键函数：//drawSector  public static function  drawSector(graphics:Graphics, x:Number, y:Number, r:Number, R:Number, angle:Number, startA:Number,color:uint=0x000000,alpha:Number=1):void  {   graphics.clear();   graphics.lineStyle(1, color, alpha, true)
Python Turtle 小项目 10
leleprogrammer的博客
01-20 1780
我们继续使用Turtle进行绘图，本次，我们要绘制的图案有以下四个： 由于绘制这些图案过于简单，本次项目文章不做详细讲解，turtle常用方法见下面这篇文章： Python Turtle 新手入门必看 常用方法_leleprogrammer的博客-CSDN博客Turtle模块常用方法详细教学，初学者必看文章之一https://blog.csdn.net/leleprogrammer/article/details/122154107 一、奥运五环 代码： from turtle imp.
python运用turtle绘制大众车标
LuckyXY5的博客
11-13 2385
Turtle库是Python语言中一个很流行的绘制图像的函数库；turtle名称含义为“海龟”，我们想象一只海龟，位于显示器上窗体的正中心，在画布上游走，它游走的轨迹就形成了绘制的图形。通过组合使用此类命令，可以轻松地绘制出精美的形状和图案。 画笔控制函数 1.turtle.penup() #提起笔移动，不绘制图形，用于另起一个地方绘制 2.turtle.pendown() #移动时绘制图形，缺省时也为绘制 3.t...
css3简单练习实现遨游浏览器logo的绘制
09-25
在本文中，我们将探讨如何使用CSS3来实现遨游浏览器的logo绘制。这个练习旨在巩固和提升CSS3的知识，对于想要深入了解CSS3特性和技巧的读者来说非常有价值。我们将详细分析给出的代码，了解每个部分的作用以及它们...
css3绘制天猫logo实现代码
09-25
结合以上知识点，我们可以得知，文档中虽然没有提供完整的代码，但主要内容是介绍如何使用CSS3来实现天猫logo的视觉效果。这包括了CSS3的多个新特性，如盒子模型、渐变、边框圆角、阴影、以及过渡和动画等。需要注意...
纯CSS3绘制中国联通logo图标样式.zip
07-11
实现效果： ... 纯CSS3绘制中国联通logo图标样式，通过css3的属性来制作中国联通的logo，还有动画的效果，非常适合企业网站或者电商网站中的logo设计，让网站变的更加美观、酷炫。php中文网推荐下载！
使用CSS3代码绘制可爱的Hello Kitty猫
09-27
- 利用CSS3的边框属性（如`border-radius`）和宽度/高度，我们可以创建不同形状来代表Hello Kitty的各个特征。例如，使用圆角边框可以制作出猫的脸蛋和耳朵的圆润外观。 4. **渐变与背景色**： - CSS3支持线性...
js canvas制作宝马bmw图标画图代码
11-06
js canvas制作宝马bmw图标画图代码 js canvas制作宝马bmw图标画图代码
用Python画一个LinkinPark的logo代码实例
09-18
主要介绍了用Python画一个LinkinPark的logo代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Python练习02——turtle基础练习
weixin_55187886的博客
03-18 1145
分别编写程序 画布大小setup(600,600)，画出以下图形 1.画3个同心圆，用3种颜色 # 画三个同心圆 # 设置 setup(600,600) pensize(5) speed(5) pencolor("indigo") # 靛青 # 画第三个圆 fillcolor("pink") begin_fill() penup() goto(300,0) pendown() setheading(90) circle(300) end_fill() pencolor("violet") # 画第二个圆
css3制作的宝马logo
IT小白
05-04 1593
.wrapper { width:365px; height:365px; background: -webkit-gradient(linear, 0 0, 100% 100%, from(#f3f3f3), to(#f3f3f3)); background:-moz-linear-gradient(0 0 0deg,#f3f3f3 0%,#b0b1b5 50%,#f3f3f3 100%); b
巧用CSS实现宝马LOGO
weixin_34301307的博客
10-16 224
　　某天突然遇到一个有趣的面试题，需用CSS实现一个宝马的Logo,第一反应就是这不是老生常谈的八卦图的小变形吗，只需用伪元素就可轻易的实现啦，但是细看要求说只能在一个标签里写样式，所以呜呜呜。。。请教下大神，还是有多种方法的，下面简单分享一下哈！ 实现如下效果： 第一种：利用伪元素实现 #box{ width: 100px; height: 100px; ...
【Python3笔记】三、Python第一程序画出奥迪车标
hxiaowang的博客
06-28 8205
编程 # -*- coding: utf-8 -*- import turtle def Audilogo(): turtle.width(5) #笔的宽度 turtle.color("blue") #笔的颜色 turtle.penup() #抬笔 turtle.goto(-60,0) #将笔拿到这个坐标 turtle.pendown() #下笔 turtle.circle(50) #画圆 turtle.color("blue") .
python面试题_必读！53个Python经典面试题详解
weixin_39565300的博客
11-14 547
作者 |Chris翻译|苏本如，编辑| 夕颜题图| 视觉中国出品| AI科技大本营(ID:rgznai100)本文列出53个Python面试问题，并且提供了答案，供数科学家和软件工程师们参考。 不久前，我作为“数据科学家”开始担任一个新的角色，实际上就是一位“Python工程师”。如果我在面试前提前了解一下Python的线程生命周期，而不是它的Rec...
用python画奔驰的标志_如何在CATIA中快速画一个奔驰车标
weixin_39904809的博客
12-21 2082
原标题：如何在CATIA中快速画一个奔驰车标咱们这个公众号呀，总是发一些二次开发啊，代码啊什么的，这观众看的啊，是云里雾里的！哎，内位说了：您能不能讲点儿我们听的懂的内容啊？那好，今儿咱们就来说说，怎么能在CATIA里快速画个奔驰的车标！ 我们来观察一下上面的车标，其本身形状并不复杂，如果说快速建模，可能问题主要会处在中间的三个指针上。所以，我选择先画外面的圈儿↓ 然后画出中间三个指针之一(注意在...
python爬虫爬取车标网所有车标Logo
秋楓的博客
01-15 1820
1.依赖 requests、BeautifulSoup、lxml 2.代码 爬取网址：http://www.chebiao.com.cn/chebiao/ import requests from bs4 import BeautifulSoup list = ['A', 'B', 'C', 'D', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', '...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值