只用css来实现动画以及选框按钮

程序魔法师＞

已于 2022-07-17 13:40:38 修改

阅读量291

点赞数 1

分类专栏： css 文章标签：前端 css

于 2022-07-17 13:29:19 首次发布

本文链接：https://blog.csdn.net/abdilmit24/article/details/125831026

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML部分：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link href="one.css" rel="stylesheet">

</head>

<body>

    <div class="alert">

   

        <h2>Hey!快来看这里哟...</h2>

        <p>这是纯靠CSS来制作的一个复选框按钮，你喜欢这个作品吗？</p>

    </div>

   

    <div class="container">

   

        <h2>你喜欢下列哪一项运动？</h2>

       

      <ul>

      <li>

        <input type="radio" id="f-option" name="selector">

        <label for="f-option">篮球</label>

       

        <div class="check"></div>

      </li>

     

      <li>

        <input type="radio" id="s-option" name="selector">

        <label for="s-option">足球</label>

       

        <div class="check"><div class="inside"></div></div>

      </li>

     

      <li>

        <input type="radio" id="t-option" name="selector">

        <label for="t-option">排球</label>

       

        <div class="check"><div class="inside"></div></div>

      </li>

     

    </ul>

   

    </div>

   

    <div class="signature">

        <p>Made with <i class="much-heart"></i> by <a href="#">AJ</a></p>

    </div>

</body>

</html>

CSS部分：



@keyframes example {

  0%   {background-color: rgb(15, 1, 1);}

  25%  {background-color: rgb(92, 73, 52);}

  50%  {background-color: rgb(66, 66, 88);}

  100% {background-color: rgb(75, 37, 37);}

}

body, html{

  height: 100%;

  background: #111211;

  animation: example 6s infinite;

}



.container{

  display: block;

  position: relative;

  margin: 40px auto;

  height: auto;

  width: 500px;

  padding: 20px;

  font-family: 'courier',华文彩云;

}



h2 {

  color: #AAAAAA;

}



.container ul{

  list-style:none;

  margin: 0;

  padding: 0;

  overflow: auto;

}



ul li{

  color: #AAAAAA;

  display: block;

  position: relative;

  float: left;

  width: 100%;

  height: 100px;

  border-bottom: 1px dashed rgb(8, 189, 234);

}



ul li input[type=radio]{

  position: absolute;

  visibility:hidden;

}



ul li label{

  display: block;

  position: relative;

  font-weight: 300;

  font-size: 1.35em;

  padding: 25px 25px 25px 80px;

  margin: 10px auto;

  height: 30px;

  z-index: 9;

  cursor: pointer;



}



ul li:hover label{

  color: #FFFFFF;

}



ul li .check{

  display: block;

  position: absolute;

  border: 5px solid #AAAAAA;

  border-radius: 100%;

  height: 25px;

  width: 25px;

  top: 30px;

  left: 20px;

  z-index: 5;

  transition: border .25s linear;

  -webkit-transition: border .25s linear;

}



ul li:hover .check {

  border: 5px solid #FFFFFF;

}



ul li .check::before {

  display: block;

  position: absolute;

  content: '';

  border-radius: 100%;

  height: 15px;

  width: 15px;

  top: 5px;

  left: 5px;

  margin: auto;

  transition: background 0.25s linear;

  -webkit-transition: background 0.25s linear;

}



input[type=radio]:checked ~ .check {

  border: 5px solid #0DFF92;

}



input[type=radio]:checked ~ .check::before{

  background: #0DFF92;

}



input[type=radio]:checked ~ label{

  color: #0DFF92;

}



.signature {

  margin: 10px auto;

  padding: 10px 0;

  width: 100%;

}



.signature p{

  text-align: center;

  font-family: Helvetica, Arial, Sans-Serif;

  font-size: 0.85em;

  color: #AAAAAA;

}



.signature .much-heart{

  display: inline-block;

  position: relative;

  margin: 0 4px;

  height: 10px;

  width: 10px;

  background: #AC1D3F;

  border-radius: 4px;

  -ms-transform: rotate(45deg);

    -webkit-transform: rotate(45deg);

    transform: rotate(45deg);

}



.signature .much-heart::before,

.signature .much-heart::after {

    display: block;

  content: '';

  position: absolute;

  margin: auto;

  height: 10px;

  width: 10px;

  border-radius: 5px;

  background: #AC1D3F;

  top: -4px;

}



.signature .much-heart::after {

  bottom: 0;

  top: auto;

  left: -4px;

}



.signature a {

  color: #AAAAAA;

  text-decoration: none;

  font-weight: bold;

}




/* Styles for alert...

by the way it is so weird when you look at your code a couple of years after you wrote it XD */



.alert {

  box-sizing: border-box;

  background-color: #58e392;

  width: 100%;

  position: relative;

  top: 0;

  left: 0;

  z-index: 300;

  padding: 20px 40px;

  color: #333;

  font-family: 'Courier New', 标楷体,;

}



.alert h2 {

  font-size: 22px;

  color: #232323;

  margin-top: 0;

}



.alert p {

  line-height: 1.6em;

  font-size:18px;

}



.alert a {

  color: #232323;

  font-weight: bold;

}