有关css的一些特效总结

1.使用linear-gradient控制文本渐变

h1{
	    background-image: linear-gradient(90deg, #f66, #f90);
        background-clip: text;
        /* 兼容谷歌浏览器 */
        -webkit-background-clip: text;
	    font-size: 60px;
	    animation: hue 5s linear infinite;
	    -webkit-text-fill-color: transparent;
    }
    @keyframes hue {
	    from {
		    filter: hue-rotate(0);
	    }
	    to {
		    filter: hue-rotate(-1turn);
	    }
    } 

<div class="content">
		<h1 class="gradient-text">linear-gradient控制文本渐变</h1>
</div>

效果：

2.使用writing-mode排版竖文

.vertical-text {
        writing-mode: vertical-rl;
        margin: 0 auto;
    }
	.vertical-text h5 {
		padding-left: 20px;
		font-weight: bold;
		font-size: 18px;
		color: #f66;
	}
	.vertical-text p {
		line-height: 30px;
		color: #66f;
    }

<div class="vertical-text content">
        <h5>情</h5>
        <p>我见犹怜，<br>爱不释手。<br>雅俗共赏，<br>君子好逑。</p>
</div>

效果如下：

3.商城票券

.mall-ticket {
	display: flex;
	position: relative;
	width: 300px;
	height: 100px;
	background: radial-gradient(circle at right top, transparent 10px, #f66 0) top left/100px 51% no-repeat,
		radial-gradient(circle at right bottom, transparent 10px, #f66 0) bottom left/100px 51% no-repeat,
		radial-gradient(circle at left top, transparent 10px, #ccc 0) top right/200px 51% no-repeat,
		radial-gradient(circle at left bottom, transparent 10px, #ccc 0) bottom right/200px 51% no-repeat;
	filter: drop-shadow(2px 2px 2px rgba(#fff, .2));
	line-height: 100px;
	text-align: center;
	color: #fff;			
    }
    .mall-ticket::before {
		position: absolute;
		left: 100px;
		top: 0;
		bottom: 0;
		margin: auto;
		border: 1px dashed #66f;
		height: 80px;
		content: "";
	}
    .mall-ticket::after {
		position: absolute;
		left: 100%;
		top: 0;
		width: 5px;
		height: 100%;
		background-image: linear-gradient(180deg, #ccc 5px, transparent 5px, transparent),
			radial-gradient(10px circle at 5px 10px, transparent 5px, #ccc 5px);
		background-size: 5px 15px;
		content: "";
	}
    .mall-ticket h3 {
		width: 100px;
		font-size: 30px;
	}
    .mall-ticket p {
		flex: 1;
		font-weight: bold;
		font-size: 18px;
    }


<div class="mall-ticket content">
		<h3>100元</h3>
		<p>网易考拉代金券</p>
</div>

效果如下：