详解CSS如何制作中英文双语菜单

栏目：资讯发布：2023-10-06浏览：3收藏

详解CSS如何制作中英文双语菜单,第1张

本文主要讲解CSS如何制作中英文双语菜单，这是一款你一定喜欢的CSS中英文双语菜单，支持鼠标特效，先运行一下看效果，绝对会另你满意。用到了一个背景，请自行下载。

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN"

"http://wwww3org/TR/xhtml1/DTD/xhtml1-transitionaldtd">

<head>

<title>实用的中英文CSS菜单</title>

<style>

body{

margin:0;

padding:0;

font-size:12px;

}

{

margin:0;

padding:0;

text-align:left;

color:#9196A0;

font-family:Verdana;

}

color:#9196A0;

}

a:link {

text-decoration: none

}

a:visited{

text-decoration: none

}

a:hover{

text-decoration:underline;

color:#81BC06

}

#nav{

height:100%;

overflow: hidden;

list-style:none;

margin:0 auto;

width:798px

}

#nav li{

float:left;

font-weight:bold;

height:60px;

background:url(images/navbgpng) #fff repeat-x left bottom;

padding:0

}

#nav a{

text-align:center;

padding-top:20px;

display: block;

height:40px;

line-height:40px;

}

#nav li aone{width:80px;}

#nav li atwo{width:80px;}

#nav li athree{width:80px;}

#nav li afour{width:80px;}

#nav li afive{width:100px;}

#nav li asix{width:106px;}

#nav li aseven{width:100px;}

#nav li aeight{width:80px;}

#nav li anine{width:92px;}

#nav li a:hoverone{background:url(images/navunbggif) no-repeat -8px 0}

#nav li a:hovertwo{background:url(images/navunbggif) no-repeat -8px -60px}

#nav li a:hoverthree{background:url(images/navunbggif) no-repeat -8px -120px}

#nav li a:hoverfour{background:url(images/navunbggif) no-repeat -8px -180px}

#nav li a:hoverfive{background:url(images/navunbggif) no-repeat 4px -240px}

#nav li a:hoversix{background:url(images/navunbggif) no-repeat 8px -300px}

#nav li a:hoverseven{background:url(images/navunbggif) no-repeat 4px -360px}

#nav li a:hovereight{background:url(images/navunbggif) no-repeat -8px -420px}

#nav li a:hovernine{background:url(images/navunbggif) no-repeat 0 -480px}

</style>

</head>

<body>

<p></p>

<li><a href="#" class="five">建站服务流程</a></li>

<li><a href="#" class="seven">网站使用指南</a></li>

</ul>

：

用纯CSS实现筛选菜单功能

用css3实现动画下拉菜单效果的实现步骤

PHP微信菜单的自定义方法详解

这篇文章主要介绍了纯CSS实现设置半个字符的样式,分别实现了水平和垂直一半、水平和垂直三分之一等效果,需要的朋友可以参考下

在stackoverflow上看到的问题怎么给半个字符设置样式，很多大神给出了答案。我就等就来学习围观吧。

一：基本解决方案：html:

<span class=”halfStyle” data-content=”A”>A</span>css:

halfStyle {

position:relative;

display:inline-block;

font-size:80px; / or any font size will work /

color: black; / or transparent, any color /

overflow:hidden;

white-space: pre; / to preserve the spaces from collapsing /

}

halfStyle:before {

display:block;

z-index:1;

position:absolute;

top:0;

left:0;

width: 50%;

content: attr(data-content); / dynamic content for the pseudo element /

overflow:hidden;

color: #f00;

}效果如图：

这种方法用于任何动态文本或单个字符，并且都是自动适用的。所有你需要做的就是在目标文本上添加一个class，剩下的就解决了。

同时，保留了原文的可访问性，可以被盲人或视障人士使用的屏幕阅读器识别。

单个字符的实现：

纯CSS。所有你需要做的就是把halfStyle class用在每个你想要渲染一半样式字符的元素上。

对于每个包含字符的span元素，你可以添加一个data属性，比如data-content=”X”，并且在伪元素上使用content:attr(data-content)；这样，halfStyle:before class将会是动态的，你不需要为每个实例进行硬编码

以下其它效果自行测试了。。

二：左右开弓，两边都设置样式

更改CSS:

halfStyle {

position:relative;

display:inline-block;

font-size:80px; / or any font size will work /

color: transparent; / hide the base character /

overflow:hidden;

white-space: pre; / to preserve the spaces from collapsing /

}

halfStyle:before { / creates the left part /

display:block;

z-index:1;

position:absolute;

top:0;

width: 50%;

content: attr(data-content); / dynamic content for the pseudo element /

overflow:hidden;

pointer-events: none; / so the base char is selectable by mouse /

color: #f00; / for demo purposes /

text-shadow: 2px -2px 0px #af0; / for demo purposes /

}

halfStyle:after { / creates the right part /

display:block;

direction: rtl; / very important, will make the width to start from right /

position:absolute;

z-index:2;

top:0;

left:50%;

width: 50%;

content: attr(data-content); / dynamic content for the pseudo element /

overflow:hidden;

pointer-events: none; / so the base char is selectable by mouse /

color: #000; / for demo purposes /

text-shadow: 2px 2px 0px #0af; / for demo purposes /

}三：设置水平一半的样式

CSS:

halfStyle {

position:relative;

display:inline-block;

font-size:80px; / or any font size will work /

color: transparent; / hide the base character /

overflow:hidden;

white-space: pre; / to preserve the spaces from collapsing /

}

halfStyle:before { / creates the top part /

display:block;

z-index:2;

position:absolute;

top:0;

height: 50%;

content: attr(data-content); / dynamic content for the pseudo element /

overflow:hidden;

pointer-events: none; / so the base char is selectable by mouse /

color: #f00; / for demo purposes /

text-shadow: 2px -2px 0px #af0; / for demo purposes /

}

halfStyle:after { / creates the bottom part /

display:block;

position:absolute;

z-index:1;

top:0;

height: 100%;

content: attr(data-content); / dynamic content for the pseudo element /

overflow:hidden;

pointer-events: none; / so the base char is selectable by mouse /

color: #000; / for demo purposes /

text-shadow: 2px 2px 0px #0af; / for demo purposes /

}四：水平三分之一的样式

css:

halfStyle { / base char and also the bottom 1/3 /

position:relative;

display:inline-block;

font-size:80px; / or any font size will work /

color: transparent;

overflow:hidden;

white-space: pre; / to preserve the spaces from collapsing /

color: #f0f;

text-shadow: 2px 2px 0px #0af; / for demo purposes /

}

halfStyle:before { / creates the top 1/3 /

display:block;

z-index:2;

position:absolute;

top:0;

height: 3333%;

content: attr(data-content); / dynamic content for the pseudo element /

overflow:hidden;

pointer-events: none; / so the base char is selectable by mouse /

color: #f00; / for demo purposes /

text-shadow: 2px -2px 0px #fa0; / for demo purposes /

}

halfStyle:after { / creates the middle 1/3 /

display:block;

position:absolute;

z-index:1;

top:0;

height: 6666%;

content: attr(data-content); / dynamic content for the pseudo element /

overflow:hidden;

pointer-events: none; / so the base char is selectable by mouse /

color: #000; / for demo purposes /

text-shadow: 2px 2px 0px #af0; / for demo purposes /

}五：垂直三分之的样式

css:

halfStyle { / base char and also the right 1/3 /

position:relative;

display:inline-block;

font-size:80px; / or any font size will work /

color: transparent; / hide the base character /

overflow:hidden;

white-space: pre; / to preserve the spaces from collapsing /

color: #f0f; / for demo purposes /

text-shadow: 2px 2px 0px #0af; / for demo purposes /

}

halfStyle:before { / creates the left 1/3 /

display:block;

z-index:2;

position:absolute;

top:0;

width: 3333%;

content: attr(data-content); / dynamic content for the pseudo element /

overflow:hidden;

pointer-events: none; / so the base char is selectable by mouse /

color: #f00; / for demo purposes /

text-shadow: 2px -2px 0px #af0; / for demo purposes /

}

halfStyle:after { / creates the middle 1/3 /

display:block;

z-index:1;

position:absolute;

top:0;

width: 6666%;

content: attr(data-content); / dynamic content for the pseudo element /

overflow:hidden;

pointer-events: none; / so the base char is selectable by mouse /

color: #000; / for demo purposes /

text-shadow: 2px 2px 0px #af0; / for demo purposes /

}

这篇文章给大家介绍的是一个利用CSS实现的酷炫的下拉框，实现后效果真的非常不错，文中给出了详细实现过程和示例代码，感兴趣的朋友们下面来一起看看吧。

首先来看看要实现的效果图

想要制作这么一个效果还是比较麻烦的，但是代码并不难理解。

首先，来看看 Html 代码。

XML/HTML Code复制内容到剪贴板

<h2>Custom Select</h2>

</p>

<p>Please select</p>

<ul>

<li data-value="JavaScript">JavaScript</li>

<li data-value="JQuery">JQuery</li>

<li data-value="Backbone">Backbone</li>

</ul>

</p>

可见，我们并没有利用原生的 select 元素，而是利用其它元素来模拟这个效果。我们为 li 元素指定了 data-value,主要是接下来我们会用 JQuery 获取选中值并将其放置到 p 元素下。

下面逐步来看 CSS 代码。

CSS Code复制内容到剪贴板

{

margin: 0;

padding: 0;

}

html {

font-family: 'Terminal';

font-size: 625%;

}

body {

background-color: #33CC66;

}

1、将网页中所有元素的外边距和内边距设置为 0。

2、将网页中的默认字体设置为 Terminal，字体大小设置为 625%, 也就是 10px。

3、设置背景颜色为 #33CC66。

XML/HTML Code复制内容到剪贴板

上面我们用到了 Terminal 字体，而且接下来我们还会使用 Lobster 字体，所以用这行代码添加引用。

1、指定 headng, select 宽度并指定其水平居中。

2、修改 heading 的宽度，主要是为了让其宽度大于 select 的宽度，显得更加美观。然后指定其上外边距和下外边距。

3、设置 heading 下 h2 元素的字体和字体大小，颜色。

CSS Code复制内容到剪贴板

select > p, select ul {

background-color: #ffffff;

font-size: 2rem;

border: 1px solid bisque;

border-radius: 5px;

margin-bottom: 0;

}

select > p {

text-align: left;

padding: 1rem;

position: relative;

border-bottom-rightright-radius: 0;

border-bottom-left-radius: 0;

cursor: pointer;

color: rgba(102, 102, 102, 6);

}

select > p:after {

display: block;

width: 10px;

height: 10px;

content: '';

position: absolute;

top: 14rem;

rightright: 2rem;

border-bottom: 1px solid #33CC66;

border-left: 1px solid #33CC66;

transform: rotate(-45deg);

transition: transform 3s ease-out, top 2s ease-out;

}

1、设置 p 和 ul 元素的背景颜色和边框等设置。

2、为 p 元素单独指定样式，并设置其 position 属性，主要是为了下面绘制右侧的下拉按钮。

3、利用 :after 在p 元素的右方绘制下拉按钮，可以看出来，我们是利用左下边框然后旋转 -45 度模拟的这个效果。值得注意的是，我们需要将其 display 设置为 block，并且设置宽高，否则看不到这个效果。

CSS Code复制内容到剪贴板

select ul {

margin-top: 0;

border-top-left-radius: 0;

border-top-rightright-radius: 0;

list-style-type: none;

cursor: pointer;

overflow-y: auto;

max-height: 0;

transition: max-height 3s ease-out;

}

select ul li {

padding-left: 05rem;

display: block;

line-height: 3rem;

text-align: left;

}

1、设置 ul 的一些默认属性，并将其设置最大宽度为 0，指定 overflow-y 为 auto ，这个时候ul 将会被隐藏。

2、在这里设置的时候我遇到了一个问题，就是 li 标签始终占不满 ul 的一行，那是因为其默认有 margin 和 padding ，所以在一开始的时候就将网页中所有元素的外边距和内边距设置成了 0。

CSS Code复制内容到剪贴板

selectopen ul {

max-height: 20rem;

transform-origin: 50% 0;

-webkit-animation: slide-down 5s ease-in;

}

selectopen > p:after {

position: absolute;

top: 16rem;

transform: rotate(-225deg);

transition: transform 3s ease-in, top 2s ease-in;

}

1、为 open 设置最大高度，并为其指定动画效果。

2、将下拉按钮旋转 -225 度，并为其指定动画。

下面我们看看为 ul 元素指定的 slide-down 动画效果，这也是这个下拉特效的关键所在。

CSS Code复制内容到剪贴板

@-webkit-keyframes slide-down {

0% {

transform: scale(1, 0);

}

25% {

transform: scale(1, 125);

}

50% {

transform: scale(1, 075);

}

75% {

transform: scale(1, 11);

}

100% {

transform: scale(1, 1);

}

看到以上代码可能就都明白了，就是不断改变 ul 的大小，让其在 075-125 之间进行缩放，所以就会有那个跳动的效果了。

下面还有一些简单的 CSS 代码，不再解释。

CSS Code复制内容到剪贴板

select ul li:hover {

background-color: rgba(102, 153, 102, 04);

}

select selected {

background-color: rgba(102, 153, 102, 08);

}

CSS 讲完了，下面就可以看看我们是如何利用 JQuery 控制这个效果的。

我们并不需要下载 JQuery 就可以使用，因为现在已经有很多网站提供了 CDN 服务，比如我使用的 BootCDN。

XML/HTML Code复制内容到剪贴板

下面就可以使用 JQuery 了。

XML/HTML Code复制内容到剪贴板

$(document)ready(function () {

$('select ul li')on("click", function (e) {

var _this = $(this);

$('select >p')text(_thisattr('data-value'));

$(_this)addClass('selected')siblings()removeClass('selected');

$('select')toggleClass('open');

cancelBubble(e);

});

$('select>p')on("click", function (e) {

$('select')toggleClass('open');

cancelBubble(e);

});

$(document)on('click', function () {

$('select')removeClass('open');

})

function cancelBubble(event) {

if (eventstopPropagation) {

eventpreventDefault();

eventstopPropagation();

} else {

eventreturnValue = false;

eventcancelBubble();

}

</script>

1、首先为 p 标签绑定 click 事件，在触发的时候，为 select 添加或移除 open class, 也就是将 ul 显示出来。

2、为 li 绑定 click 事件，当选中了一个 li 元素的时候，首先获取到 data-value，然后将其赋值给 p 标签，然后为选中的 li 添加 selected class,与此同时利用 siblings() 方法，让兄弟节点的 selected class 移除。

3、为 document 设置click 事件，当我们点击网页中任何一处地方的时候，如果 ul 是打开的，就将其关闭，不过这个时候由于所有元素都在 document 内，所以我们需要阻止事件冒泡，调用自己写的 cancelBubble() 方法。

总结

好了，本文的内容到这就基本介绍了，希望能对大家的学习或者工作带来一定的帮助，如果有疑问大家可以留言交流。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" "http://wwww3org/TR/xhtml1/DTD/xhtml1-transitionaldtd">

<head>

/不要使用标签名作为类名/

/table{text-align:center;width:100%;height:100%;border-width:thin;border-style:solid;border-color:#AA9FFF;border-collapse:separate;}/

tbClass {

text-align:center;

width:100%;height:100%;

/首先对大表格加上左边和底边/

/我自作主张加上了底边框，可以删掉去/

/听说FF下不支持缩写，请你自己把下面的写法拆分出来/

border-left:2px #AA9FFF solid; / 左边框 /

border-bottom:2px #AA9FFF solid; /底边框/

}

tbClass td {/单元格的上边和右边/

border-top:2px #AA9FFF solid;

border-right:2px #AA9FFF solid;

}

tbClass td {/测试用，为了看到效果，你可以把这个删掉去/

/width:100px; height:80px;/

}

/专门为“盒子那行写的类”/

boxCell td { height:101px; padding:0; margin:0}

</style>

</head>

<body>

<php

for($i=1;$i<=1000;$i++){

if($i%5==0){

echo "<td>$i</td>";

echo "</tr>

</tr>

";/////注意！这里使用了一个boxCell的CSS类，不会那么多冗余代码

echo "<tr>";

}else{

echo "<td>$i</td>";

}

</table>

</body>

</html>

//////最后说明；

1。如果乱码，或无显示，请注意你php文件的编码格式，或在浏览器下选择GBK32编码

2。这种专业问题，如果到Csdn 里发帖，十分钟之内就有人回答了

3。百度的BUG：回复后再修改，就不能保持代码的缩进了 -_-!即不能tab缩进，要换成4个空格

<li>

<p>选项卡内容 1</p>

</div>

</li>

<li>

<p>选项卡内容 2</p>

</div>

</li>

</ul>

CSS样式如下：

{

margin: 0;

padding: 0;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

body {

padding: 20px;

text-align: left;

font-family: Lato;

color: #fff;

background: #9b59b6;

}

tabs {

width: 650px;

float: none;

list-style: none;

position: relative;

margin: 80px 0 0 10px;

text-align: left;

}

tabs li {

float: left;

display: block;

}

tabs input[type="radio"] {

position: absolute;

top: -9999px;

left: -9999px;

}

tabs label {

display: block;

padding: 14px 21px;

border-radius: 2px 2px 0 0;

font-size: 20px;

font-weight: normal;

text-transform: uppercase;

background: #8e44ad;

cursor: pointer;

position: relative;

top: 4px;

-webkit-transition: all 02s ease-in-out;

-moz-transition: all 02s ease-in-out;

-o-transition: all 02s ease-in-out;

transition: all 02s ease-in-out;

}

tabs label:hover {

background: #703688;

}

tabs tab-content {

z-index: 2;

display: none;

overflow: hidden;

width: 100%;

font-size: 17px;

line-height: 25px;

padding: 25px;

position: absolute;

top: 53px;

left: 0;

background: #612e76;

}

tabs [id^="tab"]:checked + label {

top: 0;

padding-top: 17px;

background: #612e76;

}

tabs [id^="tab"]:checked ~ [id^="tab-content"] {

display: block;

}

效果

首先是水平居中，最简单的办法当然就是

margin:0 auto;也就是将margin-left和margin-right属性设置为auto，从而达到水平居中的效果。

那么其他的办法呢？

line-height

首先介绍文字的水平居中方法：

<p class="wrap">刘放</p>利用line-height设为height的一样即可：

wrap{

line-height: 200px;/垂直居中关键/

text-align:center;

height: 200px;

font-size: 36px;

background-color: #ccc;

}效果如下：

padding填充

利用padding和background-clip配合实现p的水平垂直居中：

</p>

</p>通过backgroun-clip设置为content-box,将背景裁剪到内容区外沿，再利用padding设为外p减去内p的差的一半，来实现：

parent{

margin:0 auto;

width:200px;

height:200px;

background-color:red;

}

children {

width: 100px;

height: 100px;

padding: 50px;

background-color: black;

background-clip:content-box;/居中的关键/效果如下：

margin填充

接下来介绍margin填充的方式来实现水平垂直居中。

首先我们还是定义父子p：

</p>这里我们利用将子p的margin-top设置为父p高度减去子p高度的一半，然后再通过overflow设置为hidden来触发父p的BFC，LESS代码如下：

@parentWidth:200px;

@childrenWidth:50px;

parent {

margin:0 auto;

height:@parentWidth;

width:@parentWidth;

background: red;

overflow:hidden;/触发BFC/

}

children {

height:@childrenWidth;

width:@childrenWidth;

margin-left:auto;

margin-right:auto;

margin-top: (@parentWidth - @childrenWidth) / 2;

background:black;

}最后得到居中效果如下：

absolute定位

利用position:absolute搭配top，left 50%，再将margin设为负值也可以对p进行水平垂直居中，首先还是需要定义父子p：

</p>然后设置相应的css：

parent {

position:relative;

margin:0 auto;

width:200px;

height:200px;

background-color:red;

}

children {

position:absolute;

left:50%;

top:50%;

margin:-25px 0 0 -25px ;

height:50px;

width:50px;

background-color: black;

}其中的margin中的值为该p宽度的一半，最后效果图：

text-align居中

众所周知，text-align可以使得一个p中的内容水平居中。但是如果是要将该p中的子p居中呢？可以将子p的display设为inline-block。

parent {

text-align:center;

margin:0 auto;

width:200px;

height:200px;

background:red;

}

children {

positiona;absolute;

margin-top:75px;

width:50px;

height:50px;

background: black;

display:inline-block;/使其父元素text-align生效/

}flex居中

最后来介绍一下CSS3中的display:flex来实现的水平垂直居中的方法。

<p class="children">我是通过flex的水平垂直居中噢！</p>

</p>html,body{

width: 100%;

height: 200px;

}

parent {

display:flex;

align-items: center;/垂直居中/

justify-content: center;/水平居中/

width:100%;

height:100%;

background-color:red;

}

children {

background-color:blue;

}效果如下：

在css3中，我们使用animation与keyframes结合，可以给元素添加各种各样的动画效果。这篇文章主要介绍了css3实现多个元素依次显示效果,需要的朋友可以参考下

如上图所示，在许多的活动宣传html5中会经常需要用到这样的一个动画效果。特别是快到年底了，也许有同学正在为了公司的活动页面而忙碌，get到这样一个小技能说不定刚好对你有帮助哦。

在css3中，我们使用animation与keyframes结合，可以给元素添加各种各样的动画效果。具体的动画，在keyframes中定义，在animation中使用。例如可以定义一个从上飞入的动画效果。

@keyframes topIn {

from { transform: translateY(-50px) }

to { transform: translateY(0px) }

}并在目标元素中通过animation来使用动画。

topIn {

animation: topIn 1s ease;

}这样，当元素第一次渲染进入DOM时，就会有一个从上到下的位移动画效果。当然，这种效果并不是我们想要的。往往我们还在在动画上加上一个透明度从0到1的渐变。

@keyframes topIn {

from {

transform: translateY(-50px);

opacity: 0;

}

to {

transform: translateY(0px);

opacity: 1;

}

}我们还希望能够控制元素的显示时机应该怎么办？简单一点的办法就是在需要动画效果展示时，才给目标元素添加控制动画的class样式。

btnaddEventListener('click', function() {

documentquerySelector('target')classListadd('topIn');

}, !1);但是这样做有一个问题。我相信实践过的朋友都已经发现过的。我们期望元素在入场之前，是处于看不见的状态。但是仅仅只是上面的做法，动画开始前元素是能够被看见的。那么应该怎么办？

我们可以很简单的想到，给元素添加 display: none 或者 visibility: hidden 。但是由于 display: none 之后，元素是不占位的。因此如果这样的话，会导致页面布局出现混乱。所以我们在开始之前，给元素添加一个新的class。

aninode {

visibility: hidden;

}并且添加一个新的class让元素显示出来。

animated aninode {

visibility: visible;

}控制动画效果的class也在css上进行一些调整。

animated topIn {

animation: topIn 1s ease;

}这样做的好处是，我们只需要在class中添加一个 animated ，就能够达到我们的效果。实例demo完整代码如下：

</p>

container {

width: 100px;

margin: 0 auto;

}

aninode {

visibility: hidden;

}

animated aninode {

visibility: visible;

}

target {

width: 100px;

height: 100px;

background: orange;

border-radius: 4px;

margin: 20px 0;

}

animated topIn {

animation: topIn 1s ease;

}

animated leftIn {

animation: leftIn 1s ease;

}

btn {

width: 100px;

height: 30px;

border: 1px solid #ccc;

outline: none;

transition: 01s;

}

btn:active {

border: none;

background: orange;

color: #fff;

}

@keyframes topIn {

from {

transform: translateY(-50px);

opacity: 0;

}

to {

transform: translateY(0px);

opacity: 1;

}

@keyframes leftIn {

from {

transform: translateX(-50px);

opacity: 0;

}

to {

transform: translateX(0px);

opacity: 1;

}

var show = documentquerySelector('show');

var hide = documentquerySelector('hide');

var container = documentquerySelector('container');

showaddEventListener('click', function() {

containerclassListadd('animated');

}, !1);

hideaddEventListener('click', function() {

containerclassListremove('animated');

}, !1);Demo显示如下：

See the Pen <a href='https://codepenio/yangbo5207/pen/NXKrPg/'>NXKrPg</a> by Ormie (<a href='https://codepenio/yangbo5207'>@yangbo5207</a>) on <a href='https://codepenio'>CodePen</a>codepen demo 地址

但是这样离我们想要的效果好像还差一点点。继续思考。首先想要后面的元素比前一个元素晚一点出现，那么肯定是要控制延迟时间，我们就必须有许多设置延迟时间的class。

delay200 {

animation-delay: 200ms;

animation-fill-mode: backwards!important;

}

delay400 {

animation-delay: 400ms;

animation-fill-mode: backwards!important;

}

delay600 {

animation-delay: 600ms;

animation-fill-mode: backwards!important;

}

delay800 {

animation-delay: 800ms;

animation-fill-mode: backwards!important;

}animation-fill-mode: backwards!important; 的目的是为了元素在出现之前，保持透明度为0的状态。防止当添加 animated 之后元素直接出现了。

加 !important 是为了防止在新的class中使用animation简写时对 animation-fill-mode 的属性进行覆盖改写。如果此处不写 !important 的话，那么在 topIn 这样的动画class中就不能使用简写形式。

这样之后，我们只需要在css中添加上上述代码，并对html做一些改动，就能够实现我们想要的效果了。

See the Pen <a href='https://codepenio/yangbo5207/pen/mpbEEE/'>mpbEEE</a> by Ormie (<a href='https://codepenio/yangbo5207'>@yangbo5207</a>) on <a href='https://codepenio'>CodePen</a>codepen demo 地址

完整代码如下：

<p class="item leftIn delay200">春眠不觉晓</p>

<p class="item leftIn delay400">处处蚊子咬</p>

<p class="item leftIn delay600">夜来风雨声</p>

</p>

</p>

container {

width: 200px;

margin: 0 auto;

}

aninode {

visibility: hidden;

}

animated aninode {

visibility: visible;

}

targets {

margin: 20px 0;

}

targets item {

border: 1px solid #ccc;

margin: 10px 0;

line-height: 2;

padding: 2px 6px;

border-radius: 4px;

}

animated topIn {

animation: topIn 1s ease;

}

animated leftIn {

animation-name: leftIn;

animation-duration: 1s;

}

btn {

width: 100px;

height: 30px;

border: 1px solid #ccc;

outline: none;

transition: 01s;

}

btn:active {

border: none;

background: orange;

color: #fff;

}

@keyframes topIn {

from { transform: translateY(-50px) }

to { transform: translateY(0px) }

}

@keyframes leftIn {

from {

transform: translateX(-50px);

opacity: 0;

}

to {

transform: translateX(0px);

opacity: 1;

}

delay200 {

animation-delay: 200ms;

animation-fill-mode: backwards!important;

}

delay400 {

animation-delay: 400ms;

animation-fill-mode: backwards!important;

}

delay600 {

animation-delay: 600ms;

animation-fill-mode: backwards!important;

}

delay800 {

animation-delay: 800ms;

animation-fill-mode: backwards!important;

}

var show = documentquerySelector('show');

var hide = documentquerySelector('hide');

var container = documentquerySelector('container');

showaddEventListener('click', function() {

containerclassListadd('animated');

}, !1);

hideaddEventListener('click', function() {

containerclassListremove('animated');

}, !1);我们发现js的逻辑并没有发生任何改变。仍然仅仅只是在合适的位置添加/删除animated。

彩蛋：

在实践中我们还会遇到一个比较麻烦的事儿。就是延迟class的编写。我们可能并不知道会使用到那些时差，有多少个元素会使用到，如果都用手来写的话，重复工作确实太过麻烦。因此我们可以使用js动态插入。代码如下：

const styleSheet = getSheet();

var delay = 100;

while (delay < 10000) {

styleSheetinsertRule(`animated delay${delay}{ animation-delay: ${delay}ms; animation-fill-mode: backwards; }`, styleSheetcssRuleslength);

delay += delay < 3000 100 : 1000;

}

function getSheet() {

var sheets = documentstyleSheets;

var len = sheetslength;

for(var i = 0; i <= len; i++) {

var sheet = sheetsitem(i);

try {

if (sheetcssRules) {

return sheet;

}

} catch(e) {}

}

var style = documentcreateElement('style');

styletype = "text/css";

documentgetElementsByTagName('head')[0]appendChild(style);

return stylesheet;

}

详解CSS如何制作中英文双语菜单

本文主要讲解CSS如何制作中英文双语菜单，这是一款你一定喜欢的CSS中英文双语菜单，支持鼠标特效，先运行一下看效果，绝对会另你满意。...

点击下载

上一篇：求明朝朱氏家谱下一篇：家谱谱序文言文

本文2023-10-06 23:48:36发表“资讯”栏目。
本文链接：https://www.lezaizhuan.com/article/193105.html

详解CSS如何制作中英文双语菜单

详解CSS如何制作中英文双语菜单

相关文章

阅读排行