首页文章资源工具教程 栏目
css单选radio按钮样式css多选框checkbox样式css响应式汉堡菜单(左滑、抽屉)css实现遮罩层弹出效果一组好看的css按钮效果(6种)css实现select下拉选择框css实现选项卡功能css实现下拉菜单css按钮样式代码(16种)css实现手风琴效果css图片轮播效果css进度条样式css实现侧边栏菜单css加载动画css背景动画效果css开关按钮样式(18种)css炫酷的圆形菜单css提示tooltip效果css手风琴_好看的Gallery伸缩效果css表格样式css分段控件导航栏css折角效果css粒子背景动画效果css进度圆圈连线css响应式分页样式代码css各种天气样式动画图标css层叠卡片滑出特效css下拉Dropdown菜单css圆圈按钮tip提示特效css和svg圆圈进度样式代码css动画404页面代码css爱心跳动动画代码css绘制逼真玻璃球效果css模拟开关灯特效创意css网格布局带动画效果css星级打分radio五角星css卡片悬浮翻转特效div上下浮动纯css动画css时间轴样式（timeLine）css文字循环翻滚动画效果css输入框动效css鼠标悬停缩放比例效果css模糊背景毛玻璃效果css实现小球循环跳动动画css实现标签样式Tagscss进度条阴影动画css绘制的小鸟css svg按钮冒泡动画特效css svg蓝色波浪动画特效css创意svg菜单栏水滴动画css文字进度条的实现CSS实现内容折叠/展开效果CSS3手机充电特效css实现鼠标点击拖拽效果CSS实现一个计时器纯CSS渐变绘制 Chrome 图标CSS 渐变来实现波浪动画纯CSS动态显示屏幕宽高

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具，网友无需注册和下载安装即可使用

点击查看

css各种天气样式动画图标


源码

<body>
	<div class="hot">
		<span class="sun"></span><span class="sunx"></span>
	</div>
	<div class="cloudy">
		<span class="cloud"></span><span class="cloudx"></span>
	</div>
	<div class="stormy">
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<span class="snowe"></span><span class="snowex"></span><span class="stick"></span><span class="stick2"></span>
	</div>
	<div class="breezy">
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul><span class="cloudr"></span>
	</div>
	<div class="night">
		<span class="moon"></span><span class="spot1"></span><span class="spot2"></span>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
</body>

<style>
div {
    width: 130px;
    height: 130px;
    border-radius: 40%;
    z-index: 120
}
.hot {
    position: absolute;
    top: 25%;
    left: 20%;
    background: linear-gradient(to top right,rgba(255,87,34,1) 0,rgba(251,140,0,1) 100%);
    box-shadow: 1px 1px 30px rgba(255,111,0,1)
}

.sun {
    position: absolute;
    top: -10%;
    left: 65%;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: linear-gradient(to bottom left,rgba(255,235,59,1) 0,rgba(249,168,37,1) 90%);
    box-shadow: 1px 1px 30px rgba(255,160,0,1);
    animation: inex 3s infinite linear
}

.sunx {
    position: absolute;
    top: 30%;
    left: 45%;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: #fff;
    opacity: .2
}

.cloudy {
    position: absolute;
    top: 25%;
    left: 45%;
    background: linear-gradient(to top right,rgba(63,81,181,1) 0,rgba(3,155,229,1) 40%);
    box-shadow: 1px 1px 30px rgba(2,119,189,1)
}

.cloud {
    position: absolute;
    top: 5%;
    left: 70%;
    width: 60px;
    height: 20px;
    border-radius: 10px;
    background-color: rgba(129,212,250,1);
    box-shadow: 1px 1px 30px rgba(0,151,167,1);
    animation: move 3s infinite linear
}

.cloudx {
    position: absolute;
    top: 23%;
    left: 55%;
    width: 60px;
    height: 20px;
    border-radius: 10px;
    background-color: rgba(129,212,250,1);
    animation: move 3s infinite linear
}

.stormy {
    position: absolute;
    top: 25%;
    left: 70%;
    background: linear-gradient(to top right,rgba(117,117,117,1) 0,rgba(33,33,33,1) 90%);
    box-shadow: 1px 1px 30px rgba(33,33,33,1)
}

.stormy li {
    position: absolute;
    list-style: none;
    width: 5px;
    height: 5px;
    border-radius: 100%;
    background-color: #777;
    box-shadow: 1px 1px 30px #555;
    animation: fall 3s infinite linear;
    opacity: 0
}

.stormy li:nth-child(1) {
    top: 0;
    left: 100%
}

.stormy li:nth-child(2) {
    top: 5%;
    left: 90%
}

.stormy li:nth-child(3) {
    top: -10%;
    left: 80%;
    animation-delay: 2s
}

.stormy li:nth-child(4) {
    top: 10%;
    left: 100%;
    animation-delay: 2s
}

.stormy li:nth-child(5) {
    top: 20%;
    left: 80%;
    animation-delay: .5s
}

.stormy li:nth-child(6) {
    top: 35%;
    left: 70%;
    background-color: #bbb;
    animation-delay: .5s
}

.stormy li:nth-child(7) {
    top: 23%;
    left: 60%;
    background-color: #bbb;
    animation-delay: .8s
}

.stormy li:nth-child(8) {
    top: 5%;
    left: 70%;
    background-color: #bbb;
    animation-delay: .8s
}

.snowe {
    position: absolute;
    top: 60%;
    left: 40%;
    width: 40px;
    height: 40px;
    border-radius: 60px;
    background-color: #ddd
}

.snowex {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 15px;
    border-radius: 15px;
    background-color: #bbb
}

.stick {
    position: absolute;
    top: 60%;
    left: 40%;
    width: 3px;
    height: 15px;
    transform: rotate(-45deg);
    background-color: #333;
    z-index: -10
}

.stick2 {
    position: absolute;
    top: 60%;
    left: 70%;
    width: 3px;
    height: 15px;
    transform: rotate(45deg);
    background-color: #333;
    z-index: -10
}

.breezy {
    position: absolute;
    top: 60%;
    left: 30%;
    background: linear-gradient(to top right,rgba(156,204,101,1) 0,rgba(38,198,218,1) 50%);
    box-shadow: 1px 1px 30px rgba(38,198,218,1)
}

.cloudr {
    position: absolute;
    top: 5%;
    left: 60%;
    width: 60px;
    height: 20px;
    border-radius: 10px;
    background-color: rgba(96,125,139,1);
    box-shadow: 1px 1px 30px rgba(84,110,122,1);
    animation: flash 1.5s infinite linear
}

.breezy li {
    position: absolute;
    list-style: none;
    width: 2px;
    height: 7px;
    border-radius: 10%;
    background-color: #eee;
    opacity: 0;
    animation: fall 3s infinite linear;
    transform: rotate(25deg)
}

.breezy li:nth-child(1) {
    top: 10%;
    left: 95%
}

.breezy li:nth-child(2) {
    top: 5%;
    left: 83%;
    animation-delay: .3s
}

.breezy li:nth-child(3) {
    top: 4%;
    left: 87%;
    animation-delay: .6s
}

.breezy li:nth-child(4) {
    top: 15%;
    left: 70%;
    animation-delay: 1s
}

.breezy li:nth-child(5) {
    top: 10%;
    left: 75%
}

.night {
    position: absolute;
    top: 60%;
    left: 60%;
    background: linear-gradient(to bottom right,rgba(63,81,181,1) 0,rgba(171,71,188,1) 70%);
    box-shadow: 1px 1px 30px rgba(81,45,168,1)
}

.moon {
    position: absolute;
    top: -10%;
    left: 65%;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    background: rgba(255,241,118,1);
    box-shadow: 1px 1px 30px rgba(224,224,224,1)
}

.spot1 {
    position: absolute;
    top: 0;
    left: 85%;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: #777
}

.spot2 {
    position: absolute;
    top: 30%;
    left: 75%;
    width: 5px;
    height: 5px;
    border-radius: 100%;
    background-color: #777
}

.night li {
    position: absolute;
    list-style: none;
    width: 3px;
    height: 3px;
    border-radius: 100%;
    background-color: #fff;
    transform: rotate(45deg)
}

.night li:nth-child(1) {
    top: 30%;
    left: 65%
}

.night li:nth-child(2) {
    top: 35%;
    left: 53%
}

.night li:nth-child(3) {
    opacity: 0;
    top: 20%;
    left: 75%;
    width: 2px;
    height: 2px;
    animation: meteor 1.5s infinite linear;
    animation-delay: .6s
}

.night li:nth-child(4) {
    top: 5%;
    left: 50%
}

.night li:nth-child(5) {
    opacity: 0;
    top: 20%;
    left: 55%;
    width: 1px;
    height: 15px;
    animation: meteor 1.5s infinite linear
}

@keyframes inex {
    50% {
        opacity: .4
    }

    60% {
        opacity: 1
    }
}

@keyframes move {
    50% {
        transform: translateX(-10px)
    }
}

@keyframes fall {
    10% {
        opacity: .8
    }

    50% {
        opacity: 1;
        transform: translate(-10px,30px)
    }

    100% {
        transform: translate(-25px,70px)
    }
}

@keyframes flash {
    48% {
        background-color: rgba(96,125,139,1)
    }

    50% {
        background-color: #fff
    }

    55% {
        background-color: rgba(96,125,139,1)
    }

    57% {
        background-color: #fff
    }
}

@keyframes meteor {
    10% {
        opacity: 1
    }

    80% {
        left: 10%;
        top: 75%;
        opacity: 0
    }
}
</style>


链接: https://fly63.com/course/33_1600

css层叠卡片滑出特效 >>