You don't know css(2)

最新推荐文章于 2024-09-27 08:22:26 发布

weixin_34352449

最新推荐文章于 2024-09-27 08:22:26 发布

阅读量79

点赞数

原文链接：https://juejin.im/post/5c77ad38e51d454a4222b1f9

版权

平行四边形

效果
代码

<div id="app"></div>
#app {
    width: 200px;
    height: 100px;
    background-color: #165;
    transform: skew(-30deg);
}
复制代码

这就是平行四边形，你以为这就完成了吗？不，我们加上几个字看看。

发现了什么？我可是没有使用 font-style: italic

因为外面的图形skew(-30deg),所以里面的字也skew(-30deg)，所以我们看到的字体是倾斜的。
那我们怎么解决呢？
- 再添加一个元素,然后里面的元素反向skew(30deg),字体就正过来了。

<div id="app">
    <div>Code Xiu 平行</div>
</div>
#app {
    width: 200px;
    height: 100px;
    background-color: #165;
    transform: skew(-30deg);
}
div {
    transform: skew(30deg);
}
复制代码

伪元素

<div id="app"></div>
#app {
    width: 200px;
    height: 100px;
    background-color: #165;
    transform: skew(-30deg);
}
#app:after {
    display: inline-block;
    content: "Code Xiu 平行";
    transform: skew(30deg);
}
复制代码

旋转的椭圆

效果

代码

<div id="app">掘金</div>
@keyframes rotate360 {
    to {
        transform: rotate(360deg);
    }
}
#app {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: #165;
    animation: rotate360 2s linear infinite;
}
复制代码

我们看到字体（里面的元素）也跟着旋转，那么我们怎么解决呢？

添加另一个元素反向旋转

<div id="app">
    <div>转</div>
</div>
@keyframes rotate360 {
    to {
        transform: rotate(360deg);
    }
}
@keyframes rotate_360 {
    to {
        transform: rotate(-360deg);
    }
}
#app {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: #165;
    animation: rotate360 5s linear infinite;
}
div {
    animation: rotate_360 5s linear infinite;
}
复制代码

伪元素

<div id="app"></div>
#app:before {
    content: "转";
    display: inline-block;
    animation: rotate_360 5s linear infinite;
}
复制代码

毛玻璃

效果
代码

<div id="app">
    <div class="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro sequi in doloremque, debitis obcaecati alias sed reprehenderit necessitatibus incidunt, amet! Reprehenderit tempora quos ipsa libero suscipit eveniet, quidem, nesciunt expedita?
    </div>
</div>
#app {  //最外层父容器
    display: flex;
    align-items: center;
    justify-content: center;
    width: 402px;
    height: 300px;
    z-index: -1;
    background-image: url("./pic/1.png");
    background-size: cover;
    background-position: center; 
}
复制代码

让里面的元素在父元素中垂直居中显示。

.text {
    position: relative;
    width: 300px;
    height: 250px;
    overflow: hidden;  // 超出部分隐藏和下面的margin相对应
}
复制代码

利用伪元素占满父元素，再让伪元素的背景和父元素的一样，在模糊背景。

.text:before {  
    content: '';
    position: absolute;//让伪元素沾满父容器
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1; //让文字显示出来
    filter: blur(20px); //模糊程度，自己根据情况指定
    margin: -30px;  // 如果没有这个属性请看下面的效果图
    background-image: url("./pic/1.png"); //和外面使用同一张图片
    background-repeat: no-repeat;
    background-position: center;
}
复制代码

如果没有margin: -30px

使用负的margin（大小自己根据情况指定，只要能一致就行）来让容器扩大，这样就能显示一致的模糊度了。 4. 菱形图片

效果

你是不是看着很简单，很容易实现。
代码

<div id="app">
    <img src="./pic/1.png" alt="菱形图片">
</div>
#app {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    overflow: hidden;
}
img {
    width: 100%;
    height: 100%;
    transform: rotate(45deg); 
}
复制代码

旋转后的效果

这个可不是我们想要的效果。那我们怎么做呢？就是前面介绍过的父容器正着转，子容器反着转。

#app {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    transform: rotate(45deg); 
    overflow: hidden;
}
img {
    width: 100%;
    height: 100%;
    transform: rotate(-45deg); 
}
复制代码

变成这样

这距离我们最终的效果还差一点，怎么办？我们都知道有一个属性来放大元素。

img {
    width: 100%;
    height: 100%;
    transform: rotate(-45deg) scale(1.5); //修改后的 scale的数值自己指定
}
复制代码

5. 缺角效果

效果
代码

#app {
    width: 200px;
    height: 200px;
    background-color: #515;
    background-image: linear-gradient(-45deg, white 10px, transparent 0); //缺角
}
复制代码

内圆角

效果
代码
- 方式一两个元素

<div id="app">
    <div class="inner"></div>
</div>
#app {
    width: 200px;
    height: 200px;
    background-color: orange;
    border: 10px solid orange;
}
.inner {
    width: 200px;
    height: 200px;
    background-color: #661;
    border-radius: 10px;
}
复制代码

方式二一个元素

<div id="app"></div>
#app {
    width: 200px;
    height: 200px;
    background-color: brown;
    border-radius: 10px;
    outline: 10px solid orange;
}
复制代码

这样中间有空白，我们可以用box-shadow来填补空白

#app {
    width: 200px;
    height: 200px;
    background-color: brown;
    border-radius: 10px;
    box-shadow: 0 0 0 10px orange;  //新增的代码
    outline: 10px solid orange;
}
复制代码

我们只要换个和边框颜色一样的颜色就可以了。

转载于:https://juejin.im/post/5c77ad38e51d454a4222b1f9