Libx

CSS实现有趣的小部件

Word count: 359Reading time: 2 min
2017/03/25 Share

CSS实现转动圆环欢迎界面

这应该全是一个比较简单的小组件,但是个人感觉比较有意思,所以现在来写篇文。

组件的基本HTML文档如下:

<!DOCTYPE html>
<html>
<head>
<title>圆形动画</title>
<link rel="stylesheet" type="text/css" href="4.css">
</head>
<body>
<div class="demo">
<div class="pic"> <img src="53cdcf5edc0dd.jpg"></div>
<div class="mask">
<h2>WELCOME<h2>
</div>
<div class="border"></div>
</div>
</body>
</html>

下面来实现具体的效果:

1:鼠标划过时边框转动

2:鼠标划过主体加上一层蒙版,标题放大

首先将组件的基本结构写一下:

body{
margin: 0;
padding: 0;
box-sizing: border-box;
.demo, .pic, .mask, .border{
width: 300px;
height: 300px;
position: absolute;
margin-left: 50%;
left: -150px;
border-radius: 50%;
}
.demo{
top: 150px;
}
.pic img{
width: 300px;
height: 300px;
position: absolute;
border-radius: 50%;
}
.mask h2{
display: table;
position: absolute;
margin-left: 50%;
left: 50%;
transform: translateX(-50%);
top: 100px;
color: #fff;
margin:0 auto;
line-height: 100px;
}
.border{
border:10px solid ;
border-top-color: #3ba8dc;
border-left-color:#5f8da3;
border-right-color: #3abcb5;
border-bottom-color: #a6ebe7;
transform: rotate(0deg);
box-sizing: border-box
}

我们在这里使用border-redius:50%来实现圆形边框。在这里复习一下利用border来画一些简单图形的方法:https://gold.xitu.io/entry/58cf8cbd0ce4630057d96f76

接下来就是简单的动画效果咯:
a{
text-decoration: none;}
.demo:hover .mask{
background: rgba(0,0,0,0.3);
transition: all 0.3s;
}
.demo:hover .mask h2{
font-size: 150%;
font-weight: 300;
transition: all 0.3s;
}
.demo:hover .border{
transform: rotate(1080deg);
transition: all 2s ease-in;
}

好,这个很简单的东西就完了~

源码:这里

CATALOG
  1. 1. CSS实现转动圆环欢迎界面