简单的css3动效
直接上代码
- 摆钟
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>弧形运动效果</title>
<style>
*{margin: 0;padding: 0;box-sizing: border-box}
body{background: #222}
.stage{width: 120px;height: auto;margin: 0 auto;position: relative;transform: rotate(-30deg);transform-origin: center top;animation:sway 2.2s infinite alternate ease-in-out}
.watch{ width:100%;height:auto;}
.seconds{position: absolute;width: 8%;height: auto;bottom: 11.5%;left: 45.5%;transform-origin: center 72.4%;animation:second 60s infinite linear}
@keyframes sway{
to{
transform: rotate(30deg);
}
}
@keyframes second{
to{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="stage">
<img src="http://p0.qhimg.com/t0197c451833414523e.png" alt="钟表" class="watch"/>
<img src="http://p9.qhimg.com/t0145f1ae8ad6753b05.png" alt="秒针" class="seconds">
</div>
</body>
</html>
摆钟.png
- 景色动效
<html>
<head lang="en">
<meta charset="UTF-8">
<title>css3 hover</title>
<style>
*{margin: 0;padding: 0;box-sizing: border-box}
.demo,.img,.mask,.border{width: 300px;height: 300px}
.demo{position: relative;display: inline-block;margin: 50px auto}
.img{border-radius: 50%;background-repeat: no-repeat;background-size:cover;background-position:center;}
.mask{position: absolute;top: 0;left: 0;border-radius: 50%;text-align: center;color:rgba(255,255,255,0);line-height: 300px;
transition:all .5s ease-in;}
.border{border: 10px solid #072256;border-left-color:#E07514;border-top-color:#E07514;position: absolute;top: 0;left: 0;
border-radius: 50%;transition:all 0.5s ease-in }
.demo:hover .mask{background: rgba(0,0,0,0.5);color:rgba(255,255,255,1);}
.demo:hover .border{transform: rotate(180deg)}
</style>
</head>
<body>
<a href="javascript:void(0)" class="demo">
<div class="img" style="background-image:url(http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg)"></div>
<div class="mask">
<p>welcome to</p>
</div>
<div class="border"></div>
</a>
</body>
</html>
景色效果.png
- 相册
<html>
<head lang="en">
<meta charset="UTF-8">
<title>气泡loading效果</title>
<style>
*{margin: 0;padding: 0;box-sizing: border-box}
body{background: #222;}
.cardfan{width: 300px;height: 200px;margin: 2rem auto;}
.cardfan img{position: absolute;border: 10px solid #fff;box-shadow: 4px 4px 3px rgba(0,0,0,0.2); transform-origin: center 400px;transition: transform 0.7s ease}
.cardfan img:first-child{transform: rotate(5deg)}
.cardfan:hover img:first-child{transform: rotate(25deg)}
.cardfan img:last-child{transform: rotate(-5deg)}
.cardfan:hover img:last-child{transform: rotate(-25deg)}
</style>
</head>
<body>
<div class="cardfan">
<img src="http://p3.qhimg.com/t0166077e858154cdb6.jpg" alt="" width="300" height="200"/>
<img src="http://p7.qhimg.com/t01c9fca4f9a05cd8c4.jpg" alt="" width="300" height="200"/>
<img src="http://p0.qhimg.com/t01fad64ae21ddd6221.jpg" alt="" width="300" height="200"/>
</div>
</body>
</html>
相册简单效果.png
- 模拟ios手机相册吸附效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Iphone相册标题吸顶</title>
<style>
*{margin:0;padding: 0;box-sizing: border-box}
ul,li{list-style: none}
:root {
font-size: calc(2vw + 1vh)
}
body {
font-size: 1rem
}
.title{
position: sticky;
position: -webkit-sticky;
top: 0;
padding: 0.5rem;
background: #fff;
}
.photo-list{
display: flex;
flex-wrap: wrap;
padding: 0.5rem;
padding-bottom: 0;
}
.photo-item{
flex-basis:22%;
margin-right: 1%;
margin-bottom: 1%;
}
img{
display: block;
width: 100%;
}
</style>
</head>
<body>
<ul class="sticky-list">
<li class="sticky-item">
<div class="title">2018年1月1日</div>
<ul class="photo-list">
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
</ul>
</li>
</ul>
<ul class="sticky-list">
<li class="sticky-item">
<div class="title">2018年2月1日</div>
<ul class="photo-list">
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
</ul>
</li>
</ul>
<ul class="sticky-list">
<li class="sticky-item">
<div class="title">2018年3月1日</div>
<ul class="photo-list">
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
</ul>
</li>
</ul>
<ul class="sticky-list">
<li class="sticky-item">
<div class="title">2018年4月1日</div>
<ul class="photo-list">
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
</ul>
</li>
</ul>
<ul class="sticky-list">
<li class="sticky-item">
<div class="title">2018年5月1日</div>
<ul class="photo-list">
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
</ul>
</li>
</ul>
<ul class="sticky-list">
<li class="sticky-item">
<div class="title">2018年6月1日</div>
<ul class="photo-list">
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
</ul>
</li>
</ul>
<ul class="sticky-list">
<li class="sticky-item">
<div class="title">2018年7月1日</div>
<ul class="photo-list">
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
</ul>
</li>
</ul>
<ul class="sticky-list">
<li class="sticky-item">
<div class="title">2018年8月1日</div>
<ul class="photo-list">
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
</ul>
</li>
</ul>
<ul class="sticky-list">
<li class="sticky-item">
<div class="title">2018年9月1日</div>
<ul class="photo-list">
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
</ul>
</li>
</ul>
<ul class="sticky-list">
<li class="sticky-item">
<div class="title">2018年10月1日</div>
<ul class="photo-list">
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
<li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
</ul>
</li>
</ul>
</body>
</html>
相册吸附效果.png
网友评论