多种实用的css样式

立体按压按钮

鼠标点击->

<!DOCTYPE html>

<html>
<head>

<style>
a.button {
    position: relative;
    color: rgba(255,255,255,1);
    text-decoration: none;
    background-color: rgba(219,87,5,1);
    font-family: 'Yanone Kaffeesatz';
    font-weight: 700;
    font-size: 2em;
    display: block;
    padding: 4px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
    -moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
    box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
    margin: 100px auto;
    width: 160px;
    text-align: center;

    -webkit-transition: all .1s ease;
    -moz-transition: all .1s ease;
    -ms-transition: all .1s ease;
    -o-transition: all .1s ease;
    transition: all .1s ease;
}

a.button:active {
    -webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
    -moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
    box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
    position: relative;
    top: 6px;
}

</style>

</head>
<body>
	<div>
		<a href="#" class="button">Push me!</a>
	</div>
</body>
</html>

科技边框1

<!DOCTYPE html>

<html>
<head>

<style>
body{
	background: #003366;
}
.sci{
	height: 180px;width: 400px;
	background: url(http://www.imaoda.com/s/img/tpl/content-frame1.png) no-repeat;
	background-size: contain; 
	background-position: center;
	color: white;
	text-align: center;
}
</style>

</head>

<body>
	<div class='sci'><br> 科技边框 </div>
</body>
</html>

科技边框2

<!DOCTYPE html>

<html>
<head>


<style>
body{
	background: #003366;
}
.panel{
	height: 20rem; width: 40rem; color:rgba(255,255,255,.9);
	border: 20px solid transparent;
	border-image: url(http://www.imaoda.com/s/img/tpl/border.png) 5%;
	background:rgba(0,0,0,.3);
}
.panel:last-child{
	box-shadow:  0 0 5rem rgb(0,110,150)
}
</style>



</head>

<body>
        <br><br><br>
        <br><br><br>
        <br><br><br>
<div align="center">
    <div class='panel'>科技边框</div>
</div>
</body>
</html>

动态旋转边框

<!DOCTYPE html>

<html>
<head>

<style>
body{
	background: #003366;
}

.box{
  position: relative; width: 220px; height: 220px;
  display: flex; justify-content: center; align-items: center
}
.ring-inner{
  height: 220px; width: 220px; position: absolute;
  background: url(http://www.imaoda.com/s/img/tpl/ring-inner.png) no-repeat;
  background-size: 90%; background-position: center;
  animation: clockwise 3s linear infinite;
}
.ring-outer{
  height: 220px; width: 220px; position: absolute;
  background: url(http://www.imaoda.com/s/img/tpl/ring-outer.png) no-repeat;
  background-size: 100%;
  background-position: center;
  animation: anti-clockwise 3s linear infinite;
}
.avatar{
  height: 160px; width: 160px;
  background: url(http://www.imaoda.com/s/img/lessons/92.jpg);
  background-size: cover;
  border-radius: 50%
}
@keyframes clockwise{
  100%{
    transform: rotate(360deg)
  }
}
@keyframes anti-clockwise{
  0%{
    transform: rotate(360deg)
  }
}
</style>

</head>

<body>
	<div class='box'>
		<div class='ring-outer'></div>
		<div class='ring-inner'></div>
		<div class='avatar'></div>
	</div>
</body>
</html>

文本悬浮特效

-->

<!DOCTYPE html>

<html>
<head>

<style>
.indexbody a{
    padding: 0 20px;
    height: 45px;
    line-height: 45px;
    position: relative;
    display: inline-block;
    margin: 15px 25px;
    letter-spacing: 2px;
    font-weight: 400;
    font-size:38px;
    /*text-shadow: 0 0 1px rgba(255, 255, 255, 1);*/
    text-shadow:0px 9px 25px rgba(255,255,255, 1);
}

.indexbody a::before,
.indexbody a::after {
    position: absolute;
    width: 45px;
    height: 1px;
    background: #000000;
    content: '';
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    pointer-events: none;
}


.indexbody a::before {
    top: 0;
    left: 0;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
}


.indexbody a::after {
    right: 0;
    bottom: 0;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: 100% 0;
    -moz-transform-origin: 100% 0;
    transform-origin: 100% 0;
}


.indexbody a:hover::before,
.indexbody a:hover::after,
.indexbody a:focus::before,
.indexbody a:focus::after {
    background: #00000;   /*前后竖线移动后颜色*/
}

.indexbody a:hover::before,
.indexbody a:focus::before {
    left: 50%;
    -webkit-transform: rotate(0deg) translateX(-50%);
    -moz-transform: rotate(0deg) translateX(-50%);
    transform: rotate(0deg) translateX(-50%);
}

.indexbody a:hover::after,
.indexbody a:focus::after {
    right: 50%;
    -webkit-transform: rotate(0deg) translateX(50%);
    -moz-transform: rotate(0deg) translateX(50%);
    transform: rotate(0deg) translateX(50%);
}

.more-link {
    font-size: 1.5em;
    line-height: 100%;
}
</style>

</head>

<body>
    <div class="more indexbody">
        <br><br>
        <a>悬浮特效</a>
    </div>
</body>
</html>

参考链接：https://blog.csdn.net/weixin_41871290/article/details/80855079

Just_like_fire

发布了85 篇原创文章 · 获赞 61 · 访问量 20万+

私信关注

多种实用的css样式

立体按压按钮

科技边框1

科技边框2

动态旋转边框

文本悬浮特效

猜你喜欢