cccccl的博客

<style> .back { position: fixed; padding: 0; margin: 0; top: 0; left: 0; width: 100%; height: 100%; background: white; animation-name: backdiv; animation-duration: 1s; animation-iteration-count: infinite;

animation-iteration-count 属性用来控制动画循环的次数。设置为 infinite 则使动画可以一直循环<style> #ball { width: 100px; height: 100px; margin: 50px auto; position: relative; border-radius: 50%; background: linear-gradient( 35deg, #ccfff

使用 @keyframes 来使鼠标悬停的改变图片大小<style> img:hover { animation-name: width; animation-duration: 500ms; } @keyframes width { 100% { width: 40px; } }</style><img src="https://bit.ly/smallgooglelogo"/>...

首先创建一个圆，然后设置它的box-shadow值。最后将圆的背景色编程transparent就行<style> .center { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 100px; height: 100px; background-color: transparent; border-r

爱心主要是由一个正方形经过rotate旋转，然后用::after伪元素和::before伪元素画一个圆形，最后调整它们的位置就可以画出一颗爱心<style> .heart { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; background-color: pink; height: 50px; width: 50px;

使用repeating-linear-gradient创建一个条纹卡片效果只使用了角度值和色标<style> div{ border-radius: 20px; width: 70%; height: 400px; margin: 50 auto; background: repeating-linear-gradient( 45deg, // 角度值 yellow 0px, // 色标 yell...