CSS特效积累

白色玫瑰 程序猿

时间: 2023-07-15 阅读: 1 字数:8643

css3特效
{}
积累的一些css特效

CSS特效积累

积累的一些css特效代码

文章目录

<a href="#CSS_0">CSS特效积累</a>    <a href="#_5">悬停时出现详细内容</a>    <a href="#_81">悬停的时候放大旋转，同时框的大小不变</a>    <a href="#_120">旋转卡</a>    <a href="#_190">悬停时侯的过渡下划线</a>    <a href="#_235">渐变颜色的阴影</a>    <a href="#_277">首字加大</a>

<hr>

悬停时出现详细内容

原理：元素原本就全都有，但是display:hidden 超出框的不显示 悬停的时候图片margin:-100px 图片就会往上移动，让下方之前隐藏的文字显示 配上transition过渡，就可以有个很自然的效果 

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <div class="card">
      ![](https://picsum.photos/id/404/367/267)
      <h3>Lorem ipsum</h3>
      <div class="focus-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/> <a href="#">Link to source</a>
        </p>
      </div>
     </div>
</body>

<style>
   .card {
  width: 300px;
  height: 280px;
  padding: 0;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
  border-radius: 8px;
  box-sizing: border-box;
  overflow: hidden;
}

.card * {
  transition: 0.3s ease all;
}

.card img {
  margin: 0;
  width: 300px;
  height: 224px;
  object-fit: cover;
  display: block;
}

.card h3 {
  margin: 0;
  padding: 12px 12px 48px;
  line-height: 32px;
  font-weight: 500;
  font-size: 20px;
}

.card .focus-content {
  display: block;
  padding: 8px 12px;
}

.card p {
  margin: 0;
  line-height: 1.5;
}

.card:hover img {
  margin-top: -30px;
}

.card:hover h3 {
  padding: 8px 12px 0;
}
</style>
</html>

悬停的时候放大旋转，同时框的大小不变

超出部分不显示目的是让框的大小不变，否则框也会跟着旋转放大 transform: scale(1.3) rotate(5deg 放大且旋转 

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <figure class="hover-rotate">
      ![](https://picsum.photos/id/669/600/800.jpg)
     </figure>
</body>

<style>
   .hover-rotate {
  overflow: hidden;
  margin: 8px;
  width: 240px;
  width: 320px;
}

.hover-rotate img {
  transition: all 0.3s;
  box-sizing: border-box;
  max-width: 100%;
}

.hover-rotate:hover img {
  transform: scale(1.3) rotate(5deg);
}
</style>
</html>

旋转卡

当元素旋转超过90度后是不显示的，（相当于是个纸片的背面，不显示） 让back的一面开始的时候transform: rotateY(180deg); 相当于背过去，不显示 让front的一面悬停的时候旋转180，然后让back一面旋转回rotate(0deg)就可以完成 

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <div class="card">
      <div class="card-side front">
        <div>Front Side</div>
      </div>
      <div class="card-side back">
        <div>Back Side</div>
      </div>
     </div>
</body>

<style>
   .card {
perspective: 150rem;
position: relative;
height: 40rem;
max-width: 400px;
margin: 2rem;
box-shadow: none;
background: none;
}

.card-side {
height: 35rem;
border-radius: 15px;
transition: all 0.8s ease;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 80%;
padding:2rem;
color: white
}

.card-side.back {
transform: rotateY(180deg);
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%,#C850C0 46%, #FFCC70 100%);
}

.card-side.front {
background-color: #0093E9;
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}

.card:hover .card-side.front {
transform: rotateY(180deg);
}

.card:hover .card-side.back {
transform: rotateY(0deg);
}
</style>
</html>

悬停时侯的过渡下划线

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <p class="hover-underline-animation">Hover this text to see the effect!</p>
   
</body>

<style>
   .hover-underline-animation {
display: inline-block;
position: relative;
color: #0087ca;
}

.hover-underline-animation:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
bottom: 0px;
left: 0;
height: 1px;
background-color: #0087ca;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
/* 设置基点位置 */
}
</style>
</html>

渐变颜色的阴影

普通的阴影不能支持渐变颜色 使用伪元素:after中继承颜色即可 在这里插入图片描述 

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <div class="dynamic-shadow"></div>
</body>

<style>
.dynamic-shadow {
  position: relative;
  width: 10rem;
  height: 10rem;
  background: linear-gradient(75deg, #6d78ff, #00ffb8);
  z-index: 1;
}

.dynamic-shadow:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  top: 0.5rem;
  filter: blur(0.4rem);
  opacity: 0.7;
  z-index: -1;
}

</style>
</html>

首字加大

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=
   , initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <p>你好你好 ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo ligula quis tincidunt cursus. Integer consectetur tempor ex eget hendrerit. Cras facilisis sodales odio nec maximus. Pellentesque lacinia convallis libero, rhoncus tincidunt ante dictum at. Nullam facilisis lectus tellus, sit amet congue erat sodales commodo.</p>
<p>Donec magna erat, imperdiet non odio sed, sodales tempus magna. Integer vitae orci lectus. Nullam consectetur orci at pellentesque efficitur.</p>
</body>
<style>
   p:first-child::first-letter {
  color: #5f79ff;
  float: left;
  margin: 0 8px 0 4px;
  font-size: 3rem;
  font-weight: bold;
  line-height: 1;
}
</style>
</html>

<hr>

原文地址：https://blog.csdn.net/m0_60394632/article/details/126190409?ops_request_misc=&request_id=4ac4022a84dd49759bfec91d9092784e&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-22-126190409-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88

本文章网址:https://www.sjxi.cn/detil/0a12839c3f734b72b8c9f8a22f08ec39

最新评论

当前未登陆哦
登陆后才可评论哦

湘ICP备2021009447号