CSS(层叠样式表)是一门用于控制网页样式的编程语言,也是表白神器!
.love { width: 100%; height: 100%; background-color: pink; font-size: 20px; color: white; text-align: center; line-height: 100vh; }
上述代码是一个表白神器,使得页面呈现浪漫粉色并居中显示文字。
.heart:before { content: ""; position: absolute; width: 20px; height: 20px; background-color: red; border-radius: 20px 20px 0 0; transform: rotate(-45deg); } .heart:after { content: ""; position: absolute; width: 20px; height: 20px; background-color: red; border-radius: 20px 20px 0 0; transform: rotate(45deg); }
上述代码是实现页面中心显示爱心。通过:before和:after创建两个不同角度旋转的div,最终呈现出一个完整的爱心。
.text { width: 60px; height: 60px; background-color: yellow; font-size: 30px; text-align: center; line-height: 60px; animation: move 2s infinite; } @keyframes move { 0% { transform: translateY(0); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0); } }
上述代码是实现文本动画。通过animation属性使文本上下移动。
CSS代码使表白更美好,表达更精彩!