[004]-css实现蝙蝠侠

效果预览

https://codepen.io/strugglingBoy/pen/jeGJxZ

代码下载

https://github.com/enstrongbill/daily-frontend-exercise/tree/master/027-batman

代码解读

蝙蝠侠是通过一个圆形和四个三角形所形成的

1.html代码

定义了一个.batman的容器(用于画出蝙蝠侠的脸)，两个耳朵是通过伪元素实现的

<div class="batman"><div class="eyes"></div>
</div>

2.css代码

蝙蝠侠头部的制作（利用border-radius）

.batman {background: #000;width: 50vw;height: 50vw;border-radius: 50%;position: absolute;bottom: 0;left: 50%;transform: translate(-50%, 50%);transition: transform 100ms ease-out;
}

蝙蝠侠耳朵的制作（利用border来制作）

.batman::before {content: "";width: 0;height: 0;position: absolute;transform: translate(1%, -25%);border-left: 2vw solid transparent;border-right: 20vw solid transparent;border-bottom: 30vw solid #000;
}

蝙蝠侠眼睛的制作（同样利用border来制作）

.eyes::before {content: "";position: absolute;top: 61%;left: 50%;width: 0;height: 0;transform: rotate(-37deg) translate(46%, 0%);border-style: solid;border-width: 5vw 0 0 12vw;border-color: transparent transparent transparent #cecece;
}

蝙蝠侠过度动画的制作

.batman:hover {transform: translate(-50%, 25%);
}

最后大功告成

[004]-css实现蝙蝠侠相关推荐

蝙蝠侠遥控器pcb_通过蝙蝠侠从Circle到ML：第二部分
蝙蝠侠遥控器pcb View Graph 查看图背景 (Background) Wait! Isn't the above equation different from what we found ...
1.3 xss原理分析与剖析(4)
0×01 URL编码 URL只允许用US-ASCII字符集中可打印的字符(0×20-0x7x),其中某些字符在HTTP协议里有特殊的意义,所以有些也不能使用.这里有个需要注意的,+加号代表URL编码的 ...
web开发常见问题和解决方法
一检查是否为首页 <HTML XMLNS:IE> <HEAD> <STYLE> @media all { IE/:HOMEPAGE {behavior:url( ...
整理的一些建站中常见的问题与解决代码
一检查是否为首页 <HTML XMLNS:IE> <HEAD> <STYLE> @media all { IE/:HOMEPAGE {behavior:url ...
webpack打包样式资源_使用loader去打包css文件_打包less文件---webpack工作笔记004
然后我们再来看看,怎么用webpack打包css资源文件, 因为我们知道webpack可以直接处理js,json文件,但是不能直接处理css文件,img文件对吧.. 我们现在,通过webpack的组件 ...
「HTML+CSS」--自定义按钮样式【004】
前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈自我介绍一下昵称:海轰标签:程序猿一只|C++选手|学生简介:因C语言结识编程,随后转入计算机 ...
js动态给当前点击元素添加css类
1.页面: 2.html代码: <div class="project-all"><template v-for='(index,project) in proj ...
HTML期末作业-旅游网页作业Html+css+Bootstarp
HTML期末作业-旅游网页作业Html+css+JavaScript+Bootstarp,共有8个页面部分网页截图网页源码 <!DOCTYPE html> <html lang= ...
蝙蝠侠一键改udid软件_对于您的第一个HTML代码，让我们帮助蝙蝠侠写一封情书...
蝙蝠侠一键改udid软件 by Kunal 由Kunal 对于您的第一个HTML代码,让我们帮助蝙蝠侠写一封情书 (For your first HTML code, let's help Batma ...

[004]-css实现蝙蝠侠

效果预览

https://codepen.io/strugglingBoy/pen/jeGJxZ

代码下载

https://github.com/enstrongbill/daily-frontend-exercise/tree/master/027-batman

代码解读

1.html代码

2.css代码

[004]-css实现蝙蝠侠相关推荐

最新文章

热门文章