发现两个趣味的CSS3动漫实际效果

日期:2021-01-20 类型:科技新闻 

关键词:上线了小程序官网,年会抽奖小程序免费,做小程序,小程序网站,跑腿小程序

1、CSS3画设备猫 

哆啦A梦实际效果图:
 
能用于访问器对CSS3适用状况的检测

但近期有人对这个检测表明怀疑,指该检测应用了偏重性编码,检测的CSS编码偏重于适用Chrome,Safari等Webkit访问器。

2、纯CSS3动漫
发现1个趣味的CSS3实际效果,能够科学研究科学研究,先放到柯乐义在网上。
http://keleyi.com/keleyi/phtml/html5/6.htm
请应用适用CSS3(HTML5)的访问器浏览查询实际效果: 
适用HTML5的访问器,比如:Chrome,火狐
实际效果图:


拷贝编码
编码以下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>纯CSS3完成动漫</title>
<link rel="stylesheet" href="http://keleyi.com/keleyi/phtml/html5/6/webkit_keyframes.css" type="text/css">
<link rel="stylesheet" href="http://keleyi.com/keleyi/phtml/html5/6/moz_keyframes.css" type="text/css">
<link rel="stylesheet" href="http://keleyi.com/keleyi/phtml/html5/6/common.css" type="text/css">
<style type="text/css">
.ke-content{backgroud:none}
</style>
</head>
<body>
<div><a href="http://keleyi.com/a/bjac/nmwpqgag.htm" target="_blank">原文</a></div>
<div id="canvas">
<div class="sky">
<div class="cloud⑴"></div>
<div class="cloud⑵"></div>
<div class="cloud⑶"></div>
<div class="cloud⑷"></div>
<div class="cloud⑸"></div>
<div class="cloud⑹"></div>
<div class="cloud⑺"></div>
<div class="cloud⑻"></div>
</div>
<div class="horizon"></div>
<div class="ground">
<div class="sign-best"></div>
<div class="sign-no-js"></div>
<div class="sign-lots-of-divs"></div>
<div class="sign-all-css"></div>
</div>
<!-- skeleton and shadow -->
<div class="shadow"></div>
<div class="me">
<div class="torso">
<div class="left leg">
<div class="left thigh">
<div class="left shin">
<div class="left foot">
<div class="left toes"></div>
</div>
</div>
</div>
</div>
<!-- left leg -->
<div class="right leg">
<div class="right thigh">
<div class="right shin">
<div class="right foot">
<div class="right toes"></div>
</div>
</div>
</div>
</div>
<!-- right leg -->
<div class="left arm">
<div class="left bicep">
<div class="left forearm"></div>
</div>
</div>
<!-- left arm -->
<div class="right arm">
<div class="right bicep">
<div class="right forearm"></div>
</div>
</div>
<!-- right arm -->
</div>
<!-- torso -->
</div>
<!-- me -->
<div class="overlay"></div>
</div>
</body>
</html>