logo自动旋转 html,HTML/CSS3 Logo选择器
CSS
语言:
CSSSCSS
确定
@import "https://fonts.googleapis.com/css?family=Product+Sans";
@import "https://fonts.googleapis.com/css?family=Lato:400,700";
@import "https://fonts.googleapis.com/css?family=Nunito:400,700";
body {
background: #eee;
font-family: Lato, sans-serif;
}
.holder {
width: 200px;
height: 250px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
select {
height: 30px;
margin-top: 20px;
line-height: 30px;
width: 200px;
border: 0;
text-transform: capitalize;
outline: 0;
color: #666;
background: transparent;
border-bottom: solid 4px #ddd;
}
.logos {
width: 200px;
height: 200px;
}
.logos .logo {
position: absolute;
display: none;
text-align: center;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
}
.logos .logo:first-of-type {
display: block;
}
#pepsi {
width: 180px;
height: 180px;
background: #004883;
margin: 5px 0 0 5px;
border-radius: 50%;
box-shadow: 0 0 0 2px #004883;
border: 5px solid #fff;
overflow: hidden;
}
#pepsi .inner {
width: 170px;
height: 170px;
border-radius: 50%;
margin: 5px 0 0 5px;
}
#pepsi .inner .white {
width: 300px;
height: 300px;
background: #fff;
border-radius: 25%;
-webkit-transform: translate(-50%, -55%) rotate(-10deg);
transform: translate(-50%, -55%) rotate(-10deg);
}
#pepsi .inner .red {
background: red;
width: 400px;
height: 400px;
border-radius: 50%;
-webkit-transform: translate(-60%, -141%);
transform: translate(-60%, -141%);
}
#dell {
width: 180px;
height: 180px;
border: 10px solid #0083ca;
border-radius: 50%;
}
#dell p {
font-family: Impact;
text-transform: uppercase;
display: inline-block;
font-size: 75px;
color: #0083ca;
margin-top: 46px;
-webkit-transform: scaleX(1.2) scaleY(0.8);
transform: scaleX(1.2) scaleY(0.8);
}
#dell p.e {
-webkit-transform: rotate(-45deg) scaleX(2) translateY(-5px);
transform: rotate(-45deg) scaleX(2) translateY(-5px);
font-size: 60px;
margin: 0 2px 0 8px;
}
#google p {
display: inline-block;
font-family: 'Product Sans', Arial, sans-serif;
font-size: 60px;
margin: 70px -2px;
}
#google p.g {
color: #4c90fb;
}
#google p.e {
color: #ef4c3b;
}
#google p.o {
color: #fec303;
}
#google p.l {
color: #3bb15d;
}
#dominos {
width: 180px;
height: 180px;
margin: 10px 0 0 10px;
-webkit-transform: rotate(-45deg) scale(0.8);
transform: rotate(-45deg) scale(0.8);
}
#dominos .d1,
#dominos .d2 {
display: inline-block;
width: 88px;
height: 88px;
background: #d42c2f;
border-radius: 7px;
}
#dominos .d1:before,
#dominos .d1:after,
#dominos .d2:after {
position: absolute;
content: '';
background: #fff;
display: block;
width: 30px;
height: 30px;
border-radius: 50%;
margin: 29px;
}
#dominos .d1:before {
margin: 16px;
}
#dominos .d1:after {
margin: 42px;
}
#dominos .blue {
width: 180px;
height: 88px;
background: #005480;
border-radius: 7px;
font-family: Nunito, sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 35px;
color: #fff;
}
#dominos .blue p {
margin: 0;
text-align: left;
text-indent: 15px;
}
#dominos .blue p:first-of-type {
border-top: 7px solid transparent;
}
logo自动旋转 html,HTML/CSS3 Logo选择器相关推荐
- logo自动旋转 html,CSS3创作有意思的旋转LOGO
CSS3创作有意思的旋转LOGO Sponsor 在网页设计个哪里都能发挥创意,包括LOGO也是哦,前几天看到个tumblr的博客(staff.tumblr.com/)设计,觉得这个博客的logo挺有 ...
- html css动画自动旋转,HTML5 - 用CSS3动画制作场景切换效果(移动,旋转,淡入淡出等)...
代码如下: HTML5-页面切换动画 #viewsWrapper { top:0px; left:0px; width:300px; height:200px; position:relative; ...
- css3怎么设置logo,纯CSS3实现的LOGO标志 ABN AMRO CSS3 logo
纯CSS3实现的LOGO标志 ABN AMRO CSS3 logo demo by js.alixixi.com #abnamro .canvas { background-color: #f2f2f ...
- html如何图片立体自动旋转,css3如何让图片不停旋转?
本篇文章将要给大家详细介绍如何使用css3让图片实现不停旋转的效果,我们在进行网页页面设计时,经常会遇到各种关于图片展示的问题,比如有的需要让图片圆角展示.图片点击放大展示等等效果. 下面主要就给大家 ...
- 网站在百度站长平台无上传站点LOGO权限下,如何实现LOGO图片在百度索引中自动抓取展现?
最近美萌那边的大妹子找到我们部门要求解决网站LOGO显示错误的问题.领导将这个问题指派到我这里.我一看这个LOGO图片应该是百度自动抓取首页的一张图,该如何解决这个问题呢? 百度搜索引擎对于网站LOG ...
- html css动画自动旋转,不炫技,SVG+CSS3 旋转动画属性就能实现的梦幻效果
CSS3的动画相关的基础的属性基本都涉猎过了,个人认为,其中最复杂的是d:path()路径变形动画,超过3D,而位移.轨迹.旋转.缩放.斜切什么的,相对简单一些,但作为非动画设计师而言,灵活的掌握这些 ...
- 【04】HTML5+CSS3:01-HTML5新增标签、多媒体标签、input标签、新增表单属性、CSS3属性选择器、伪元素选择器、2D转换
文章目录 HTML5 第一天 一.什么是 `HTML5` 二.`HTML5 ` 新增标签 三.多媒体音频标签 四.多媒体视频标签 五.新增 input 标签 六.新增表单属性 七.`CSS3 ` 属性 ...
- 用数学方式打开Facebook新Logo,真的和视频号Logo来自同一方程
梦晨 发自 凹非寺 量子位 报道 | 公众号 QbitAI Facebook改名Meta,也换了新Logo. 国内网友吐槽这Logo长得太像微信视频号,外国网友则直接上手P图来了场恶搞的狂欢. 热度来 ...
- Logo Grabber 一键快速下载网站Logo 的免费插件
很多小伙伴找网站或Logo 时,绝大多数人应该都是通过百度或者搜狗图片,现在有个更便捷的方式,最近国外就有开发者开发出Logo Grabber 这个工具,支持Chrome.FireFox浏览器,进入品 ...
最新文章
- 对部门的建议和期待怎么写_教学反思到底该怎么写?这些要点一个都不能少(建议收藏)...
- Oracle使用触发器和mysql中使用触发器的比较
- 监控服务器怎么增加碟机,微服务业务监控方法及服务器专利_专利申请于2017-12-15_专利查询 - 天眼查...
- boost::hana::is_convertible用法的测试程序
- jQuery 基础教程 (一)之jQuery的由来及简介
- 值得推荐的威胁情报平台
- VMware vSAN性能测试那点后续的事
- [译]为什么Vue不支持templateURL
- c语言const 修饰二级指针,C++中const修饰二级指针(从类型‘int**’到类型‘const int**’的转换无效)...
- indesign入门教程,如何添加文字?
- 2016年CIO要掌握五大新思维
- eclipse linux 中文,Eclipse (简体中文)
- 用python批量下载网易云音乐_python实现网易云音乐批量下载
- 传奇服务器端地图链接在哪个文件夹,传奇客户端有新地图,怎样在服务端设置链接?让玩家进去?...
- Python基础 -- 注释、变量以及数据类型、标识符和关键字、类型转、运算符
- Java 基础学习笔记
- elasticsearch 使用
- 蓝桥杯攻略大全 | 学习路线 | 注意事项
- TypeScript 从零实现 axios 0x0
- ios设备备份,更新路径(mac os)
热门文章
- SAP Cloud for Customer 2102版本如何使用Key User Tool创建扩展字段 - extension field
- 如何把一个PDF文件内的部分页码对应的内容导出成一个新的PDF文件
- 如何安装 SAP Commerce Cloud,以便让 SAP Spartacus 使用
- SAP官方帮助网站,help.sap.com 背后那些事儿
- SAP Spartacus B2B List里的listData$设计原理
- SAP Spartacus 服务器端渲染找不到 index 视图的问题
- Angular Shadow Root DOM的一些API
- SAP Cloud for Customer里Lead和LeanLead两个相似的BO
- Hybris Commerce里和Tomcat相关的一些配置信息
- CRM attachment read old API debug