1.绘制爱心看到了记录一下 ,原网址https://blog.csdn.net/weixin_43570367/article/details/106018731?utm_medium=distribute.pc_category.none-task-blog-hot-5.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-5.nonecase&request_id=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.heart {
width: 400px;
margin: 100px auto;
position: relative;
}
.lovefall:before,
.lovefall:after {
border-radius: 10px 10px 0 0;
content: "";
position: absolute;
width: 20px;
height: 30px;
display: block;
background: red;
}
.lovefall:before {
transform: rotate(45deg);
left: 7px;
}
.lovefall:after {
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div class="heart">
<div class="lovefall"></div>
</div>
</body>
</html>
红色旋转月亮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>红色的月亮</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
background: black;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.moon
{
width: 8em;
height: 8em;
border-radius: 50%;
background: black;
box-shadow: inset 0.5em -0.5em crimson;
position: relative;
animation: move 2s linear infinite;
}
.moon::before,.moon::after
{
position: absolute;
width: 100%;
height: 100%;
background: inherit;
box-shadow: inherit;
border-radius: inherit;
content: "";
}
.moon::before{
filter: blur(5px);
}
.moon::after{
filter: blur(10px);
}
@keyframes move {
to{
transform: rotate(1turn);
}
}
</style>
</head>
<body>
<div class="moon"></div>
</body>
</html>
文字效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本效果</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
background-color: #0f0f0f;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.mywords {
color: #fff;
font-size: 1.5em;
line-height: 1.8em;
margin: 0 1em;
}
.mywords span {
animation: lightin 0.8s both;
}
@keyframes lightin {
from {
opacity: 0;
}
65% {
opacity: 1;
text-shadow: 0 0 10px #fff;
}
75% {
opacity: 1;
}
to {
opacity: 0.7;
}
}
</style>
</head>
<body>
<p class="mywords">
不管前方的路有多苦,只要走的方向正确,不管多么崎岖不平,都比站在原地更接近幸福。
</p>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function () {
var words = $(".mywords").text().split("");
$(".mywords").empty();
words.forEach((w, i) => {
$(`<span>${w}</span>`)
.css({
"animation-delay": 0.05 * i + 's'
})
.appendTo($(".mywords"));
})
})
</script>
</body>
</html>
下雪版本改成下爱心版本了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>想和你一起去看雪</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
height: 100vh;
background: radial-gradient(ellipse at bottom,
#1b2735 0, #090a0f 100%);
filter: drop-shadow(0 0 10px white);
position: relative;
}
.snow {
/* width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff; */
position: absolute;
}
.snow:before,
.snow:after {
border-radius: 10px 10px 0 0;
content: "";
position: absolute;
width: 20px;
height: 30px;
display: block;
background: pink;
}
.snow:before {
transform: rotate(45deg);
left: 7px;
}
.snow:after {
transform: rotate(-45deg);
}
.mywords {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 1.5em;
line-height: 2em;
font-weight: 500;
display: flex;
flex-wrap: wrap;
}
.mywords span {
animation: jumpin 0.5s ease-out both;
}
@keyframes jumpin {
from {
transform: translateY(-20%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
</style>
</head>
<body>
<p class="mywords">
余生我只想和你看雪看星星看月亮,从诗词歌赋谈到人生理想。
</p>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function () {
var words = $(".mywords").text().split("");
$(".mywords").empty();
words.forEach((w, i) => {
$(`<span>${w}</span>`).css({
"animation-delay": 0.1 * i + 's'
}).appendTo($(".mywords"));
});
for (var i = 0; i < 200; i++) {
var x = Math.random() * 100;
var y = Math.random() * 100;
var scale = Math.random();
var opacity = Math.random();
var t1 = Math.random() * 20 + 10;
var t2 = Math.random() * 30;
var o = Math.random() * 20 - 10;
var x1 = x + o;
var x2 = x + o / 2;
$(`<style> @keyframes fall${i} {
${y}%{
transform: translate(${x1}vw, ${y}vh) scale(${scale});
}
to{
transform: translate(${x2}vw,100vh) scale(${scale});
}
}
</style>`).appendTo($("head"));
$('<div class="snow"></div>')
.css({
"transform": `translate(${x}vw, -10px) scale(${scale})`,
"opacity": opacity,
"animation": `fall${i} ${t1}s -${t2}s linear infinite`
})
.appendTo($("body")).end()
}
})
</script>
</body>
</html>
交叉动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>交叉动画实现</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.wrapper {
background-color: #222;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.dot {
width: 2em;
height: 2em;
margin: 1em;
border-radius: 50%;
background-color: red;
position: relative;
}
.dot::before {
width: 100%;
height: 100%;
position: absolute;
background-color: inherit;
border-radius: inherit;
content: "";
animation: wave 2s ease-out infinite;
}
/* .dot:nth-of-type(1)::before {
animation-delay: .2s;
}
.dot:nth-of-type(2)::before {
animation-delay: .4s;
} */
/* .dot:nth-of-type(3)::before {
animation-delay: .6s;
}
.dot:nth-of-type(4)::before {
animation-delay: .8s;
}
.dot:nth-of-type(5)::before {
animation-delay: 1s;
} */
/* .dot:nth-of-type(1) {
background-color: green;
}
.dot:nth-of-type(2) {
background-color: yellow;
}
.dot:nth-of-type(3) {
background-color: blue;
}
.dot:nth-of-type(4) {
background-color: yellowgreen;
}
.dot:nth-of-type(5) {
background-color: white;
} */
@keyframes wave {
50% {
transform: scale(2.5);
}
100% {
opacity: 0;
}
}
</style>
</head>
<body>
<div class="wrapper">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function()
{
var $dot=$(".dot");
for(var i=0;i<$dot.length;i++)
{
$(`.dot:nth-of-type(${i+1})`).css({
"background-color":`rgb(${random(0,255)},${random(0,255)},${random(0,255)})`
})
// $(`.dot:nth-of-type(${i+1})::before`).css({
// "animation-delay":i*0.2+"s"
// })
$("head").append(
`<style>
.dot:nth-of-type(${i+1})::before
{
animation-delay:${i*0.2}s
}
</style>`
)
}
})
function random(min,max)
{
return Math.floor(Math.random()*(max-min)+min)
}
</script>
</body>
</html>
虚线效果
.dotted-line{
border: 1px dashed transparent;
background: linear-gradient(white,white) padding-box, repeating-linear-gradient(-45deg,#ccc 0, #ccc .25em,white 0,white .75em);
}
具体的虚线的颜色和间距都可以通过repeating-linear-gradient生成的条纹背景去调整。
文本超出省略号 (多行文本)
.multiline-ellipsis {
display: -webkit-box;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4; //需要显示的行数
overflow: hidden;
text-overflow: ellipsis;
}
扩展: -webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
calc()函数 用来计算css属性的值。
用法
/** 属性:calc(expression)*/
width:calc(100% - 34px);
卡券效果
.coupon{
width: 300px;
height: 100px;
position: relative;
background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right /50% 51px no-repeat,
radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 51px no-repeat,
radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 51px no-repeat,
radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 51px no-repeat;
filter: drop-shadow(2px 2px 2px rgba(0,0,0,.2));
}