最新要闻

广告

手机

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

家电

【世界新要闻】记录--css水滴登录界面

来源:博客园

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

前言

今天我们来分享一款非常有趣的登录界面,它使用HTML和CSS制作,具有动态的水波纹效果,让用户在登录时感受到了一股清凉之感。


(资料图)

基本html框架

                Document            

用户名

密码

还没有账户?注册

首先,我们来看HTML代码。这个登录界面包含一个表单,用户需要在表单中输入用户名和密码。我们使用p标签创建输入框,并设置class属性以便后续的CSS样式设置。此外,我们还在表单中添加了一个“记住密码”的复选框和一个登录按钮,同时还有一个注册链接。

表单样式

form{                opacity: 0.8;    text-align: center;    padding: 0px 100px;    border-radius: 10px;    margin: 120px auto;}p {  -webkit-text-stroke: 1px #8e87c3;}

对表单整体进行样式定义,使其位于水滴内部,p标签内文镂空。

.textinput{    height: 40px;    font-size: 15px;    width: 100px;    padding: 0 35px;    border: none;    background: rgba(250, 249, 249, 0.532);    box-shadow: inset 4px 4px 10px rgba(160, 162, 158, 0.814), 4px 4px 10px rgba(117, 117, 117, 0.3), 15px 15px 30px rgba(72, 70, 70, 0.193), inset -2px -2px 10px rgba(255, 254, 254, 0.873);    border-radius: 50px;    -webkit-text-stroke: 0px;    color: saddlebrown;    outline-style: none;}

对输入框进行样式定义,取消镂空字体样式,取消轮廓线,设置阴影实现水滴一般效果。

input[type="submit"]{    width: 110px;    height: 40px;    text-align: center;    outline-style: none;    border-style: none;    border-radius: 50px;    background: rgb(31, 209, 218);    -webkit-text-stroke: 0px;    box-shadow: inset 4px 4px 10px rgba(160, 162, 158, 0.814), 4px 4px 10px rgba(117, 117, 117, 0.3), 15px 15px 30px rgba(72, 70, 70, 0.193), inset -2px -2px 10px rgba(255, 254, 254, 0.873);}

我们使用了input[type="submit"]选择器来选中提交按钮,并设置了按钮的大小、文本对齐方式、圆角和背景等样式,去除了轮廓线。同样采用了阴影来设置按钮,使其具有气泡一般的感觉,并设置背景色。

input[type="submit"]:hover {    background-color: rgb(31, 218, 78);}

这段代码是用来为按钮添加鼠标悬停效果的。我们使用了input[type="submit"]:hover选择器来选中鼠标悬停在按钮上时的状态,并设置了背景颜色。当用户悬停在按钮上时,按钮的背景颜色会改变,非常引人注目。

a {    text-decoration: none;    color: rgba(236, 20, 20, 0.433);    -webkit-text-stroke: 1px;}a:hover {    text-decoration: underline;}

提交按钮底部注册文字样式,采用镂空字体样式,鼠标移至该元素上方时,添加下划线。

* {    margin: 0;    padding: 0;}body {    background: skyblue;}

这段代码是对所有元素的外边距和内边距进行清零,以便更好地控制元素的位置和大小,设置了整个页面的背景颜色为天蓝色。

.main {    position: absolute;    left: 50%;    top: 50%;    transform: translate(-50%, -50%);    width: 400px;    height: 400px;    box-sizing: border-box;    border-radius: 50%;    background: transparent;    box-shadow: inset 15px 10px 40px rgba(158, 158, 158, 0.303), 10px 10px 20px rgba(117, 117, 117, 0.3), 15px 15px 30px rgba(72, 70, 70, 0.193), inset -10px -10px 20px rgba(233, 229, 229, 0.873);    animation: move 6s linear infinite;}
这段代码采用绝对定位,以便更好地控制它的位置。left: 50%; top: 50%;将元素的左上角定位在页面的中心位置。通过transform属性将元素向左上角移动50%,以便让元素的中心位置与页面中心位置重合。设置元素的宽度和高度为400像素。background: transparent;将元素的背景设置为透明色。box-shadow: inset 15px 10px 40px rgba(158, 158, 158, 0.303), 10px 10px 20px rgba(117, 117, 117, 0.3), 15px 15px 30px rgba(72, 70, 70, 0.193), inset -10px -10px 20px rgba(233, 229, 229, 0.873);设置元素的阴影效果,包括内阴影和外阴影。animation: move 6s linear infinite;为元素添加动画效果,其中move 是动画名称,6s是动画时长,linear是动画速度曲线,infinite是动画循环次数。
.main::after {    position: absolute;    content: "";    width: 40px;    height: 40px;    background: rgba(254, 254, 254, 0.667);    left: 80px;    top: 80px;    border-radius: 50%;    animation: move2 6s linear infinite;    filter:blur(1px);}.main::before {    position: absolute;    content: "";    width: 20px;    height: 20px;    background: rgba(255, 255, 255, 0.5);    left: 130px;    top: 70px;    border-radius: 50%;    animation: move3 6s linear infinite;    filter:blur(1px);}
这段代码是对两个小球进行样式定义,将伪元素的定位方式设置为绝对定位,以便更好地控制它的位置,设置伪元素的宽度和高度一个为20px,一个为40px。设置伪元素的背景颜色为半透明白色。left,top设置伪元素的左上角定位在主体元素的中心位置,设置伪元素的边框半径为50%,以便将其设置为圆形。animation: move2 6slinear infinite;为伪元素添加动画效果,其中 move2 是动画名称,6s 是动画时长,linear 是动画速度曲线,infinite 是动画循环次数,另一个伪元素同理。 接下来是动画定义:
@keyframes move {    50% {        border-radius: 42% 58% 49% 51% / 52% 36% 64% 48% ;    }    75% {        border-radius: 52% 48% 49% 51% / 43% 49% 51% 57%  ;    }    25% {        border-radius: 52% 48% 59% 41% / 43% 49% 51% 57%  ;    }}@keyframes move2 {    25% {        left: 80px;        top: 110px;    }    50% {        left: 50px;        top: 80px;    }    75% {        left: 80px;        top: 120px;    }}@keyframes move3 {    25% {        left: 100px;        top: 90px;    }    50% {        left: 110px;        top: 75px;    }    75% {        left: 130px;        top: 100px;    }}
这段代码定义了三个不同的动画,分别是move、move2和move3。move动画,它控制了元素的边框半径在不同时间点的变化。在这个动画中,元素的边框半径分别在25%、50%和75%的时间点进行了变化。move2move3动画,控制了一个伪元素的位置在不同时间点的变化。在这个动画中,伪元素的位置分别在25%、50%和75%的时间点进行了变化。

总代码

HTML部分

用户名

密码

还没有账户?注册

CSS部分

* {    margin: 0;    padding: 0;}body {    background: skyblue;}.main {    position: absolute;    left: 50%;    top: 50%;    transform: translate(-50%, -50%);    width: 400px;    height: 400px;    box-sizing: border-box;    border-radius: 50%;    background: transparent;    box-shadow: inset 15px 10px 40px rgba(158, 158, 158, 0.303), 10px 10px 20px rgba(117, 117, 117, 0.3), 15px 15px 30px rgba(72, 70, 70, 0.193), inset -10px -10px 20px rgba(233, 229, 229, 0.873);    animation: move 6s linear infinite;}.main::after {    position: absolute;    content: "";    width: 40px;    height: 40px;    background: rgba(254, 254, 254, 0.667);    left: 80px;    top: 80px;    border-radius: 50%;    animation: move2 6s linear infinite;    filter:blur(1px);}.main::before {    position: absolute;    content: "";    width: 20px;    height: 20px;    background: rgba(255, 255, 255, 0.5);    left: 130px;    top: 70px;    border-radius: 50%;    animation: move3 6s linear infinite;    filter:blur(1px);}@keyframes move {    50% {        border-radius: 42% 58% 49% 51% / 52% 36% 64% 48% ;    }    75% {        border-radius: 52% 48% 49% 51% / 43% 49% 51% 57%  ;    }    25% {        border-radius: 52% 48% 59% 41% / 43% 49% 51% 57%  ;    }}@keyframes move2 {    25% {        left: 80px;        top: 110px;    }    50% {        left: 50px;        top: 80px;    }    75% {        left: 80px;        top: 120px;    }}@keyframes move3 {    25% {        left: 100px;        top: 90px;    }    50% {        left: 110px;        top: 75px;    }    75% {        left: 130px;        top: 100px;    }}form{                opacity: 0.8;    text-align: center;    padding: 0px 100px;    border-radius: 10px;    margin: 120px auto;}p {  -webkit-text-stroke: 1px #8e87c3;}.textinput{    height: 40px;    font-size: 15px;    width: 100px;    padding: 0 35px;    border: none;    background: rgba(250, 249, 249, 0.532);    box-shadow: inset 4px 4px 10px rgba(160, 162, 158, 0.814), 4px 4px 10px rgba(117, 117, 117, 0.3), 15px 15px 30px rgba(72, 70, 70, 0.193), inset -2px -2px 10px rgba(255, 254, 254, 0.873);    border-radius: 50px;    -webkit-text-stroke: 0px;    color: saddlebrown;    outline-style: none;}input[type="submit"]{    width: 110px;    height: 40px;    text-align: center;    outline-style: none;    border-style: none;    border-radius: 50px;    background: rgb(31, 209, 218);    -webkit-text-stroke: 0px;    box-shadow: inset 4px 4px 10px rgba(160, 162, 158, 0.814), 4px 4px 10px rgba(117, 117, 117, 0.3), 15px 15px 30px rgba(72, 70, 70, 0.193), inset -2px -2px 10px rgba(255, 254, 254, 0.873);}input[type="submit"]:hover {    background-color: rgb(31, 218, 78);}a {    text-decoration: none;    color: rgba(236, 20, 20, 0.433);    -webkit-text-stroke: 1px;}a:hover {    text-decoration: underline;}  

本文转载于:

https://juejin.cn/post/7225623397144199228

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

关键词: