忍术！猫眼三勾玉

最新推荐文章于 2021-08-06 10:48:04 发布
最新推荐文章于 2021-08-06 10:48:04 发布
阅读量1.7k 收藏 3
点赞数 31
分类专栏： CSS 文章标签： css css3 css动画 animation
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45820444/article/details/108660333
版权

 如果你觉得我的代码还算有趣，在你的学习中能有所帮助，请查看我的置顶文章，我由衷感谢！

 前端的学习不是一蹴而就，不积跬步无以至千里，不积小流无以成江海。持续不断的努力才能让你我有所收获。

效果图：
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
小眼睛一左一右固定在屏幕上，可调整屏幕宽度以控制二者间距。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯CSS3实现眨眼动画DEMO演示</title>
</head>
<style>
	@charset "utf-8";
	/* CSS Document */
	*{margin:0;padding:0;}
	/*.container{ width:800px; height:200px; margin:30px auto;overflow:hidden; background:#000; position:relative;}*/
	.eyesBoxs{width:130px;height:70px;position:absolute;top:50px;}
	.pullLeft{left:100px;}
	.pullRight{right:100px;}
	.profile{
		width:130px;
		height:70px;
		background:#fff;
		position:absolute;
		top:0;
		left:0;
		overflow:hidden;
		border-radius:0 70px 0 50px;
	}
	.shadow{
		display:block;
		width:130px;
		height:70px;
		position:absolute;
		top:0;
		z-index:5;
		border-radius:0 90px 0 60px;
		box-shadow:5px 12px 2px 5px rgba(0,0,0,.25) inset;
	}
	.skewLeft{
		transform:skewX(15deg);
		-webkit-transform:skewX(15deg);
		-o-transform:skewX(15deg);
	}
	.skewRight{
		transform:skewX(-15deg) scale(-1,1);
		-webkit-transform:skewX(-15deg) scale(-1,1);
		-o-transform:skewX(-15deg) scale(-1,1);
	}
	.basic{
		width:60px;
		height:60px;
		background:#000;
		position:absolute;
		top:50%;
		left:50%;
		z-index:10;
		margin-top:-30px;
		border-radius:60%;
	}
	.basic:before{
		content:"";
		display:block;
		width:10px;
		height:11px;
		position:absolute;
		left:15px;
		top:15px;
		z-index:100;
		border-radius:60%;
		background-image:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,225,0.3));
		-webkit-background-image:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,225,0.3));
		-o-background-image:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,225,0.3));
	}
	.pullLeft .basic{
		margin-left:-33px;
	}
	.pullRight .basic{
		margin-left:-27px;
	}
	.eyes{
		width:55px;
		height:55px;
		background:#ff0000;
		position:absolute;
		top:8px;
		border-radius:60%;
		box-shadow:0 0 2px 4px #bd0000 inset,0 0 0 2px #000;
	}
	.pullLeft .eyes{left:35px;}
	.pullRight .eyes{right:35px;}
	.eyes .line{
		width:64%;
		height:64%;
		background:#ff0000;
		position:absolute;
		right:0;
		left:0;
		top:10px;
		margin:0 auto;
		border-radius:60%;
		box-shadow:0 0 2px 0 #b20000 inset;
	}
	.eyes .line:before{
		content:"";
		display:block;
		width:10px;
		height:11px;
		position:absolute;
		left:3px;
		top:4px;
		z-index:100;
		border-radius:60%;
		background-image:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7),rgba(225,225,225,0.3));
		-webkit-background-image:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7),rgba(225,225,225,0.3));
		-o-background-image:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7),rgba(225,225,225,0.3));
	}
	.eyes .line:after{
		content:"";
		display:block;
		width:10px;
		height:10px;
		position:absolute;
		background:#000;
		right:0;
		left:-1px;
		top:13px;
		z-index:100;
		margin:0 auto;
		border-radius:60%;
		transform:rotate(150deg);
		-webkit-transform:rotate(150deg);
		-o-transform:rotate(150deg);
		animation:colour 0.5s ease-in 6s;
		-webkit-animation:colour 0.5s ease-in 6s;
		-o-animation:colour 0.5s ease-in 6s;
	}
	@keyframes colour{
		0%{
			background:#000;
		}
		100%{
			background:#f00;
		}
	}
	@-webkit-keyframes colour{
		0%{
			background:#000;
		}
		100%{
			background:#f00;
		}
	}
	@-o-keyframes colour{
		0%{
			background:#000;
		}
		100%{
			background:#f00;
		}
	}
	/*******三勾玉 开始*******/
	.hook{
		width:92%;
		height:92%;
		position:absolute;
		right:0;
		left:0;
		top:5%;
		margin:0 auto;
		border-radius:60%;
	}
	.hook .bar{
		display:block;
		width:100%;
		height:100%;
		position:absolute;
		left:0;
		top:0;
		border-radius:60%;
	}
	.hook .bar b{
		display:block;
		width:8px;
		height:8px;
		background:#000;
		position:absolute;
		left:0;
		bottom:0;
		border-radius:60%;
	}
	.hook .bar b:after{
		content:"";
		width:8px;
		height:8px;
		border-color:transparent transparent #000 transparent;
		border-style:solid;
		border-width:0 0 5px 0;
		position:absolute;
		top:-1px;
		left:-3px;
		z-index:100;
		border-radius:0 0 0 70%;
		transform:rotate(-75deg);
		-webkit-transform:rotate(-75deg);
		-o-transform:rotate(-75deg);
	}
	.hook .bar:nth-child(1){
		transform:rotate(10deg);
		-webkit-transform:rotate(10deg);
		-o-transform:rotate(10deg);
	}
	.hook .bar:nth-child(2){
		transform:rotate(130deg);
		-webkit-transform:rotate(130deg);
		-o-transform:rotate(130deg);
	}
	.hook .bar:nth-child(3){
		transform:rotate(250deg);
		-webkit-transform:rotate(250deg);
		-o-transform:rotate(250deg);
	}
	/*******三勾玉 结束*******/
	/*******万花筒 开始*******/
	.tube{
		width:93%;
		height:93%;
		position:absolute;
		right:0;
		left:0px;
		top:2px;
		margin:0 auto;
		background:#000;
		border-radius:60%;
	}
	.tube .bar{
		display:block;
		width:10px;
		height:20px;
		border-style:solid;
		border-width:0 0 0 10px;
		border-color:transparent transparent transparent black;
		position:absolute;
		border-radius:100% 0 0 0;
	}
	.tube .bar:nth-child(1){
		top:-10px;
		left:2px;
		transform:rotate(-10deg);
	}
	.tube .bar:nth-child(2){
		bottom:0px;
		right:-10px;
		transform:rotate(105deg);
		-webkit-transform:rotate(105deg);
		-o-transform:rotate(105deg);
	}
	.tube .bar:nth-child(3){
		bottom:-3px;
		left:-10px;
		transform:rotate(235deg);
		-webkit-transform:rotate(235deg);
		-o-transform:rotate(235deg);
	}
	/*******万花筒 结束*******/
	/*******轮回眼 开始*******/
	.trans{
		width:130px;
		height:70px;
		position:absolute;
		overflow:hidden;
		top:0;
		left:0;
		border-radius:0 70px 0 50px;
	}
	.trans .bar{
		display:block;
		width:9px;
		height:9px;
		background:#000;
		position:absolute;
		top:50%;
		z-index:2;
		margin:-4px 0 0 -4px;
		border-radius:60%;
	}
	.trans .bar:after{	
		content:"";
		display:block;
		width:11px;
		height:12px;
		position:absolute;
		top:-13px;
		left:-13px;
		z-index:100;
		border-radius:60%;
		background:rgba(250,250,250,.85);
	}
	.pullLeft .trans .bar{
		transform:skewX(-15deg);
		-webkit-transform:skewX(-15deg);
		-o-transform:skewX(-15deg);
	}
	.pullLeft .trans .bar{left:48%;}
	.pullRight .trans .bar{
		transform:skewX(-15deg) scale(-1,1);
		-webkit-transform:skewX(-15deg) scale(-1,1);
		-o-transform:skewX(-15deg) scale(-1,1);
	}
	.pullRight .trans .bar{right:48%;}
	/*******轮回眼 结束*******/
	.ani-narrow{			/*基本眼*/
		animation:ani-narrow 0.5s linear 1s;
		-webkit-animation:ani-narrow 0.5s linear 1s;
		-o-animation:ani-narrow 0.5s linear 1s;
	}
	@keyframes ani-narrow{
		from{
			transform:scale(1);
		}
		to{
			opacity:0;
			transform:scale(0);
		}
	}
	@-webkit-keyframes ani-narrow{
		from{
			-webkit-transform:scale(1);
		}
		to{
			opacity:0;
			-webkit-transform:scale(0);
		}
	}
	@-o-keyframes ani-narrow{
		from{
			-o-transform:scale(1);
		}
		to{
			opacity:0;
			-o-transform:scale(0);
		}
	}
	.ani-zoom{				/*红色眼*/
		animation:ani-zoom 11s linear 0.8s;
		-webkit-animation:ani-zoom 11s linear 0.8s;
		-o-animation:ani-zoom 11s linear 0.8s;
	}
	@keyframes ani-zoom{
		0%{
			opacity:0;
			transform:scale(0);
		}
		6%{
			opacity:1;
			transform:scale(1);
		}
		95%{
			opacity:1;
			transform:scale(1);
		}
		100%{
			opacity:0;
			transform:scale(1.5);
		}
	}
	@-webkit-keyframes ani-zoom{
		0%{
			opacity:0;
			-webkit-transform:scale(0);
		}
		6%{
			opacity:1;
			-webkit-transform:scale(1);
		}
		95%{
			opacity:1;
			-webkit-transform:scale(1);
		}
		100%{
			opacity:0;
			-webkit-transform:scale(1.5);
		}
	}
	@-o-keyframes ani-zoom{
		0%{
			opacity:0;
			-o-transform:scale(0);
		}
		6%{
			opacity:1;
			-o-transform:scale(1);
		}
		95%{
			opacity:1;
			-o-transform:scale(1);
		}
		100%{
			opacity:0;
			-o-transform:scale(1.5);
		}
	}
	.ani-rotateHook{			/*三勾玉*/
		animation:ani-rotateHook 5s ease-in 1.5s;
		-webkit-animation:ani-rotateHook 5s ease-in 1.5s;
		-o-animation:ani-rotateHook 5s ease-in 1.5s;
	}
	@keyframes ani-rotateHook{
		0%{
			opacity:0;
			transform:scale(0) rotate(0);
		}
		90%{
			opacity:1;
			transform:scale(1) rotate(-3240deg);
		}
		100%{
			opacity:0;
			transform:scale(1.4) rotate(-540deg);
		}
	}
	@-webkit-keyframes ani-rotateHook{
		0%{
			opacity:0;
			-webkit-transform:scale(0) rotate(0);
		}
		90%{
			opacity:1;
			-webkit-transform:scale(1) rotate(-3240deg);
		}
		100%{
			opacity:0;
			-webkit-transform:scale(1.4) rotate(-540deg);
		}
	}
	@-o-keyframes ani-rotateHook{
		0%{
			opacity:0;
			-o-transform:scale(0) rotate(0);
		}
		90%{
			opacity:1;
			-o-transform:scale(1) rotate(-3240deg);
		}
		100%{
			opacity:0;
			-o-transform:scale(1.4) rotate(-540deg);
		}
	}
	.ani-rotateTube{			/*万花筒*/
		animation:ani-rotateTube 5s ease-in-out 5.5s;
		-webkit-animation:ani-rotateTube 5s ease-in-out 5.5s;
		-o-animation:ani-rotateTube 5s ease-in-out 5.5s;
	}
	@keyframes ani-rotateTube{
		0%{
			opacity:0;
			transform:scale(0) rotate(0);
		}
		30%{
			opacity:1;
			transform:scale(1) rotate(-360deg);
		}
		100%{
			opacity:1;
			transform:scale(1) rotate(-360deg);
		}
	}
	@-webkit-keyframes ani-rotateTube{
		0%{
			opacity:0;
			-webkit-transform:scale(0) rotate(0);
		}
		30%{
			opacity:1;
			-webkit-transform:scale(1) rotate(-360deg);
		}
		100%{
			opacity:1;
			-webkit-transform:scale(1) rotate(-360deg);
		}
	}
	@-o-keyframes ani-rotateTube{
		0%{
			opacity:0;
			-o-transform:scale(0) rotate(0);
		}
		30%{
			opacity:1;
			-o-transform:scale(1) rotate(-360deg);
		}
		100%{
			opacity:1;
			-o-transform:scale(1) rotate(-360deg);
		}
	}
	.ani-shadow{			/*轮回眼*/
		animation:ani-shadow 1s forwards 10s;
		-webkit-animation:ani-shadow 1s forwards 10s;
		-o-animation:ani-shadow 1s forwards 10s;
	}
	@keyframes ani-shadow{
		0%{
			opacity:0;
			box-shadow:none;
		}
		100%{
			opacity:1;
			box-shadow:0 0 0 14px #464646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000;
		}
	}
	@-webkit-keyframes ani-shadow{
		0%{
			opacity:0;
			box-shadow:none;
		}
		100%{
			opacity:1;
			box-shadow:0 0 0 14px #464646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000;
		}
	}
	@-o-keyframes ani-shadow{
		0%{
			opacity:0;
			box-shadow:none;
		}
		100%{
			opacity:1;
			box-shadow:0 0 0 14px #464646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000;
		}
	}
	.ani-narrow,
	.ani-zoom,
	.ani-rotateHook,
	.ani-rotateTube,
	.ani-shadow,
	.eyes .line:after{
		animation-fill-mode:both;
		-webkit-animation-fill-mode:both;
		-o-animation-fill-mode:both;
	}
</style>
<body>
<div class="container">
	<!--左眼开始-->
    <div class="eyesBoxs pullLeft">
    	<!--轮廓开始-->
		<div class="profile skewLeft"></div>
        <div class="shadow skewLeft"></div>
        <!--轮廓结束-->
        <div class="basic ani-narrow"></div>
        <!--写轮眼开始-->
        <div class="eyes ani-zoom">
            <div class="line">           
                <!--三勾玉-->
                <div class="hook ani-rotateHook">
                	<span class="bar"><b></b></span>
                    <span class="bar"><b></b></span>
                    <span class="bar"><b></b></span>
                </div>
                <!--end-->
                <!--万花筒-->
                <div class="tube ani-rotateTube">
                	<span class="bar"></span>
                	<span class="bar"></span>
                	<span class="bar"></span>
                </div>
                <!--end-->
            </div>
        </div>
    	<!--写轮眼结束-->
        <!--轮回眼开始-->
        <div class="trans skewLeft">
        	<span class="bar ani-shadow"></span>
        </div>
        <!--轮回眼结束-->
    </div>
	<!--左眼结束-->
    
    <!--右眼开始-->
    <div class="eyesBoxs pullRight">
    	<!--轮廓开始-->
		<div class="profile skewRight"></div>
        <div class="shadow skewRight"></div>
        <!--轮廓结束-->
        <div class="basic ani-narrow"></div>
        <!--写轮眼开始-->
        <div class="eyes ani-zoom">
            <div class="line">           
                <!--三勾玉-->
                <div class="hook ani-rotateHook">
                	<span class="bar"><b></b></span>
                    <span class="bar"><b></b></span>
                    <span class="bar"><b></b></span>
                </div>
                <!--end-->
                <!--万花筒-->
                <div class="tube ani-rotateTube">
                	<span class="bar"></span>
                	<span class="bar"></span>
                	<span class="bar"></span>
                </div>
                <!--end-->
            </div>
        </div>
    	<!--写轮眼结束-->
        <!--轮回眼开始-->
        <div class="trans skewRight">
        	<span class="bar ani-shadow"></span>
        </div>
        <!--轮回眼结束-->
    </div>
	<!--右眼结束-->
</div>
</body>
</html>

  代码开源，但需要有一定JS语言基础方可阅读。我明白“ 授人以鱼不如授人以渔 ”的道理，所以代码中常常只留下自定义注释，方便大家修改，但不能凭此参透其中的奥妙，我并没有藏拙，好学的人自然会想办法寻找答案，自学也是人生的一门必修课。


推荐阅读以下内容：

 
Canvas悟空推箱子
Canvas线条动画
CSS旋转魔方
JS迷你键盘
CSS逼真小象

我不是费圆
关注
专栏目录
CSS小鲨鱼
weixin_45820444的博客
08-30 5762
280行纯CSS，喜欢拿走 <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; box-sizing: border-box; } html { width: 100%; height: 100%; } body { wi
问题四十一：怎么用ray tracing画任意圆柱面（generalized cylinder）
图形跟班
01-15 929
我们之前在“35.2”章节中画过椭圆柱面： 我们还在“36.4”章节中画过圆柱面的Inverse Mapping图： 但是，这些柱面都是：底面与ZOX平面平行，中心线与Y轴（方向向量（0，1，0））平行。   这一章节，我们将画空间中任意位置、中心线方向任意的圆柱面。   41.1 数学推导   思路：根据圆柱面的中心线建立新的坐标系vuw，在vuw
CSS3实现菱形的两种方法
木子木木的专栏
09-09 1万+
第一种：(这种方法需要额外的html标签。代码不够简洁，直观，如果图片是非正方形，会出bug) &lt;div class="prismaticPic"&gt;&lt;img src="xunLeiFenShares.png" alt=""&gt;&lt;/div&gt; css： .prismaticPic{ width:100px; margin: 20px 30px; trans..
流程图符号及流程图的例子
aimcode
05-14 3255
介绍常见的流程图符号及流程图的例子。    本章例1 - 1的算法的流程图如图1 - 2所示。本章例1 - 2的算法的流程图如图1 - 3所示。在流程图中，判断框左边的流程线表示判断条件为真时的流程，右边的流程线表示条件为假时的流程，有时就在其左、右流程线的上方分别标注“真”、“假”或“T”、“F”或“Y”、“N”另外还规定，流程线是从下往上或从右向左时，必须带箭头，除此以外，都不画箭头，流程线的
css3写各种形状（收集篇...）
shirley_hao的博客
09-10 2165
圆width:120px; height:120px; border-radius:60px; 正方形 width:120px; height:120px; 椭圆 width:200px; height:100; border-radius:100px; 三角（正） width:0; height:0; border-bottom: 140px solid #
Git 基础命令与事件详解（基础版）
weixin_45820444的博客
12-16 844
  我要出一篇 Git 总结！先讲一下大致步骤： 1.提交代码之前，需要先从服务器上面拉取代码，防止自己覆盖掉别人的代码。 git pull 2.查看当前工作目录树的工作修改状态 git status Untracked 此文件在本地储存库中，没有加入git 库； Modified  此文件已修改，但没有进行其它操作； Deleted   文件在本地删除，服务器没有删除； 等状态 3.将状态改变的代码提交至缓存 git add -A  将修改后未被跟踪的代码提交至缓存； git add -U  将
CSS快乐星球
weixin_45820444的博客
10-13 876
  在CSS交流网站上看到了这个效果，在赞叹别人伟大的同时自己也想动手试一试，的确是一个十分花哨的效果，主要考察的是 transform 的运用。   让我们一起来揭秘它吧！   当我写到一半的时候，问题也就随之而来了。我的大盒子在每一次旋转之后会闪烁一次，拉低了整体效果。我在百度上找到了这样一则信息，感谢提供此信息的博友。 原文链接 大意是说：父元素的transform-style: preserve-3d;子元素并未继承，当子元素被添加进去时，父元素就会强制闪烁一次，这样4个子元素绕一周，父元素转一圈
字魂67号-勾玉行书.ttf
11-27
字魂67号-勾玉行书.ttf
用python码一段turtle画九勾玉轮回写轮眼
最新发布
05-16
以下是使用Python turtle库绘制九勾玉轮回写轮眼的代码： ```python import turtle # 设置画布大小及背景颜色 turtle.setup(600, 600) turtle.bgcolor("black") # 定义绘制“勾玉”的函数 def draw_gem(size, ...
jdbc连接数据库
04-02
利用jsp连接数据库MySQL的课件有利用java代码和jsp自带标签
雀姬 服务器维护,《雀姬》功能界面介绍（多图）
weixin_29734285的博客
08-06 2093
前言[小电视_笑]楼楼是个日麻初心者，在无面男的安利下入了《雀姬》的坑，(顺手重温了天才麻将少女(超能力麻将)并补了斗牌传说(科学(伪)麻将)总共两部番给自己的日麻之旅加温。总体感觉还可以，所以在这里给大家做一个简单的《雀姬》的相关说明。注：楼楼跳过了新手教程，所以新手教程的内容只能请各位自行体验了。界面说明左上为头像及基础个人信息，点击头像可以查看详细信息：数据和成就(成就奖励在这里领)左中为赛...
用python画写轮眼_仿写轮眼修改版
weixin_39834154的博客
12-03 2818
PS: 2018/06/07 图片失效,补回去.纯css3制作写轮眼开眼及进化过程原作者已经找不到了,只能直接贴搜到的转帖.这是以前贪好玩跟着别人做出来练手的，结构都一样，主要是加个背景修改细节跟动画而已，轮回眼部分有些溢出，但是现在不往动画研究就懒得改了，图个一乐吧。(建议全屏预览)背景图长这样子因为中间的过渡动画没办法截出来,只能贴上变化的画面,强烈建议看看因为全部代码太长,我分开贴出来Ht...
纯CSS实现正方形、自适应正方形方法
热门推荐
ztj771299799的博客
04-08 3万+
纯CSS实现自适应正方形的几种方式 在写页面布局时候正方形对我们来说应该很常见，比如商品列表展示，头像展示， 在微博上发布图片的展现等 正方形用固定的形式写很简单 直接长＝宽写固定的值如下 &amp;amp;lt;div class=&amp;quot;square&amp;quot;&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt; .square{ width:200px; height:200
CSS背景缩写、简写详细
weixin_45820444的博客
08-23 6452
CSS背景缩写、简写 不太会这个，到网上搜了下，发现写的都不中意，就想到自己写一个出来 背景共有8个属性： background-color    背景颜色 background-position    背景图像的位置 background-size     背景图片的尺寸 background-repeat    如何重复背景图像 background-origin     背景图片的定位区域 background-clip      背景的绘制区域  /* 底部详细说明 */
CSS动画的毕业设计
weixin_45820444的博客
09-02 5865
CSS动画的毕业设计 用CSS动画写一个七龙珠，据说善良的程序员可以看到龙神，并许愿成功 动画的基本属性和参数 老样子，先给源码 <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>七龙珠召唤神龙</title> <style> * { box-sizing: border-box;
CSS旋转魔方
weixin_45820444的博客
09-02 5547
CSS旋转魔方 我想做一个相册，把儿子的照片放进去，外面是我，里面是他。可是苦逼程序员爱而不得，终日与编辑器为伍，日码万字不能休。 一定要先做下广告，衷心希望大家浏览博客的同时，可以点一下“ 赞助商 ” ，这个机构真的很棒，受疫情影响，原本的大机构为生源所困，我希望同样热爱前端，或者有兴趣向前端发展的朋友，可以了解一下这家机构。我不是学院的招生老师，但大家可以咨询我学院方面的问题，博主不图名利，如果入校学习，我肯定会想办法让机构给你最大的优惠。 不说了，上源码： <!DOCTYPE html>
垂直居中的 8 种方式
weixin_45820444的博客
10-24 5224
 有些方式只适用于行内元素，有些方式适用于所有元素，把我胸中韬略，一一展现。 1 所有元素line-height居中：  子元素{line-height:父元素内容高度}  或 子元素{font:24px/父元素内容高度 楷体;} 2 所有元素margin居中：  子元素{margin-top:父元素内容} ...
天哪！跟真的一样（CSS）
weixin_45820444的博客
08-20 4867
纯CSS伪类实现小象逼真动画 先把代码送给大家，使用方式在上一篇博客中有详细说明： Canvas波浪花环 给大家看一下效果图： <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" conten
评论 20
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我不是费圆

文章都是免费开源的，不用打赏

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值