css 外弧_利用存css实现弧形边界

忘是亡心i 2023-01-01 05:47 119阅读 0赞

一般拿到这种需求想到可能存在几种方案：

方案一：直接贴图，图片和内容之间的衔接，需要注意

// sass文件

body\{

margin:0;

padding:0;

background: \#efefef;

.curves-wrapper\{

background:\#fff;

.curves-before\{

width:100%;

img\{

width:100%;

height:0.667rem;

position: relative;

top:-0.667rem;

.curves\{

position: relative;

top: -0.3rem;

background: \#FFFFFF;

text-align: center;

.curves-after\{

width:100%;

img\{

width:100%;

height:0.667rem;

在html中引入

Document

![Image 1][]

YOUR CONTENT

![Image 1][]

效果展示如下：

![Image 1][]

方案二：纯css实现上下的弧度

scss文件 直接利用vscode中的live sass compiler编译一下即可

body\{

margin:0;

padding:0;

background: \#efefef;

.div-ani2 \{

position: relative;

align-items: center;

min-height: 9vw;

background-color: rgb(27, 112, 240);

overflow: hidden;

margin-top:2vh;

&:after \{

content: "";

position: absolute;

left: 50%;

min-width: 300vw;

min-height: 300vw;

background-color: \#fff;

animation-name: rotate;

animation-iteration-count: infinite;

animation-timing-function: linear;

&:after \{

bottom: -6vw;

border-radius: 50%;

transform: translate(-50%, -2%) rotateZ(180deg);

.div-ani2-content\{

height:10vw;

line-height:10vw;

width:100vw;

background-color: rgb(27, 112, 240);

text-align:center;

.div-ani2-bottom \{

position: relative;

align-items: center;

min-height: 9vw;

background-color: rgb(27, 112, 240);

overflow: hidden;

margin-bottom:2vh;

&:before \{

content: "";

position: absolute;

left: 50%;

top: 72%;

min-width: 300vw;

min-height: 300vw;

background-color: \#fff;

animation-name: rotate;

animation-iteration-count: infinite;

animation-timing-function: linear;

&:before \{

bottom: 12vh;

border-radius: 50%;

transform: translate(-50%, -2%) rotateZ(180deg);

// 原理即整个圆形定位在不同位置，overflow:hidden

.div-ani3 \{

margin-top:90vw;

position: relative;

align-items: center;

min-height: 15vh;

background-color: \#f01b5a;

width:30vw;

margin-left:35vw;

margin-bottom:20vw;

&:after \{

content: "";

position: absolute;

left: 50%;

min-width: 100vw;

min-height: 100vw;

background-color: \#f16369;

animation-name: rotate;

animation-iteration-count: infinite;

animation-timing-function: linear;

&:after \{

bottom: 1vh;

border-radius: 50%;

transform: translate(-50%, -2%) rotateZ(180deg);

直接在html中引入

Document

your content

效果图如下：

![Image 1][]

纯css实现的原理即是，设置一个超级大的圆形，只显示其中的一小部分；将全部内容展示出来就了解其原理了

// html

// sass 原理即整个圆形定位在不同位置，overflow:hidden

.div-ani3 \{

margin-top:90vw;

position: relative;

align-items: center;

min-height: 15vh;

background-color: \#f01b5a;

width:30vw;

margin-left:35vw;

margin-bottom:20vw;

&:after \{

content: "";

position: absolute;

left: 50%;

min-width: 100vw;

min-height: 100vw;

background-color: \#f16369;

animation-name: rotate;

animation-iteration-count: infinite;

animation-timing-function: linear;

&:after \{

bottom: 1vh;

border-radius: 50%;

transform: translate(-50%, -2%) rotateZ(180deg);

展示图：

![Image 1][]

其中下面哪个小部分既是我们要的效果图：

![Image 1][]

[Image 1]:

css 外弧_利用存css实现弧形边界

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 css特效弧形菜单

相关 css 外弧_利用存css实现弧形边界

相关 Css 实现漂亮弧形

相关利用css创建动画

相关利用HTML+CSS+CSS3实现太极旋转动态图

相关蛇边界动画按钮 html+css

相关 CSS3之border-radius半弧展示

相关 Css 实现漂亮弧形

相关 css外联样式

相关利用CSS3实现宇宙效果