运用CSS3完成单选框动漫殊效示例编码

日期:2021-03-03 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

先看大家的第1个殊效图

留意,这个地区的黄点并不是大家殊效的1一部分,这个黄点之因此存在是我应用的显示屏录制手机软件自带的。能够很清晰的看到这个殊效便是当大家点一下的情况下,斑点会以1种放缩的动漫显示信息出来,下面看来看实际怎样完成。


拷贝编码
编码以下:

<div class="radio⑴">
<input type="radio" name="radio⑴" id="radio⑴⑴" checked="checked">
<label for="radio⑴⑴"></label>

<input type="radio" name="radio⑴" id="radio⑴⑵">
<label for="radio⑴⑵"></label>

<input type="radio" name="radio⑴" id="radio⑴⑶">
<label for="radio⑴⑶"></label>
</div>

这里,大家特定 input 标识的 type 值为 radio,而且1下全部的 radio 的 name 值都同样,这样才能够完成单选实际效果。针对这里的 label 中的 for 特性,为何这么设定1刚开始我也不搞清楚,后来检索了1下这个特性的界定,总之大约的意思便是说,要是设定了这个特性,当大家点一下label 元素的情况下,访问器会全自动把聚焦点迁移到 radio 上去。下面用 CSS 对HTML设定实际效果。


拷贝编码
编码以下:

.radio⑴ {
width: 900px;
padding: 3% 0%;
margin: 10px auto;
background-color: darkseagreen;
text-align: center;
}

.radio⑴ label {
display: inline-block;
position: relative;
width: 28px;
height: 28px;
border: 1px solid #cccccc;
border-radius: 100%;
cursor: pointer;
background-color: #ffffff;
margin-right: 10px;
}

这里大家最先看1下对 label 元素的设置,在其中绝大多数特性我都在之前的文章内容中详细介绍过了,唯11个生疏的特性便是 cursor,这个特性是设置电脑鼠标款式的,设定成 pointer 以后,当大家的电脑鼠标放到 label 元素上时,电脑鼠标款式就变为了1只手(在我电脑上上是这样)。好了,下面再次看来


拷贝编码
编码以下:

.radio⑴ label:after {
content: "";
position: absolute;
width: 20px;
height: 20px;
top: 4px;
left: 4px;
background-color: #666;
border-radius: 50%;
transform: scale(0);
transition: transform .2s ease-out;
}

这里大家用到了 after 挑选器,为何设定这个特性?便是以便设定如上图所示的小斑点。最先大家设定 content 特性为空,意思便是大家不必须填充任何內容,由于大家只是想设定情况色为黑色,仅此罢了。也有,一开始的情况下大家设定 transform 的 scale 值为 0 ,其做到的实际效果便是将小斑点掩藏。


拷贝编码
编码以下:

.radio⑴ [type="radio"]:checked + label {
background-color: #eeeeee;
transition: background-color .2s ease-in;
}

.radio⑴ [type="radio"]:checked + label:after {
transform: scale(1);
transition: transform .2s ease-in;
}

留意这里应用了 + 标记,是甚么意思呢?它的学名叫做 邻近同胞挑选器,意思便是挑选紧接在另外一个元素后的元素,并且2者有同样的父元素,在这里的意思便是选定在radio 后出現的 label ,有人要问了,这么设定干吗,立即设定 label 便是了。想像1下,在1个 十分巨大的系统软件中,大家将会数次应用到 label 元素,以便防止搞混,这样设定将更为精确。这里大家看到了 transition 特性,这个特性是用于设定过渡实际效果的。最终,将大家的 radio 掩藏掉,就大获全胜了。


拷贝编码
编码以下:

.radio⑴ [type="radio"]{
display: none;
}

这是大家的第2个殊效

实际上看到这个动漫的第1觉得便是,和上1个1模1样,除将 transform 特性设定成 rotate,下面我就已不解释了,要是你融合上1个事例,便可以很非常容易做出这么1个实际效果,大家立即上编码


拷贝编码
编码以下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<title>Radio</title>
<style>
.radio⑵ {
width: 900px;
padding: 3% 0;
margin: 50px auto;
background-color: darkseagreen;
text-align: center;
}

.radio⑵ label {
display: inline-block;
width: 28px;
height: 28px;
overflow: hidden;
border: 1px solid #eeeeee;
border-radius: 100%;
margin-right: 10px;
background-color: #ffffff;
position: relative;
cursor: pointer;
}

.radio⑵ label:after {
content: "";
position: absolute;
top: 4px;
left: 4px;
width: 20px;
height: 20px;
background-color: #666666;
border-radius: 50%;
transform: rotate(⑴80deg);
transform-origin: ⑵px 50%;
transition: transform .2s ease-in;
}

.radio⑵ [type="radio"] {
display: none;
}

.radio⑵ [type="radio"]:checked + label:after{
transform: rotate(0deg);
transition: transform .2s ease-out;
}
</style>
</head>
<body>
<div class="radio⑵">
<input type="radio" name="radio⑵" id="radio⑵⑴" checked="checked">
<label for="radio⑵⑴"></label>

<input type="radio" name="radio⑵" id="radio⑵⑵">
<label for="radio⑵⑵"></label>

<input type="radio" name="radio⑵" id="radio⑵⑶">
<label for="radio⑵⑶"></label>
</div>

</body>
</html>

总结
以上便是这篇文章内容的所有內容了,期待能对大伙儿的学习培训或工作中带来1定的协助。

上一篇:运用css完成浮雕实际效果示例编码 返回下一篇:没有了