css3波浪纹路_使用CSS3实现的波浪分隔线

CSS

语言：

CSSSCSS

确定

html {

height: 100vh;

}

body {

height: inherit;

background: #2e576b;

display: -ms-grid;

display: grid;

}

.container {

margin: auto;

}

.card {

position: relative;

width: 300px;

height: 350px;

background: #fff;

border-radius: 2px;

box-shadow: 0 2px 15px 3px rgba(0, 0, 0, 0.08);

overflow: hidden;

}

.card::after {

content: '';

display: block;

width: 100%;

height: 100%;

background: -webkit-linear-gradient(top, #0065a8, rgba(221, 238, 255, 0.4) 46%, rgba(255, 255, 255, 0.5));

background: linear-gradient(to bottom, #0065a8, rgba(221, 238, 255, 0.4) 46%, rgba(255, 255, 255, 0.5));

}

.wave {

position: absolute;

top: 3%;

left: 50%;

width: 400px;

height: 400px;

margin-top: -200px;

margin-left: -200px;

background: #0af;

border-radius: 40%;

opacity: .4;

-webkit-animation: shift 3s infinite linear;

animation: shift 3s infinite linear;

}

.wave.w2 {

background: yellow;

opacity: .1;

-webkit-animation: shift 7s infinite linear;

animation: shift 7s infinite linear;

}

.wave.w3 {

-webkit-animation: shift 5s infinite linear;

animation: shift 5s infinite linear;

background: crimson;

opacity: 0.1;

}

@keyframes shift {

from {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

css3波浪纹路_使用CSS3实现的波浪分隔线相关推荐

css3 文字特效_惊人CSS3文字效果
css3 文字特效 Astonishing CSS3 text effects In today's tutorial, I will show you six amazing CSS3 text ...
css3波浪纹路_纯 CSS 实现波浪效果！
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...
css3波浪纹路_css3动画水波纹、波浪
Document *{padding:0px;margin:0px;font-family:"微软雅黑";font-size:100%;font-style:normal}dd, ...
css3 卡片亮光_利用css3实现文字亮光特效的代码
这篇文章主要介绍了关于利用css3实现文字亮光特效的代码,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下以前分享过很多css3实现的字体特效,今天给大家分享一款纯css3实现的文字亮光 ...
css3三角形兼容_利用css3特性写出三角形（兼容IE浏览器）
利用CSS写出三角形的效果效果如图: 代码如下: .triangle-up { width:0px; height:0px; border-left:10px solid transparent; ...
css3动画字幕_使用CSS3动画创建高级“字幕”
本文是我们的" HTML5 / CSS3教程系列"的一部分 -致力于帮助您成为更好的设计师和/或开发人员. 单击此处查看同一系列的更多文章. 今天,我们将再次看一看"字幕 ...
mask属性是css3的吗_使用CSS3 mask（蒙版，遮罩）属性实现超酷按钮悬停动画
CSS 语言: CSSSCSS 确定 @import url("https://fonts.googleapis.com/css?family=Lato:100,300,400") ...
css3波浪纹路_css3实现波纹特效、H5实现动态波浪效果
css3实现动态波纹特效,由于css3里面有过渡和动画效果,现在利用css3实现动态波浪效果就很简单了,直接使用transform来实现就ok, 使得translateX 产生偏移就可以不断实现循环动 ...
css3常用技巧_您可能错过的5个CSS3技巧和窍门
css3常用技巧 Though, CSS3 isn't a complex language but you'll there are greater chances that you'll stum ...

css3波浪纹路_使用CSS3实现的波浪分隔线

css3波浪纹路_使用CSS3实现的波浪分隔线相关推荐

最新文章

热门文章